@object-ui/components 0.3.0

package/src/renderers/navigation/sidebar.tsx

@@ -0,0 +1,189 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { SidebarSchema } from '@object-ui/types';
+import { renderChildren } from '../../lib/utils';
+import {
+  SidebarProvider,
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarFooter,
+  SidebarTrigger,
+  SidebarInset
+} from '../../ui';
+
+ComponentRegistry.register('sidebar-provider', 
+  ({ schema, ...props }) => (
+    <SidebarProvider {...props}>{renderChildren(schema.body)}</SidebarProvider>
+  ),
+  {
+    label: 'Sidebar Provider',
+    inputs: [
+      { name: 'defaultOpen', type: 'boolean', label: 'Default Open', defaultValue: true }
+    ],
+    defaultProps: {
+      defaultOpen: true
+    },
+    defaultChildren: [
+      { type: 'sidebar' },
+      { type: 'sidebar-inset' }
+    ]
+  }
+);
+
+ComponentRegistry.register('sidebar', 
+  ({ schema, ...props }: { schema: SidebarSchema; [key: string]: any }) => (
+    <Sidebar {...props}>{renderChildren(schema.body)}</Sidebar>
+  ),
+  {
+    label: 'Sidebar',
+    inputs: [
+      { name: 'collapsible', type: 'enum', enum: ['offcanvas', 'icon', 'none'], defaultValue: 'icon', label: 'Collapsible' },
+      { name: 'side', type: 'enum', enum: ['left', 'right'], defaultValue: 'left', label: 'Side' },
+      { name: 'variant', type: 'enum', enum: ['sidebar', 'floating', 'inset'], defaultValue: 'sidebar', label: 'Variant' }
+    ],
+    defaultProps: {
+      collapsible: 'icon',
+      side: 'left',
+      variant: 'sidebar'
+    },
+    defaultChildren: [
+      { type: 'sidebar-header' },
+      { type: 'sidebar-content' },
+      { type: 'sidebar-footer' }
+    ]
+  }
+);
+
+ComponentRegistry.register('sidebar-header', 
+  ({ schema, ...props }) => (
+    <SidebarHeader {...props}>{renderChildren(schema.body)}</SidebarHeader>
+  ),
+  { 
+    label: 'Sidebar Header',
+    defaultChildren: [
+      { type: 'text', content: 'Sidebar Header' }
+    ]
+  }
+);
+
+ComponentRegistry.register('sidebar-content', 
+  ({ schema, ...props }) => (
+    <SidebarContent {...props}>{renderChildren(schema.body)}</SidebarContent>
+  ),
+  { 
+    label: 'Sidebar Content',
+    defaultChildren: [
+      { type: 'sidebar-group' }
+    ]
+  }
+);
+
+ComponentRegistry.register('sidebar-group', 
+  ({ schema, ...props }) => (
+    <SidebarGroup {...props}>
+      {schema.label && <SidebarGroupLabel>{schema.label}</SidebarGroupLabel>}
+      <SidebarGroupContent>
+        {renderChildren(schema.body)}
+      </SidebarGroupContent>
+    </SidebarGroup>
+  ),
+  {
+    label: 'Sidebar Group',
+    inputs: [
+      { name: 'label', type: 'string', label: 'Label' }
+    ],
+    defaultProps: {
+      label: 'Menu'
+    },
+    defaultChildren: [
+      { type: 'sidebar-menu' }
+    ]
+  }
+);
+
+ComponentRegistry.register('sidebar-menu', 
+  ({ schema, ...props }) => (
+    <SidebarMenu {...props}>{renderChildren(schema.body)}</SidebarMenu>
+  ),
+  { 
+    label: 'Sidebar Menu',
+    defaultChildren: [
+      { type: 'sidebar-menu-item' },
+      { type: 'sidebar-menu-item' }
+    ]
+  }
+);
+
+ComponentRegistry.register('sidebar-menu-item', 
+  ({ schema, ...props }) => (
+    <SidebarMenuItem {...props}>{renderChildren(schema.body)}</SidebarMenuItem>
+  ),
+  { 
+    label: 'Sidebar Menu Item',
+    defaultChildren: [
+      { type: 'sidebar-menu-button' }
+    ]
+  }
+);
+
+ComponentRegistry.register('sidebar-menu-button', 
+  ({ schema, ...props }) => (
+    <SidebarMenuButton isActive={schema.active} {...props}>
+      {renderChildren(schema.body)}
+    </SidebarMenuButton>
+  ),
+  {
+    label: 'Sidebar Menu Button',
+    inputs: [
+      { name: 'active', type: 'boolean', label: 'Active', defaultValue: false },
+      { name: 'size', type: 'enum', enum: ['default', 'sm', 'lg'], defaultValue: 'default', label: 'Size' },
+      { name: 'tooltip', type: 'string', label: 'Tooltip' }
+    ],
+    defaultProps: {
+      size: 'default'
+    },
+    defaultChildren: [
+      { type: 'text', content: 'Menu Item' }
+    ]
+  }
+);
+
+ComponentRegistry.register('sidebar-footer', 
+  ({ schema, ...props }) => (
+    <SidebarFooter {...props}>{renderChildren(schema.body)}</SidebarFooter>
+  ),
+  { 
+    label: 'Sidebar Footer',
+    defaultChildren: [
+      { type: 'text', content: 'Footer' }
+    ]
+  }
+);
+
+ComponentRegistry.register('sidebar-inset', 
+  ({ schema, ...props }) => (
+    <SidebarInset {...props}>{renderChildren(schema.body)}</SidebarInset>
+  ),
+  { 
+    label: 'Sidebar Inset',
+    defaultChildren: [
+      { type: 'div', className: 'p-4', body: [{ type: 'text', content: 'Main content area' }] }
+    ]
+  }
+);
+
+ComponentRegistry.register('sidebar-trigger', 
+  ({ className, ...props }) => (
+    <SidebarTrigger className={className} {...props} />
+  ),
+  {
+    label: 'Sidebar Trigger',
+    inputs: [{ name: 'className', type: 'string', label: 'CSS Class' }]
+  }
+);

