@cere/cere-design-system 0.0.2

package/dist/index.d.ts

@@ -0,0 +1,901 @@
+import { Theme } from '@mui/material/styles';
+import React, { ReactNode } from 'react';
+import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
+import { IconButtonProps as IconButtonProps$1 } from '@mui/material/IconButton';
+import { LoadingButtonProps as LoadingButtonProps$1 } from '@mui/lab';
+import { ButtonGroupProps as ButtonGroupProps$1, SelectProps, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, StepperProps as StepperProps$1, StepProps as StepProps$1, StepLabelProps as StepLabelProps$1, StepContentProps as StepContentProps$1, StepButtonProps as StepButtonProps$1, MenuProps as MenuProps$1, DialogProps as DialogProps$1, ListProps as ListProps$1, ListItemProps as ListItemProps$1, TableProps as TableProps$1, AccordionProps as AccordionProps$1, AppBarProps as AppBarProps$1, CollapseProps as CollapseProps$1, CircularProgressProps as CircularProgressProps$1, BoxProps } from '@mui/material';
+export { Box, BoxProps, Container, ContainerProps, FormControl, FormControlLabel, FormControlLabelProps, FormControlProps, FormHelperText, FormHelperTextProps, FormLabel, FormLabelProps, Grid, Grid2Props, GridProps, InputAdornment, InputAdornmentProps, InputLabel, InputLabelProps, ListItemIcon, ListItemSecondaryAction, ListItemText, Stack, StackProps, Toolbar, ToolbarProps, Typography, TypographyProps } from '@mui/material';
+import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
+import { SwitchProps as SwitchProps$1 } from '@mui/material/Switch';
+import { CheckboxProps as CheckboxProps$1 } from '@mui/material/Checkbox';
+import { RadioProps as RadioProps$1 } from '@mui/material/Radio';
+import { BadgeProps as BadgeProps$1 } from '@mui/material/Badge';
+import { ChipProps as ChipProps$1 } from '@mui/material/Chip';
+import { TooltipProps as TooltipProps$1 } from '@mui/material/Tooltip';
+import { TabProps as TabProps$1 } from '@mui/material/Tab';
+import { PaginationProps as PaginationProps$1 } from '@mui/material/Pagination';
+import { DrawerProps as DrawerProps$1 } from '@mui/material/Drawer';
+import { CardProps as CardProps$1 } from '@mui/material/Card';
+import { CardContentProps } from '@mui/material/CardContent';
+import { CardHeaderProps } from '@mui/material/CardHeader';
+import { CardActionsProps } from '@mui/material/CardActions';
+import { AvatarProps as AvatarProps$1 } from '@mui/material/Avatar';
+import { BreadcrumbsProps as BreadcrumbsProps$1 } from '@mui/material/Breadcrumbs';
+import { PaperProps as PaperProps$1 } from '@mui/material/Paper';
+import { DividerProps as DividerProps$1 } from '@mui/material/Divider';
+import { LinkProps as LinkProps$1 } from '@mui/material/Link';
+import { AlertProps as AlertProps$1 } from '@mui/material/Alert';
+import { SnackbarProps as SnackbarProps$1 } from '@mui/material/Snackbar';
+import { ReactFlowProps, Node, Edge, OnNodesChange, OnEdgesChange, NodeTypes, EdgeTypes, BackgroundVariant, ReactFlowInstance } from 'reactflow';
+export { Background, BackgroundVariant, ConnectionLineType, Controls, Edge, EdgeTypes, MiniMap, Node, NodeTypes, OnEdgesChange, OnNodesChange, Panel, ReactFlowInstance } from 'reactflow';
+import { Monaco } from '@monaco-editor/react';
+import { editor } from 'monaco-editor';
+export { default as RadioGroup } from '@mui/material/RadioGroup';
+
+declare const colors: {
+    primary: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    secondary: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    success: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    error: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    warning: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    tertiary: {
+        main: string;
+        light: string;
+        dark: string;
+        contrastText: string;
+    };
+    grey: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+    background: {
+        default: string;
+        paper: string;
+        selected: string;
+    };
+};
+declare const theme: Theme;
+
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+interface ButtonProps extends Omit<ButtonProps$1, 'variant' | 'color'> {
+    variant?: ButtonVariant;
+    size?: 'small' | 'medium' | 'large';
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+}
+declare const Button: React.FC<ButtonProps>;
+
+interface IconButtonProps extends IconButtonProps$1 {
+    variant?: 'default' | 'primary' | 'secondary';
+}
+declare const IconButton: React.FC<IconButtonProps>;
+
+interface LoadingButtonProps extends LoadingButtonProps$1 {
+    /**
+     * If `true`, the button will show a loading indicator
+     */
+    loading?: boolean;
+    /**
+     * The loading indicator can be positioned inside the button or in the center
+     */
+    loadingPosition?: 'start' | 'end' | 'center';
+}
+/**
+ * LoadingButton component - Button with loading state from MUI Lab
+ *
+ * @example
+ * ```tsx
+ * <LoadingButton
+ *   variant="contained"
+ *   loading={isLoading}
+ *   onClick={handleSubmit}
+ * >
+ *   Submit
+ * </LoadingButton>
+ * ```
+ */
+declare const LoadingButton: React.FC<LoadingButtonProps>;
+
+interface ButtonGroupProps extends ButtonGroupProps$1 {
+    /**
+     * The content of the button group
+     */
+    children?: React.ReactNode;
+    /**
+     * If `true`, the buttons will be disabled
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the button group will take full width
+     */
+    fullWidth?: boolean;
+    /**
+     * The orientation of the button group
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The size of the buttons
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The variant to use
+     * @default 'outlined'
+     */
+    variant?: 'text' | 'outlined' | 'contained';
+}
+/**
+ * ButtonGroup component - groups related buttons together
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup variant="contained">
+ *   <Button>One</Button>
+ *   <Button>Two</Button>
+ *   <Button>Three</Button>
+ * </ButtonGroup>
+ * ```
+ */
+declare const ButtonGroup: React.FC<ButtonGroupProps>;
+
+type TextFieldSize = 'small' | 'medium';
+interface TextFieldProps extends Omit<TextFieldProps$1, 'size'> {
+    size?: TextFieldSize;
+}
+declare const TextField: React.FC<TextFieldProps>;
+
+interface SearchFieldProps extends Omit<TextFieldProps, 'InputProps'> {
+    placeholder?: string;
+    onSearch?: (value: string) => void;
+}
+declare const SearchField: React.FC<SearchFieldProps>;
+
+type DropdownSize = 'small' | 'medium' | 'large';
+interface DropdownOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+interface DropdownProps extends Omit<SelectProps, 'size'> {
+    label?: string;
+    options: DropdownOption[];
+    size?: DropdownSize;
+    placeholder?: string;
+}
+declare const Dropdown: React.FC<DropdownProps>;
+
+interface ToggleButtonProps extends ToggleButtonProps$1 {
+}
+declare const ToggleButton: React.FC<ToggleButtonProps>;
+interface ToggleButtonGroupProps extends ToggleButtonGroupProps$1 {
+}
+declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
+
+interface SwitchProps extends Omit<SwitchProps$1, 'color'> {
+    label?: string;
+    labelPosition?: 'left' | 'right';
+}
+declare const Switch: React.FC<SwitchProps>;
+
+interface CheckboxProps extends Omit<CheckboxProps$1, 'color'> {
+    label?: string;
+    labelPosition?: 'left' | 'right';
+}
+declare const Checkbox: React.FC<CheckboxProps>;
+
+interface RadioProps extends Omit<RadioProps$1, 'color'> {
+    label?: string;
+    labelPosition?: 'left' | 'right';
+}
+declare const Radio: React.FC<RadioProps>;
+
+interface SidebarItemProps {
+    label: string;
+    icon?: React.ReactNode;
+    selected?: boolean;
+    onClick?: () => void;
+    size?: 'small' | 'medium' | 'large';
+    endIcon?: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const SidebarItem: React.FC<SidebarItemProps>;
+
+interface SidebarProps {
+    open?: boolean;
+    width?: number;
+    items: SidebarItemProps[];
+    onClose?: () => void;
+    variant?: 'permanent' | 'persistent' | 'temporary';
+}
+declare const Sidebar: React.FC<SidebarProps>;
+
+interface Service {
+    id: string;
+    name: string;
+    description?: string;
+    type?: string;
+    lastAccessed?: string;
+    memberCount?: number;
+    favorited?: boolean;
+    isPersonal?: boolean;
+    avatar?: string;
+    archived?: boolean;
+}
+interface ServiceSelectorButtonProps {
+    /**
+     * List of services to display
+     */
+    services: Service[];
+    /**
+     * Currently selected service ID
+     */
+    selectedServiceId: string | null;
+    /**
+     * Loading state
+     */
+    loading?: boolean;
+    /**
+     * Compact mode for mobile or mini-sidebar
+     */
+    compact?: boolean;
+    /**
+     * Callback when service is selected
+     */
+    onSelectService?: (serviceId: string) => void;
+    /**
+     * Callback when service name is clicked (for navigation)
+     */
+    onServiceClick?: (serviceId: string) => void;
+    /**
+     * Callback when "Create Service" is clicked
+     */
+    onCreateService?: () => void;
+    /**
+     * Callback after service is created
+     */
+    onServiceCreated?: () => void;
+    /**
+     * Whether user is a manager for the selected service
+     */
+    isManager?: boolean;
+    /**
+     * Custom styles
+     */
+    sx?: any;
+    /**
+     * Panel width
+     * @default 350
+     */
+    panelWidth?: number;
+}
+declare const ServiceSelectorButton: React.FC<ServiceSelectorButtonProps>;
+
+interface Workspace {
+    id: string;
+    name: string;
+    description?: string;
+}
+interface WorkspaceSelectorButtonProps {
+    /**
+     * List of workspaces to display
+     */
+    workspaces: Workspace[];
+    /**
+     * Currently selected workspace ID
+     */
+    selectedWorkspaceId: string | null;
+    /**
+     * Loading state
+     */
+    loading?: boolean;
+    /**
+     * Callback when workspace is selected
+     */
+    onSelectWorkspace?: (workspaceId: string) => void;
+    /**
+     * Callback when workspace name is clicked (for navigation)
+     */
+    onWorkspaceClick?: (workspaceId: string) => void;
+    /**
+     * Callback when "Create Workspace" is clicked
+     */
+    onCreateWorkspace?: () => void;
+    /**
+     * Custom styles
+     */
+    sx?: any;
+    /**
+     * Panel width
+     * @default 350
+     */
+    panelWidth?: number;
+}
+declare const WorkspaceSelectorButton: React.FC<WorkspaceSelectorButtonProps>;
+
+interface StepperProps extends StepperProps$1 {
+}
+/**
+ * Stepper component - displays progress through a sequence of steps
+ *
+ * @example
+ * ```tsx
+ * <Stepper activeStep={activeStep}>
+ *   <Step>
+ *     <StepLabel>Step 1</StepLabel>
+ *   </Step>
+ *   <Step>
+ *     <StepLabel>Step 2</StepLabel>
+ *   </Step>
+ * </Stepper>
+ * ```
+ */
+declare const Stepper: React.FC<StepperProps>;
+interface StepProps extends StepProps$1 {
+}
+/**
+ * Step component - represents a single step in a Stepper
+ */
+declare const Step: React.FC<StepProps>;
+interface StepLabelProps extends StepLabelProps$1 {
+}
+/**
+ * StepLabel component - label for a Step
+ */
+declare const StepLabel: React.FC<StepLabelProps>;
+interface StepContentProps extends StepContentProps$1 {
+}
+/**
+ * StepContent component - optional content that appears below a StepLabel
+ */
+declare const StepContent: React.FC<StepContentProps>;
+interface StepButtonProps extends StepButtonProps$1 {
+}
+/**
+ * StepButton component - makes a Step clickable
+ */
+declare const StepButton: React.FC<StepButtonProps>;
+
+type BadgeVariant = 'default' | 'primary' | 'success' | 'error';
+interface BadgeProps extends Omit<BadgeProps$1, 'color' | 'variant'> {
+    variant?: BadgeVariant;
+    children?: React.ReactNode;
+}
+declare const Badge: React.FC<BadgeProps>;
+
+type ChipVariant = 'default' | 'active';
+interface ChipProps extends Omit<ChipProps$1, 'color' | 'variant'> {
+    variant?: ChipVariant;
+}
+declare const Chip: React.FC<ChipProps>;
+
+interface TooltipProps extends TooltipProps$1 {
+}
+declare const Tooltip: React.FC<TooltipProps>;
+
+type ProgressVariant = 'linear' | 'circular';
+interface ProgressProps {
+    variant?: ProgressVariant;
+    value?: number;
+    size?: number;
+    thickness?: number;
+}
+declare const Progress: React.FC<ProgressProps>;
+
+interface TabProps extends Omit<TabProps$1, 'icon'> {
+    badge?: number | string;
+    badgeVariant?: 'default' | 'primary' | 'success' | 'error';
+}
+declare const Tab: React.FC<TabProps>;
+
+interface MenuProps extends Omit<MenuProps$1, 'open'> {
+    anchorEl?: HTMLElement | null;
+    onClose: () => void;
+}
+declare const Menu: React.FC<MenuProps>;
+interface MenuItemProps {
+    icon?: React.ReactNode;
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    divider?: boolean;
+}
+declare const MenuItem: React.FC<MenuItemProps>;
+
+interface PaginationProps extends Omit<PaginationProps$1, 'color'> {
+    color?: 'primary' | 'secondary' | 'standard';
+}
+declare const Pagination: React.FC<PaginationProps>;
+
+interface SelectorOption {
+    id: string;
+    name: string;
+    description?: string;
+    avatar?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+interface SelectorProps {
+    options: SelectorOption[];
+    selectedId: string | null;
+    onSelect: (id: string) => void;
+    onCreate?: () => void;
+    loading?: boolean;
+    placeholder?: string;
+    emptyMessage?: string;
+    compact?: boolean;
+    renderSelected?: (option: SelectorOption) => React.ReactNode;
+    width?: number;
+}
+declare const Selector: React.FC<SelectorProps>;
+
+interface DialogProps extends Omit<DialogProps$1, 'title'> {
+    open: boolean;
+    title: ReactNode;
+    onClose: () => void;
+    onSubmit?: () => void;
+    submitLabel?: string;
+    cancelLabel?: string;
+    isLoading?: boolean;
+    disableSubmit?: boolean;
+    showActions?: boolean;
+    headerAction?: ReactNode;
+    fullWidth?: boolean;
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    children: ReactNode;
+    dividers?: boolean;
+    confirmBeforeClose?: boolean;
+}
+declare const Dialog: React.FC<DialogProps>;
+
+interface DrawerProps extends DrawerProps$1 {
+    /**
+     * Width of the drawer when open
+     * @default 240
+     */
+    width?: number;
+    /**
+     * Width of the drawer when collapsed (mini variant)
+     * @default 72
+     */
+    miniWidth?: number;
+    /**
+     * Whether the drawer is in collapsed/mini state
+     * @default false
+     */
+    collapsed?: boolean;
+}
+/**
+ * Drawer component for navigation drawers and side panels
+ *
+ * @example
+ * ```tsx
+ * <Drawer open={true} variant="permanent" width={240}>
+ *   <List>
+ *     <ListItem>Item 1</ListItem>
+ *   </List>
+ * </Drawer>
+ * ```
+ */
+declare const Drawer: React.FC<DrawerProps>;
+
+interface CardProps extends CardProps$1 {
+    hoverable?: boolean;
+    clickable?: boolean;
+}
+declare const Card: React.FC<CardProps>;
+declare const CardContent: React.FC<CardContentProps>;
+declare const CardHeader: React.FC<CardHeaderProps>;
+declare const CardActions: React.FC<CardActionsProps>;
+
+interface ListProps extends ListProps$1 {
+}
+declare const List: React.FC<ListProps>;
+interface ListItemProps extends ListItemProps$1 {
+    primary?: React.ReactNode;
+    secondary?: React.ReactNode;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+    hoverable?: boolean;
+}
+declare const ListItem: React.FC<ListItemProps>;
+
+interface AvatarProps extends AvatarProps$1 {
+    size?: 'small' | 'medium' | 'large' | number;
+}
+declare const Avatar: React.FC<AvatarProps>;
+
+interface TableProps extends TableProps$1 {
+    stickyHeader?: boolean;
+}
+declare const Table: React.FC<TableProps>;
+interface TableHeaderProps {
+    columns: Array<{
+        id: string;
+        label: string;
+        sortable?: boolean;
+        align?: 'left' | 'center' | 'right';
+    }>;
+    orderBy?: string;
+    order?: 'asc' | 'desc';
+    onSort?: (columnId: string) => void;
+}
+declare const TableHeader: React.FC<TableHeaderProps>;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+interface BreadcrumbsProps extends Omit<BreadcrumbsProps$1, 'children'> {
+    items: BreadcrumbItem[];
+}
+declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+
+interface AccordionProps extends Omit<AccordionProps$1, 'children'> {
+    title: string;
+    children: NonNullable<React.ReactNode>;
+    defaultExpanded?: boolean;
+}
+declare const Accordion: React.FC<AccordionProps>;
+
+interface PaperProps extends PaperProps$1 {
+    variant?: 'elevation' | 'outlined';
+}
+declare const Paper: React.FC<PaperProps>;
+
+interface DividerProps extends DividerProps$1 {
+    variant?: 'fullWidth' | 'inset' | 'middle';
+}
+declare const Divider: React.FC<DividerProps>;
+
+interface LinkProps extends LinkProps$1 {
+    underline?: 'none' | 'hover' | 'always';
+}
+declare const Link: React.FC<LinkProps>;
+
+interface AppBarProps extends AppBarProps$1 {
+    height?: number;
+}
+declare const AppBar: React.FC<AppBarProps>;
+
+interface CollapseProps extends CollapseProps$1 {
+    /**
+     * If `true`, the component will transition in
+     */
+    in?: boolean;
+    /**
+     * The content to collapse
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Collapse component - provides a collapse animation
+ *
+ * @example
+ * ```tsx
+ * <Collapse in={open}>
+ *   <Box>Collapsible content</Box>
+ * </Collapse>
+ * ```
+ */
+declare const Collapse: React.FC<CollapseProps>;
+
+type AlertSeverity = 'success' | 'error' | 'warning' | 'info';
+interface AlertProps extends Omit<AlertProps$1, 'severity'> {
+    severity?: AlertSeverity;
+    /**
+     * Title to display above the alert message
+     */
+    title?: string;
+}
+declare const Alert: React.FC<AlertProps>;
+
+interface SnackbarProps extends Omit<SnackbarProps$1, 'children'> {
+    /**
+     * Message to display in the snackbar
+     */
+    message?: string;
+    /**
+     * Severity of the alert inside snackbar
+     */
+    severity?: AlertSeverity;
+    /**
+     * Title to display in the alert (optional)
+     */
+    title?: string;
+    /**
+     * Alert variant
+     * @default 'filled'
+     */
+    variant?: 'filled' | 'standard' | 'outlined';
+    /**
+     * Callback when snackbar is closed
+     */
+    onClose?: () => void;
+    /**
+     * Children to render instead of message (allows custom content)
+     * Must be a ReactElement to match MuiSnackbar requirements
+     */
+    children?: React.ReactElement;
+}
+declare const Snackbar: React.FC<SnackbarProps>;
+
+interface EmptyStateProps {
+    title?: string;
+    description?: string;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+}
+declare const EmptyState: React.FC<EmptyStateProps>;
+
+interface LoadingProps {
+    message?: string;
+    size?: number;
+    fullScreen?: boolean;
+}
+declare const Loading: React.FC<LoadingProps>;
+
+interface AppLoadingProps {
+    /**
+     * Loading message to display
+     * @default "Loading..."
+     */
+    message?: string;
+    /**
+     * Logo source URL or path
+     * @default "/icons/logo.png"
+     */
+    logo?: string;
+    /**
+     * Custom styles
+     */
+    sx?: any;
+}
+/**
+ * AppLoading component - Full-screen loading indicator with logo
+ *
+ * @example
+ * ```tsx
+ * <AppLoading message="Initializing application..." />
+ * ```
+ */
+declare const AppLoading: React.FC<AppLoadingProps>;
+
+interface CircularProgressProps extends CircularProgressProps$1 {
+    /**
+     * Size of the progress indicator
+     * @default 40
+     */
+    size?: number | string;
+    /**
+     * Thickness of the progress indicator
+     * @default 4
+     */
+    thickness?: number;
+}
+/**
+ * CircularProgress component - wrapper around MUI CircularProgress
+ *
+ * @example
+ * ```tsx
+ * <CircularProgress size={40} thickness={4} />
+ * ```
+ */
+declare const CircularProgress: React.FC<CircularProgressProps>;
+
+interface FlowEditorProps extends Omit<ReactFlowProps, 'nodes' | 'edges'> {
+    /**
+     * Nodes to display in the flow
+     */
+    nodes: Node[];
+    /**
+     * Edges to display in the flow
+     */
+    edges: Edge[];
+    /**
+     * Callback when nodes change
+     */
+    onNodesChange?: OnNodesChange;
+    /**
+     * Callback when edges change
+     */
+    onEdgesChange?: OnEdgesChange;
+    /**
+     * Custom node types
+     */
+    nodeTypes?: NodeTypes;
+    /**
+     * Custom edge types
+     */
+    edgeTypes?: EdgeTypes;
+    /**
+     * Height of the flow editor
+     * @default '600px'
+     */
+    height?: string | number;
+    /**
+     * Show background grid
+     * @default true
+     */
+    showBackground?: boolean;
+    /**
+     * Background variant
+     * @default 'dots'
+     */
+    backgroundVariant?: BackgroundVariant;
+    /**
+     * Show controls
+     * @default true
+     */
+    showControls?: boolean;
+    /**
+     * Show minimap
+     * @default false
+     */
+    showMinimap?: boolean;
+    /**
+     * Container props
+     */
+    containerProps?: BoxProps;
+    /**
+     * Callback when flow instance is initialized
+     */
+    onInit?: (instance: ReactFlowInstance) => void;
+}
+/**
+ * FlowEditor component - wrapper around ReactFlow with theme integration
+ *
+ * @example
+ * ```tsx
+ * <FlowEditor
+ *   nodes={nodes}
+ *   edges={edges}
+ *   onNodesChange={onNodesChange}
+ *   onEdgesChange={onEdgesChange}
+ *   height="500px"
+ *   showBackground
+ *   showControls
+ * />
+ * ```
+ */
+declare const FlowEditor: React.FC<FlowEditorProps>;
+
+type CodeEditorLanguage = 'typescript' | 'javascript' | 'json' | 'html' | 'css' | 'python' | 'yaml' | 'markdown' | 'sql' | 'xml' | 'plaintext';
+interface CodeEditorProps {
+    /**
+     * Current value of the editor
+     */
+    value: string;
+    /**
+     * Callback when value changes
+     */
+    onChange: (value: string) => void;
+    /**
+     * Programming language
+     * @default 'typescript'
+     */
+    language?: CodeEditorLanguage;
+    /**
+     * Height of the editor
+     * @default '400px'
+     */
+    height?: string | number;
+    /**
+     * Minimum height
+     */
+    minHeight?: string | number;
+    /**
+     * Theme ('light' | 'dark' | 'vs-dark' | 'hc-black')
+     * If not provided, will use theme from design system
+     */
+    theme?: string;
+    /**
+     * Show line numbers
+     * @default 'on'
+     */
+    lineNumbers?: 'on' | 'off' | 'relative' | 'interval';
+    /**
+     * Editor options (monaco editor options)
+     */
+    options?: editor.IStandaloneEditorConstructionOptions;
+    /**
+     * Callback when editor is mounted
+     */
+    onMount?: (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
+    /**
+     * Callback for validation errors
+     */
+    onValidate?: (markers: editor.IMarker[]) => void;
+    /**
+     * Ref to editor instance
+     */
+    editorRef?: React.MutableRefObject<editor.IStandaloneCodeEditor | null>;
+    /**
+     * Ref to Monaco instance
+     */
+    monacoRef?: React.MutableRefObject<Monaco | null>;
+    /**
+     * Callback when fullscreen state changes
+     */
+    onFullscreenChange?: (isFullscreen: boolean) => void;
+    /**
+     * Props for the container Box.
+     */
+    containerProps?: BoxProps;
+    /**
+     * Additional TypeScript type definitions to add to the editor context.
+     * Can be a string with type definitions or an array of type definition strings.
+     * Each string will be added as a separate extra lib to Monaco.
+     *
+     * @example
+     * ```tsx
+     * <CodeEditor
+     *   value={code}
+     *   onChange={setCode}
+     *   typeDefinitions={`
+     *     declare interface MyCustomType {
+     *       id: string;
+     *       name: string;
+     *     }
+     *   `}
+     * />
+     * ```
+     */
+    typeDefinitions?: string | string[];
+}
+/**
+ * CodeEditor component - wrapper around Monaco Editor matching dynamic-indexer-client implementation
+ *
+ * @example
+ * ```tsx
+ * <CodeEditor
+ *   value={code}
+ *   onChange={setCode}
+ *   language="typescript"
+ *   height="500px"
+ *   onValidate={(markers) => console.log('Errors:', markers)}
+ * />
+ * ```
+ */
+declare const CodeEditor: React.FC<CodeEditorProps>;
+
+export { Accordion, type AccordionProps, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, AppLoading, type AppLoadingProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, CardActions, CardContent, CardHeader, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, CodeEditor, type CodeEditorLanguage, type CodeEditorProps, Collapse, type CollapseProps, Dialog, type DialogProps, Divider, type DividerProps, Drawer, type DrawerProps, Dropdown, type DropdownProps, EmptyState, type EmptyStateProps, FlowEditor, type FlowEditorProps, IconButton, type IconButtonProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, Pagination, type PaginationProps, Paper, type PaperProps, Progress, type ProgressProps, Radio, type RadioProps, SearchField, type SearchFieldProps, Selector, type SelectorOption, type SelectorProps, type Service, ServiceSelectorButton, type ServiceSelectorButtonProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Snackbar, type SnackbarProps, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, Switch, type SwitchProps, Tab, type TabProps, Table, TableHeader, type TableHeaderProps, type TableProps, TextField, type TextFieldProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, type Workspace, WorkspaceSelectorButton, type WorkspaceSelectorButtonProps, colors, theme };