@object-ui/types 0.3.0

package/src/layout.ts

@@ -0,0 +1,451 @@
+/**
+ * @object-ui/types - Layout Component Schemas
+ * 
+ * Type definitions for layout and container components.
+ * These components organize and structure other components.
+ * 
+ * @module layout
+ * @packageDocumentation
+ */
+
+import type { BaseSchema, SchemaNode } from './base';
+
+/**
+ * Basic HTML div container
+ */
+export interface DivSchema extends BaseSchema {
+  type: 'div';
+  /**
+   * Child components
+   */
+  children?: SchemaNode | SchemaNode[];
+}
+
+/**
+ * Text span component for inline text
+ */
+export interface SpanSchema extends BaseSchema {
+  type: 'span';
+  /**
+   * Text content
+   */
+  value?: string;
+  /**
+   * Child components
+   */
+  children?: SchemaNode | SchemaNode[];
+}
+
+/**
+ * Text display component
+ */
+export interface TextSchema extends BaseSchema {
+  type: 'text';
+  /**
+   * Text content to display
+   */
+  value?: string;
+  /**
+   * Text variant/style
+   * @default 'body'
+   */
+  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'caption' | 'overline';
+  /**
+   * Text alignment
+   */
+  align?: 'left' | 'center' | 'right' | 'justify';
+}
+
+/**
+ * Image component
+ */
+export interface ImageSchema extends BaseSchema {
+  type: 'image';
+  /**
+   * Image source URL
+   */
+  src: string;
+  /**
+   * Alt text for accessibility
+   */
+  alt?: string;
+  /**
+   * Image width
+   */
+  width?: string | number;
+  /**
+   * Image height
+   */
+  height?: string | number;
+  /**
+   * Object fit property
+   */
+  objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+}
+
+/**
+ * Icon component
+ */
+export interface IconSchema extends BaseSchema {
+  type: 'icon';
+  /**
+   * Icon name (lucide-react icon name)
+   */
+  name: string;
+  /**
+   * Icon size in pixels
+   * @default 24
+   */
+  size?: number;
+  /**
+   * Icon color
+   */
+  color?: string;
+}
+
+/**
+ * Separator/Divider component
+ */
+export interface SeparatorSchema extends BaseSchema {
+  type: 'separator';
+  /**
+   * Orientation of the separator
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Whether to add decorative content
+   */
+  decorative?: boolean;
+}
+
+/**
+ * Generic container component
+ */
+export interface ContainerSchema extends BaseSchema {
+  type: 'container';
+  /**
+   * Max width constraint
+   * @default 'lg'
+   */
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full' | 'screen' | false;
+  /**
+   * Center the container
+   * @default true
+   */
+  centered?: boolean;
+  /**
+   * Padding
+   */
+  padding?: number;
+  /**
+   * Child components
+   */
+  children?: SchemaNode | SchemaNode[];
+}
+
+/**
+ * Flexbox layout component
+ */
+export interface FlexSchema extends BaseSchema {
+  type: 'flex';
+  /**
+   * Flex direction
+   * @default 'row'
+   */
+  direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse';
+  /**
+   * Justify content alignment
+   * @default 'start'
+   */
+  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+  /**
+   * Align items
+   * @default 'center'
+   */
+  align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+  /**
+   * Gap between items (Tailwind scale 0-8)
+   * @default 2
+   */
+  gap?: number;
+  /**
+   * Allow items to wrap
+   * @default false
+   */
+  wrap?: boolean;
+  /**
+   * Child components
+   */
+  children?: SchemaNode | SchemaNode[];
+}
+
+/**
+ * Stack layout component (Vertical Flex shortcut)
+ */
+export interface StackSchema extends Omit<FlexSchema, 'type'> {
+  type: 'stack';
+}
+
+/**
+ * CSS Grid layout component
+ */
+export interface GridSchema extends BaseSchema {
+  type: 'grid';
+  /**
+   * Number of columns (responsive)
+   * Can be number or object: { xs: 1, sm: 2, md: 3, lg: 4 }
+   * @default 3
+   */
+  columns?: number | Record<string, number>;
+  /**
+   * Gap between items (Tailwind scale 0-8)
+   * @default 4
+   */
+  gap?: number;
+  /**
+   * Child components
+   */
+  children?: SchemaNode | SchemaNode[];
+}
+
+/**
+ * Card component
+ */
+export interface CardSchema extends BaseSchema {
+  type: 'card';
+  /**
+   * Card title
+   */
+  title?: string;
+  /**
+   * Card description
+   */
+  description?: string;
+  /**
+   * Card header content
+   */
+  header?: SchemaNode | SchemaNode[];
+  /**
+   * Card body/content (Legacy, use children)
+   */
+  body?: SchemaNode | SchemaNode[];
+  /**
+   * Child components
+   */
+  children?: SchemaNode | SchemaNode[];
+  /**
+   * Card footer content
+   */
+  footer?: SchemaNode | SchemaNode[];
+  /**
+   * Variant style
+   * @default 'default'
+   */
+  variant?: 'default' | 'outline' | 'ghost';
+  /**
+   * Whether the card is hoverable
+   * @default false
+   */
+  hoverable?: boolean;
+  /**
+   * Whether the card is clickable
+   * @default false
+   */
+  clickable?: boolean;
+  /**
+   * Click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Tabs component
+ */
+export interface TabsSchema extends BaseSchema {
+  type: 'tabs';
+  /**
+   * Default active tab value
+   */
+  defaultValue?: string;
+  /**
+   * Controlled active tab value
+   */
+  value?: string;
+  /**
+   * Tabs orientation
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Tab items configuration
+   */
+  items: TabItem[];
+  /**
+   * Change handler
+   */
+  onValueChange?: (value: string) => void;
+}
+
+/**
+ * Individual tab item
+ */
+export interface TabItem {
+  /**
+   * Unique tab identifier
+   */
+  value: string;
+  /**
+   * Tab label
+   */
+  label: string;
+  /**
+   * Tab icon
+   */
+  icon?: string;
+  /**
+   * Whether tab is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Tab content
+   */
+  content: SchemaNode | SchemaNode[];
+}
+
+/**
+ * Scroll area component
+ */
+export interface ScrollAreaSchema extends BaseSchema {
+  type: 'scroll-area';
+  /**
+   * Height of the scroll container
+   */
+  height?: string | number;
+  /**
+   * Width of the scroll container
+   */
+  width?: string | number;
+  /**
+   * Scrollbar orientation
+   * @default 'vertical'
+   */
+  orientation?: 'vertical' | 'horizontal' | 'both';
+  /**
+   * Child components
+   */
+  children?: SchemaNode | SchemaNode[];
+}
+
+/**
+ * Resizable panels component
+ */
+export interface ResizableSchema extends BaseSchema {
+  type: 'resizable';
+  /**
+   * Direction of resizable panels
+   * @default 'horizontal'
+   */
+  direction?: 'horizontal' | 'vertical';
+  /**
+   * Minimum Height
+   */
+  minHeight?: string | number;
+  /**
+   * Show resize handle
+   * @default true
+   */
+  withHandle?: boolean;
+  /**
+   * Resizable panels
+   */
+  panels: ResizablePanel[];
+}
+
+/**
+ * Individual resizable panel
+ */
+export interface ResizablePanel {
+  /**
+   * Unique panel identifier
+   */
+  id: string;
+  /**
+   * Default size (percentage 0-100)
+   */
+  defaultSize?: number;
+  /**
+   * Minimum size (percentage 0-100)
+   */
+  minSize?: number;
+  /**
+   * Maximum size (percentage 0-100)
+   */
+  maxSize?: number;
+  /**
+   * Panel content
+   */
+  content: SchemaNode | SchemaNode[];
+}
+
+/**
+ * Page layout component
+ * Top-level container for a page route
+ */
+export interface PageSchema extends BaseSchema {
+  type: 'page';
+  /**
+   * Page title
+   */
+  title?: string;
+  /**
+    * Page icon (Lucide icon name)
+    */
+  icon?: string;
+  /**
+   * Page description
+   */
+  description?: string;
+  /**
+   * Main content array
+   */
+  body?: SchemaNode[];
+  /**
+   * Alternative content prop
+   */
+  children?: SchemaNode | SchemaNode[];
+}
+
+/**
+ * Union type of all layout schemas
+ */
+export type LayoutSchema =
+  | DivSchema
+  | SpanSchema
+  | TextSchema
+  | ImageSchema
+  | IconSchema
+  | SeparatorSchema
+  | ContainerSchema
+  | FlexSchema
+  | GridSchema
+  | CardSchema
+  | TabsSchema
+  | ScrollAreaSchema
+  | ResizableSchema
+  | PageSchema;
+
+/**
+ * Page container component
+ */
+export interface PageSchema extends BaseSchema {
+  type: 'page';
+  /**
+   * Page title
+   */
+  title?: string;
+  /**
+   * Child components
+   */
+  children?: SchemaNode | SchemaNode[];
+}

package/src/navigation.ts

@@ -0,0 +1,235 @@
+/**
+ * @object-ui/types - Navigation Component Schemas
+ * 
+ * Type definitions for navigation and menu components.
+ * 
+ * @module navigation
+ * @packageDocumentation
+ */
+
+import type { BaseSchema, SchemaNode } from './base';
+
+/**
+ * Navigation link
+ */
+export interface NavLink {
+  /**
+   * Link label
+   */
+  label: string;
+  /**
+   * Link URL/href
+   */
+  href: string;
+  /**
+   * Link icon
+   */
+  icon?: string;
+  /**
+   * Whether link is active
+   */
+  active?: boolean;
+  /**
+   * Whether link is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Submenu links
+   */
+  children?: NavLink[];
+  /**
+   * Badge content
+   */
+  badge?: string | number;
+}
+
+/**
+ * Header bar component
+ */
+export interface HeaderBarSchema extends BaseSchema {
+  type: 'header-bar';
+  /**
+   * Header title/brand
+   */
+  title?: string;
+  /**
+   * Brand logo image URL
+   */
+  logo?: string;
+  /**
+   * Navigation links
+   */
+  nav?: NavLink[];
+  /**
+   * Left side content
+   */
+  left?: SchemaNode | SchemaNode[];
+  /**
+   * Center content
+   */
+  center?: SchemaNode | SchemaNode[];
+  /**
+   * Right side content
+   */
+  right?: SchemaNode | SchemaNode[];
+  /**
+   * Whether header is sticky
+   * @default true
+   */
+  sticky?: boolean;
+  /**
+   * Header height
+   */
+  height?: string | number;
+  /**
+   * Header variant
+   * @default 'default'
+   */
+  variant?: 'default' | 'bordered' | 'floating';
+}
+
+/**
+ * Sidebar component
+ */
+export interface SidebarSchema extends BaseSchema {
+  type: 'sidebar';
+  /**
+   * Sidebar title
+   */
+  title?: string;
+  /**
+   * Navigation links
+   */
+  nav?: NavLink[];
+  /**
+   * Sidebar content (alternative to nav)
+   */
+  content?: SchemaNode | SchemaNode[];
+  /**
+   * Footer content
+   */
+  footer?: SchemaNode | SchemaNode[];
+  /**
+   * Sidebar position
+   * @default 'left'
+   */
+  position?: 'left' | 'right';
+  /**
+   * Whether sidebar is collapsible
+   * @default true
+   */
+  collapsible?: boolean;
+  /**
+   * Default collapsed state
+   * @default false
+   */
+  defaultCollapsed?: boolean;
+  /**
+   * Controlled collapsed state
+   */
+  collapsed?: boolean;
+  /**
+   * Sidebar width when expanded
+   * @default '16rem'
+   */
+  width?: string | number;
+  /**
+   * Sidebar width when collapsed
+   * @default '4rem'
+   */
+  collapsedWidth?: string | number;
+  /**
+   * Collapsed state change handler
+   */
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /**
+   * Sidebar variant
+   * @default 'default'
+   */
+  variant?: 'default' | 'bordered' | 'floating';
+}
+
+/**
+ * Breadcrumb item
+ */
+export interface BreadcrumbItem {
+  /**
+   * Item label
+   */
+  label: string;
+  /**
+   * Item URL/href
+   */
+  href?: string;
+  /**
+   * Item icon
+   */
+  icon?: string;
+  /**
+   * Click handler (if not using href)
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Breadcrumb component
+ */
+export interface BreadcrumbSchema extends BaseSchema {
+  type: 'breadcrumb';
+  /**
+   * Breadcrumb items
+   */
+  items: BreadcrumbItem[];
+  /**
+   * Separator character/icon
+   * @default '/'
+   */
+  separator?: string;
+  /**
+   * Maximum items to display before collapsing
+   */
+  maxItems?: number;
+}
+
+/**
+ * Pagination component
+ */
+export interface PaginationSchema extends BaseSchema {
+  type: 'pagination';
+  /**
+   * Current page (1-indexed)
+   */
+  page: number;
+  /**
+   * Total number of pages
+   */
+  totalPages: number;
+  /**
+   * Number of sibling pages to show
+   * @default 1
+   */
+  siblings?: number;
+  /**
+   * Show first/last buttons
+   * @default true
+   */
+  showFirstLast?: boolean;
+  /**
+   * Show previous/next buttons
+   * @default true
+   */
+  showPrevNext?: boolean;
+  /**
+   * Page change handler
+   */
+  onPageChange?: (page: number) => void;
+}
+
+/**
+ * Union type of all navigation schemas
+ */
+export type NavigationSchema =
+  | HeaderBarSchema
+  | SidebarSchema
+  | BreadcrumbSchema
+  | PaginationSchema;