package/src/renderers/overlay/alert-dialog.tsx

@@ -0,0 +1,63 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { AlertDialogSchema } from '@object-ui/types';
+import { 
+  AlertDialog, 
+  AlertDialogTrigger, 
+  AlertDialogContent, 
+  AlertDialogHeader, 
+  AlertDialogFooter, 
+  AlertDialogTitle, 
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel
+} from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+ComponentRegistry.register('alert-dialog', 
+  ({ schema, className, ...props }: { schema: AlertDialogSchema; className?: string; [key: string]: any }) => (
+    <AlertDialog defaultOpen={schema.defaultOpen} {...props}>
+      <AlertDialogTrigger asChild>
+        {renderChildren(schema.trigger)}
+      </AlertDialogTrigger>
+      <AlertDialogContent className={className}>
+        <AlertDialogHeader>
+          {schema.title && <AlertDialogTitle>{schema.title}</AlertDialogTitle>}
+          {schema.description && <AlertDialogDescription>{schema.description}</AlertDialogDescription>}
+        </AlertDialogHeader>
+        {renderChildren(schema.content)}
+        <AlertDialogFooter>
+          {schema.cancelText && <AlertDialogCancel>{schema.cancelText}</AlertDialogCancel>}
+          {schema.actionText && <AlertDialogAction onClick={schema.onAction}>{schema.actionText}</AlertDialogAction>}
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+  {
+    label: 'Alert Dialog',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title' },
+      { name: 'description', type: 'string', label: 'Description' },
+      { name: 'cancelText', type: 'string', label: 'Cancel Text', defaultValue: 'Cancel' },
+      { name: 'actionText', type: 'string', label: 'Action Text', defaultValue: 'Continue' },
+       { name: 'defaultOpen', type: 'boolean', label: 'Default Open' },
+      { 
+        name: 'trigger', 
+        type: 'slot', 
+        label: 'Trigger'
+      },
+       { 
+        name: 'content', 
+        type: 'slot', 
+        label: 'Content/Body'
+      },
+      { name: 'className', type: 'string', label: 'Content CSS Class' }
+    ],
+    defaultProps: {
+      title: 'Are you sure?',
+      description: 'This action cannot be undone.',
+      cancelText: 'Cancel',
+      actionText: 'Continue',
+      trigger: [{ type: 'button', label: 'Open Alert', variant: 'destructive' }]
+    }
+  }
+);

package/src/renderers/overlay/context-menu.tsx

@@ -0,0 +1,91 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { ContextMenuSchema } from '@object-ui/types';
+import { 
+  ContextMenu, 
+  ContextMenuTrigger, 
+  ContextMenuContent, 
+  ContextMenuItem, 
+  ContextMenuLabel, 
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+  ContextMenuShortcut
+} from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+// Reuse helper for recursive menu items if I could share it, but for now duplicate concise logic
+const renderContextMenuItems = (items: any[]) => {
+  if (!items) return null;
+  return items.map((item: any, i: number) => {
+    if (item.type === 'separator') return <ContextMenuSeparator key={i} />;
+    if (item.type === 'label') return <ContextMenuLabel key={i}>{item.label}</ContextMenuLabel>;
+    if (item.children) {
+        return (
+            <ContextMenuSub key={i}>
+                <ContextMenuSubTrigger inset={item.inset}>
+                    {item.label}
+                </ContextMenuSubTrigger>
+                <ContextMenuSubContent>
+                    {renderContextMenuItems(item.children)}
+                </ContextMenuSubContent>
+            </ContextMenuSub>
+        )
+    }
+    
+    return (
+      <ContextMenuItem key={i} disabled={item.disabled} inset={item.inset} onSelect={item.onSelect}>
+        {item.label}
+        {item.shortcut && <ContextMenuShortcut>{item.shortcut}</ContextMenuShortcut>}
+      </ContextMenuItem>
+    );
+  });
+};
+
+ComponentRegistry.register('context-menu', 
+  ({ schema, className, ...props }: { schema: ContextMenuSchema; className?: string; [key: string]: any }) => {
+    // Determine classes
+    const triggerClass = schema.triggerClassName || className || (schema.className as string) || "h-[150px] w-[300px] border border-dashed text-sm flex items-center justify-center";
+    const contentClass = schema.contentClassName;
+
+    return (
+    <ContextMenu modal={schema.modal} {...props}>
+      <ContextMenuTrigger asChild>
+          {/* Usually a Right Click area */}
+          <div className={triggerClass}>
+             {renderChildren(schema.trigger || { type: 'text', value: "Right click here" })}
+          </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent className={contentClass}>
+         {renderContextMenuItems(schema.items)}
+      </ContextMenuContent>
+    </ContextMenu>
+  )},
+  {
+    label: 'Context Menu',
+    inputs: [
+      { 
+        name: 'trigger', 
+        type: 'slot', 
+        label: 'Trigger Area',
+      },
+      { name: 'triggerClassName', type: 'string', label: 'Trigger Area Class' },
+      { 
+        name: 'items', 
+        type: 'array', 
+        label: 'Items',
+        description: 'Recursive structure: { type?: "separator"|"label", label, shortcut, children }'
+      },
+      { name: 'className', type: 'string', label: 'Content CSS Class' }
+    ],
+    defaultProps: {
+      items: [
+        { label: 'Action 1' },
+        { label: 'Action 2' },
+        { type: 'separator' },
+        { label: 'Action 3' }
+      ],
+      trigger: [{ type: 'text', content: 'Right click here' }]
+    }
+  }
+);

package/src/renderers/overlay/dialog.tsx

@@ -0,0 +1,68 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { DialogSchema } from '@object-ui/types';
+import { 
+  Dialog, 
+  DialogTrigger, 
+  DialogContent, 
+  DialogHeader, 
+  DialogFooter, 
+  DialogTitle, 
+  DialogDescription
+} from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+ComponentRegistry.register('dialog', 
+  ({ schema, className, ...props }: { schema: DialogSchema; className?: string; [key: string]: any }) => (
+    <Dialog modal={schema.modal} defaultOpen={schema.defaultOpen} {...props}>
+      <DialogTrigger asChild>
+        {renderChildren(schema.trigger)}
+      </DialogTrigger>
+      <DialogContent className={className}>
+        <DialogHeader>
+          {schema.title && <DialogTitle>{schema.title}</DialogTitle>}
+          {schema.description && <DialogDescription>{schema.description}</DialogDescription>}
+        </DialogHeader>
+        {renderChildren(schema.content)}
+        {schema.footer && (
+          <DialogFooter>
+            {renderChildren(schema.footer)}
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  ),
+  {
+    label: 'Dialog',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title' },
+      { name: 'description', type: 'string', label: 'Description' },
+      { name: 'modal', type: 'boolean', label: 'Modal', defaultValue: true },
+      { name: 'defaultOpen', type: 'boolean', label: 'Default Open' },
+      { 
+        name: 'trigger', 
+        type: 'slot', 
+        label: 'Trigger',
+        description: 'Element that opens the dialog' 
+      },
+      { 
+        name: 'content', 
+        type: 'slot', 
+        label: 'Content', 
+        description: 'Main content of the dialog' 
+      },
+      { 
+        name: 'footer', 
+        type: 'slot', 
+        label: 'Footer' 
+      },
+      { name: 'className', type: 'string', label: 'Content CSS Class' }
+    ],
+    defaultProps: {
+      title: 'Dialog Title',
+      description: 'Dialog description goes here',
+      modal: true,
+      trigger: [{ type: 'button', label: 'Open Dialog' }],
+      content: [{ type: 'text', content: 'Dialog content goes here' }]
+    }
+  }
+);

package/src/renderers/overlay/drawer.tsx

@@ -0,0 +1,68 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { DrawerSchema } from '@object-ui/types';
+import { 
+  Drawer, 
+  DrawerTrigger, 
+  DrawerContent, 
+  DrawerHeader, 
+  DrawerFooter, 
+  DrawerTitle, 
+  DrawerDescription,
+  DrawerClose
+} from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+ComponentRegistry.register('drawer', 
+  ({ schema, className, ...props }: { schema: DrawerSchema; className?: string; [key: string]: any }) => (
+    <Drawer shouldScaleBackground={schema.shouldScaleBackground} defaultOpen={schema.defaultOpen} {...props}>
+      <DrawerTrigger asChild>
+        {renderChildren(schema.trigger)}
+      </DrawerTrigger>
+      <DrawerContent className={className}>
+        <DrawerHeader>
+          {schema.title && <DrawerTitle>{schema.title}</DrawerTitle>}
+          {schema.description && <DrawerDescription>{schema.description}</DrawerDescription>}
+        </DrawerHeader>
+        {renderChildren(schema.content)}
+        {schema.footer && (
+          <DrawerFooter>
+             {renderChildren(schema.footer)}
+             {schema.showClose && <DrawerClose asChild><button>Close</button></DrawerClose>} 
+          </DrawerFooter>
+        )}
+      </DrawerContent>
+    </Drawer>
+  ),
+  {
+    label: 'Drawer',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title' },
+      { name: 'description', type: 'string', label: 'Description' },
+       { name: 'shouldScaleBackground', type: 'boolean', label: 'Scale Background' },
+        { name: 'defaultOpen', type: 'boolean', label: 'Default Open' },
+       { name: 'showClose', type: 'boolean', label: 'Show Close Button in Footer' },
+      { 
+        name: 'trigger', 
+        type: 'slot', 
+        label: 'Trigger' 
+      },
+      { 
+        name: 'content', 
+        type: 'slot', 
+        label: 'Content' 
+      },
+       { 
+        name: 'footer', 
+        type: 'slot', 
+        label: 'Footer' 
+      },
+      { name: 'className', type: 'string', label: 'Content CSS Class' }
+    ],
+    defaultProps: {
+      title: 'Drawer Title',
+      description: 'Drawer description',
+      trigger: [{ type: 'button', label: 'Open Drawer' }],
+      content: [{ type: 'text', content: 'Drawer content goes here' }]
+    }
+  }
+);

package/src/renderers/overlay/dropdown-menu.tsx

@@ -0,0 +1,90 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { DropdownMenuSchema } from '@object-ui/types';
+import { 
+  DropdownMenu, 
+  DropdownMenuTrigger, 
+  DropdownMenuContent, 
+  DropdownMenuItem, 
+  DropdownMenuLabel, 
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent
+} from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+// Helper for recursive menu items
+const renderMenuItems = (items: any[]) => {
+  if (!items) return null;
+  return items.map((item: any, i: number) => {
+    if (item.type === 'separator') return <DropdownMenuSeparator key={i} />;
+    if (item.type === 'label') return <DropdownMenuLabel key={i}>{item.label}</DropdownMenuLabel>;
+    if (item.children) {
+        return (
+            <DropdownMenuSub key={i}>
+                <DropdownMenuSubTrigger inset={item.inset}>
+                    {item.icon && <span className="mr-2">{item.icon}</span>}
+                    {item.label}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                    {renderMenuItems(item.children)}
+                </DropdownMenuSubContent>
+            </DropdownMenuSub>
+        )
+    }
+    
+    return (
+      <DropdownMenuItem key={i} disabled={item.disabled} inset={item.inset} onSelect={item.onSelect}>
+        {item.icon && <span className="mr-2">{item.icon}</span>}
+        {item.label}
+        {item.shortcut && <span className="ml-auto text-xs tracking-widest opacity-60">{item.shortcut}</span>}
+      </DropdownMenuItem>
+    );
+  });
+};
+
+ComponentRegistry.register('dropdown-menu', 
+  ({ schema, className, ...props }: { schema: DropdownMenuSchema; className?: string; [key: string]: any }) => (
+    <DropdownMenu modal={schema.modal} defaultOpen={schema.defaultOpen} {...props}>
+      <DropdownMenuTrigger asChild>
+         {renderChildren(schema.trigger)}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={schema.align} side={schema.side} className={className}>
+        {schema.label && <DropdownMenuLabel>{schema.label}</DropdownMenuLabel>}
+        {schema.label && <DropdownMenuSeparator />}
+        {renderMenuItems(schema.items)}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+  {
+    label: 'Dropdown Menu',
+    inputs: [
+      { name: 'label', type: 'string', label: 'Menu Label' },
+       { name: 'side', type: 'enum', enum: ['top', 'right', 'bottom', 'left'], label: 'Side' },
+      { name: 'align', type: 'enum', enum: ['start', 'center', 'end'], label: 'Align' },
+       { 
+        name: 'trigger', 
+        type: 'slot', 
+        label: 'Trigger' 
+      },
+      { 
+        name: 'items', 
+        type: 'array', 
+        label: 'Items',
+        description: 'Recursive structure: { type?: "separator"|"label", label, icon, shortcut, disabled, children: [] }'
+      },
+      { name: 'className', type: 'string', label: 'Content CSS Class' }
+    ],
+    defaultProps: {
+      trigger: [{ type: 'button', label: 'Menu', variant: 'outline' }],
+      items: [
+        { label: 'Item 1' },
+        { label: 'Item 2' },
+        { type: 'separator' },
+        { label: 'Item 3' }
+      ],
+      align: 'start',
+      side: 'bottom'
+    }
+  }
+);

package/src/renderers/overlay/hover-card.tsx

@@ -0,0 +1,46 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { HoverCardSchema } from '@object-ui/types';
+import { 
+  HoverCard, 
+  HoverCardTrigger, 
+  HoverCardContent 
+} from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+ComponentRegistry.register('hover-card', 
+  ({ schema, className, ...props }: { schema: HoverCardSchema; className?: string; [key: string]: any }) => (
+    <HoverCard openDelay={schema.openDelay} closeDelay={schema.closeDelay} {...props}>
+      <HoverCardTrigger asChild>
+        {renderChildren(schema.trigger)}
+      </HoverCardTrigger>
+      <HoverCardContent align={schema.align} side={schema.side} className={className}>
+         {renderChildren(schema.content)}
+      </HoverCardContent>
+    </HoverCard>
+  ),
+  {
+    label: 'Hover Card',
+    inputs: [
+       { name: 'openDelay', type: 'number', label: 'Open Delay' },
+        { name: 'closeDelay', type: 'number', label: 'Close Delay' },
+         { name: 'side', type: 'enum', enum: ['top', 'right', 'bottom', 'left'], label: 'Side' },
+      { name: 'align', type: 'enum', enum: ['start', 'center', 'end'], label: 'Align' },
+       { 
+        name: 'trigger', 
+        type: 'slot', 
+        label: 'Trigger' 
+      },
+      { 
+        name: 'content', 
+        type: 'slot', 
+        label: 'Content' 
+      },
+      { name: 'className', type: 'string', label: 'Content CSS Class' }
+    ],
+    defaultProps: {
+      trigger: [{ type: 'button', label: 'Hover me', variant: 'link' }],
+      content: [{ type: 'text', content: 'Hover card content appears on hover' }],
+      side: 'top'
+    }
+  }
+);

package/src/renderers/overlay/index.ts

@@ -0,0 +1,9 @@
+import './dialog';
+import './sheet';
+import './popover';
+import './tooltip';
+import './alert-dialog';
+import './drawer';
+import './hover-card';
+import './dropdown-menu';
+import './context-menu';

package/src/renderers/overlay/popover.tsx

@@ -0,0 +1,47 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { PopoverSchema } from '@object-ui/types';
+import { 
+  Popover, 
+  PopoverTrigger, 
+  PopoverContent 
+} from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+ComponentRegistry.register('popover', 
+  ({ schema, className, ...props }: { schema: PopoverSchema; className?: string; [key: string]: any }) => (
+    <Popover modal={schema.modal} defaultOpen={schema.defaultOpen} {...props}>
+      <PopoverTrigger asChild>
+        {renderChildren(schema.trigger)}
+      </PopoverTrigger>
+      <PopoverContent align={schema.align} side={schema.side} className={className}>
+        {renderChildren(schema.content)}
+      </PopoverContent>
+    </Popover>
+  ),
+  {
+    label: 'Popover',
+    inputs: [
+      { name: 'modal', type: 'boolean', label: 'Modal' },
+      { name: 'defaultOpen', type: 'boolean', label: 'Default Open' },
+      { name: 'align', type: 'enum', enum: ['start', 'center', 'end'], label: 'Align' },
+      { name: 'side', type: 'enum', enum: ['top', 'right', 'bottom', 'left'], label: 'Side' },
+      { 
+        name: 'trigger', 
+        type: 'slot', 
+        label: 'Trigger',
+      },
+      { 
+        name: 'content', 
+        type: 'slot', 
+        label: 'Content', 
+      },
+      { name: 'className', type: 'string', label: 'Content CSS Class' }
+    ],
+    defaultProps: {
+      trigger: [{ type: 'button', label: 'Open Popover', variant: 'outline' }],
+      content: [{ type: 'text', content: 'Popover content goes here' }],
+      align: 'center',
+      side: 'bottom'
+    }
+  }
+);