native-document 1.0.165 → 1.0.168

package/src/ui/components/stepper/StepperRender.js

@@ -35,7 +35,7 @@ const buildNav = ($desc, instance) => {
             }
 
             return Div({class: 'stepper-step-wrapper'}, items);
-        })
+        }),
     );
 };
 
@@ -65,7 +65,7 @@ const buildContent = ($desc, instance) => {
                 class: isActive.transform(a => 'stepper-panel' + (a ? '' : ' is-hidden')),
             }, step.$description.content);
         };
-    })
+    });
 
     return Div({class: 'stepper-content'}, Match($desc.currentStep, contents));
 };

package/src/ui/components/stepper/StepperStepRender.js

@@ -1,5 +1,5 @@
 import {Div, Span} from '../../../core/elements';
-import { Observable } from "../../../core/data/Observable";
+import { Observable } from '../../../core/data/Observable';
 
 export default function StepperStepRender($desc, instance) {
     if($desc.render) {
@@ -13,13 +13,13 @@ export default function StepperStepRender($desc, instance) {
     props.class.add('stepper-step');
 
     const isActive = Observable.computed(() => {
-        return stepper.$description.currentStep.val() === index.val()
+        return stepper.$description.currentStep.val() === index.val();
     }, [stepper.$description.currentStep, index]) ;
 
     const indicatorClass = {
         'step-indicator' : true,
         '_': $desc.status.transform((status) => 'is-' + status),
-        'is-active': isActive
+        'is-active': isActive,
     };
 
     const stateIndicator = $desc.status.transform((status) => {
@@ -32,7 +32,7 @@ export default function StepperStepRender($desc, instance) {
         return '';
     });
 
-    let indicatorContent = $desc.icon || (stepper.$description.showNumbers ? index.transform((value) => value + 1) : null);
+    const indicatorContent = $desc.icon || (stepper.$description.showNumbers ? index.transform((value) => value + 1) : null);
 
     const labelClass = isActive.transform(a => 'step-label' + (a ? ' is-active' : ''));
 

package/src/ui/components/switch/SwitchRender.js

@@ -13,7 +13,7 @@ export default function SwitchRender($desc, instance) {
         '_':   $desc.variant.transform((value) => `is-${value}`),
         'is-outline':   $desc.outline,
         'is-checked':   $desc.value,
-        '___': $desc.value.transform(value => `is-state-${value ? 'on' : 'off'}`)
+        '___': $desc.value.transform(value => `is-state-${value ? 'on' : 'off'}`),
     });
 
     if($desc.labelPosition) {
@@ -63,8 +63,8 @@ const buildThumb = ($desc) => {
                 Match($desc.value, {
                     true:  $desc.onIcon,
                     false: $desc.offIcon,
-                })
-            )
+                }),
+            ),
         );
     }
 
@@ -78,6 +78,6 @@ const buildInnerLabel = ($desc) => {
         Match($desc.value, {
             true:  $desc.innerOnLabel  || '',
             false: $desc.innerOffLabel || '',
-        })
+        }),
     );
 };

package/src/ui/components/table/data-table/DataTableRender.js

@@ -1,17 +1,17 @@
 import {Div} from '../../../../../elements';
 import './data-table.css';
 
-import {buildColumnsBtn, buildExportBtn, buildFiltersBtn, buildSearch, buildToolbar} from "./toolbar";
-import {buildBulkActions, buildBulkButtons, buildBulkCount} from "./bulk-actions";
-import {buildTable} from "./tables";
-import {buildPageInfo, buildPageNav, buildPageSize, buildPagination} from "./pagination";
+import {buildColumnsBtn, buildExportBtn, buildFiltersBtn, buildSearch, buildToolbar} from './toolbar';
+import {buildBulkActions, buildBulkButtons, buildBulkCount} from './bulk-actions';
+import {buildTable} from './tables';
+import {buildPageInfo, buildPageNav, buildPageSize, buildPagination} from './pagination';
 
 export default function DataTableRender($desc, instance) {
     const props = instance.getEditableProps();
     props.class.add('data-table');
 
     const visibleColumns = $desc.columns.filter(col =>
-        col.$description.visible !== false
+        col.$description.visible !== false,
     );
 
 

package/src/ui/components/table/data-table/bulk-actions.js

@@ -1,7 +1,7 @@
-import {Div, Span, ShowIf} from "../../../../../elements";
-import {Button} from "../../../../components/button";
+import {Div, Span, ShowIf} from '../../../../../elements';
+import {Button} from '../../../../components/button';
 
-export const buildBulkActions = ({bulkCount, bulkButtons}, $desc, instance) => {
+export const buildBulkActions = ({bulkCount, bulkButtons}, $desc) => {
     if(!$desc.bulkActions?.length) return null;
 
     return ShowIf($desc.$selectedRows.is(items => items.length > 0), () => {
@@ -9,13 +9,13 @@ export const buildBulkActions = ({bulkCount, bulkButtons}, $desc, instance) => {
     });
 };
 
-export const buildBulkCount = ($desc, instance) => {
+export const buildBulkCount = ($desc) => {
     return Span({ class: 'data-table-bulk-count' },
-        $desc.$selectedRows.transform(rows => $desc.labels.selected(rows.length))
+        $desc.$selectedRows.transform(rows => $desc.labels.selected(rows.length)),
     );
 };
 
-export const buildBulkButtons = ($desc, instance) => {
+export const buildBulkButtons = ($desc) => {
     if(!$desc.bulkActions?.length) return null;
 
     return Div({class: 'data-table-bulk-buttons'},
@@ -29,6 +29,6 @@ export const buildBulkButtons = ($desc, instance) => {
             }
             btn.nd.onClick(() => action.onClick($desc.$selectedRows.val()));
             return btn;
-        })
+        }),
     );
 };

package/src/ui/components/table/data-table/pagination.js

@@ -1,7 +1,7 @@
-import {Div, Span} from "../../../../../elements";
-import { $ } from "../../../../core/data/Observable";
-import {SelectField} from "../../../../components/form";
-import {Pagination} from "../../../../components/pagination";
+import {Div, Span} from '../../../../../elements';
+import { $ } from '../../../../core/data/Observable';
+import {SelectField} from '../../../../components/form';
+import {Pagination} from '../../../../components/pagination';
 
 export const buildPagination = ({ pageInfo, pageSize, pageNav }) => {
     return Div({class: 'data-table-pagination'}, [
@@ -10,7 +10,7 @@ export const buildPagination = ({ pageInfo, pageSize, pageNav }) => {
     ]);
 };
 
-export const buildPageInfo = ($desc, instance) => {
+export const buildPageInfo = ($desc) => {
     const pageInfo = $.computed((total, data, pageSize, page) => {
         total = total || data?.length || 0;
         const pages = Math.ceil(total / pageSize);
@@ -51,6 +51,6 @@ export const buildPageNav = ($desc, instance) => {
             .showPreviousNext(true)
             .onPageChange((page) => {
                 instance.emit('page', page, $desc.$pageSize.val());
-            })
+            }),
     ]);
 };

package/src/ui/components/table/data-table/tables.js

@@ -10,10 +10,10 @@ import {
     Td,
     THead,
     THeadCell,
-    TRow
-} from "../../../../../elements";
-import { $ } from "../../../../core/data/Observable";
-import {classPropertyAccumulator} from "../../../../core/utils/property-accumulator";
+    TRow,
+} from '../../../../../elements';
+import { $ } from '../../../../core/data/Observable';
+import {classPropertyAccumulator} from '../../../../core/utils/property-accumulator';
 
 export const buildTable = ($desc, instance, visibleColumns) => {
     const thead = $desc.noHeader ? null : buildTHead($desc, instance, visibleColumns);
@@ -53,21 +53,21 @@ export const buildTHead = ($desc, instance, visibleColumns) => {
             : $descCol.header;
 
         const classes = {
-            'is-sortable': isSortable
+            'is-sortable': isSortable,
         };
 
         if($descCol.align) {
             if($descCol.align.__$Observable) {
-                classes['_'] = $descCol.align.transform((v) => `is-align-${v}`)
+                classes['_'] = $descCol.align.transform((v) => `is-align-${v}`);
             } else {
-                classes[`is-align-${$descCol.align}`] = true
+                classes[`is-align-${$descCol.align}`] = true;
             }
         }
         if($descCol.pinned) {
             if($descCol.pinned.__$Observable) {
-                classes['__'] = $descCol.pinned.transform((v) => `is-pinned-${v}`)
+                classes['__'] = $descCol.pinned.transform((v) => `is-pinned-${v}`);
             } else {
-                classes[`is-pinned-${$descCol.pinned}`] = true
+                classes[`is-pinned-${$descCol.pinned}`] = true;
             }
         }
 
@@ -216,13 +216,13 @@ export const buildTBody = ($desc, instance, visibleColumns) => {
 export const buildEmpty = ($desc, visibleColumns) => {
     if(!$desc.empty) return null;
 
-    let colspan
+    let colspan;
     if(visibleColumns.__$Observable) {
         colspan = visibleColumns.transform((columns) => {
             return columns.length
                 + ($desc.selectable ? 1 : 0)
-                + ($desc.expandable ? 1 : 0)
-        })
+                + ($desc.expandable ? 1 : 0);
+        });
     } else {
         colspan = visibleColumns.length
             + ($desc.selectable ? 1 : 0)
@@ -233,9 +233,9 @@ export const buildEmpty = ($desc, visibleColumns) => {
         ? $desc.empty()
         : Span({class: 'data-table-empty-text'}, $desc.empty);
 
-    return ShowIf($desc.data?.is(items => items.length === 0), () => {
+    return ShowIf($desc.data?.isEmpty(), () => {
         return TRow(Td({ colspan }, [
-            Div({ class: 'data-table-empty' }, content)
+            Div({ class: 'data-table-empty' }, content),
         ]));
     });
 };
@@ -243,7 +243,7 @@ export const buildEmpty = ($desc, visibleColumns) => {
 export const buildLoading = ($desc) => {
 
     return ShowIf($desc.loading, () => {
-        return Div({ class: 'data-table-loading' }, Span({class: 'data-table-spinner'}))
+        return Div({ class: 'data-table-loading' }, Span({class: 'data-table-spinner'}));
     });
 };
 
@@ -267,8 +267,8 @@ export const buildRow = ($desc, instance, visibleColumns, row) => {
 
         cells.push(
             ShowIf($desc.selectable,
-                () => TBodyCell({class: 'data-table-td-checkbox'}, checkbox)
-            )
+                () => TBodyCell({class: 'data-table-td-checkbox'}, checkbox),
+            ),
         );
     }
 
@@ -276,8 +276,8 @@ export const buildRow = ($desc, instance, visibleColumns, row) => {
     let detailRow = null;
     if($desc.expandable) {
         const $isExpanded = $(false);
-        const toggleBtn   = Span({class: 'data-table-expand-btn',},
-            Switch($isExpanded, $desc.isExpandedIcon, $desc.isNotExpandedIcon)
+        const toggleBtn   = Span({class: 'data-table-expand-btn'},
+            Switch($isExpanded, $desc.isExpandedIcon, $desc.isNotExpandedIcon),
         );
 
         toggleBtn.nd.onClick(() => {
@@ -301,16 +301,16 @@ export const buildRow = ($desc, instance, visibleColumns, row) => {
         const classProperty = classPropertyAccumulator($descCol.props?.class || {});
         if($descCol.align) {
             if($descCol.align.__$Observable) {
-                classProperty.add($descCol.align.transform((v) => `is-align-${v}`))
+                classProperty.add($descCol.align.transform((v) => `is-align-${v}`));
             } else {
-                classProperty.add(`is-align-${$descCol.align}`, true)
+                classProperty.add(`is-align-${$descCol.align}`, true);
             }
         }
         if($descCol.pinned) {
             if($descCol.pinned.__$Observable) {
-                classProperty.add($descCol.pinned.transform((v) => `is-pinned-${v}`))
+                classProperty.add($descCol.pinned.transform((v) => `is-pinned-${v}`));
             } else {
-                classProperty.add(`is-pinned-${$descCol.pinned}`, true)
+                classProperty.add(`is-pinned-${$descCol.pinned}`, true);
             }
         }
 
@@ -353,7 +353,7 @@ export const buildDetailRow = ($desc, visibleColumns, row) => {
             return columns.length
                 + ($desc.selectable ? 1 : 0)
                 + ($desc.expandable ? 1 : 0);
-        })
+        });
     } else {
         colspan = visibleColumns.length
             + ($desc.selectable ? 1 : 0)
@@ -363,6 +363,6 @@ export const buildDetailRow = ($desc, visibleColumns, row) => {
     const content = $desc.expandable(row);
 
     return TRow({class: 'data-table-detail-row'},
-        TBodyCell({colspan, class: 'data-table-detail-cell'}, content)
+        TBodyCell({colspan, class: 'data-table-detail-cell'}, content),
     );
 };

package/src/ui/components/table/data-table/toolbar.js

@@ -1,6 +1,6 @@
-import {Div, Input, Span} from "../../../../../elements";
-import {Button} from "../../../../components/button";
-import {SelectField} from "../../../../components/form";
+import {Div, Input, Span} from '../../../../../elements';
+import {Button} from '../../../../components/button';
+import {SelectField} from '../../../../components/form';
 
 export const buildToolbar = ({ search, filters, exportBtn, columnsBtn }) => {
     return Div({class: 'data-table-toolbar'}, [

package/src/ui/components/table/simple-table/SimpleTableRender.js

@@ -1,5 +1,5 @@
 import {Table, THead, TBody, TRow, THeadCell, TBodyCell, Span, ShowIf} from '../../../../core/elements';
-import {classPropertyAccumulator} from "../../../../core/utils/property-accumulator";
+import {classPropertyAccumulator} from '../../../../core/utils/property-accumulator';
 
 import './simple-table.css';
 
@@ -8,7 +8,7 @@ export default function SimpleTableRender($desc, instance) {
     props.class.add('simple-table');
 
     const visibleColumns = $desc.columns.filter(col =>
-        col.$description.visible !== false
+        col.$description.visible !== false,
     );
 
     return Table(instance.resolveProps(), [
@@ -34,7 +34,7 @@ const buildGroupRow = ($desc) => {
                 class:   item.$description.align ? `is-${item.$description.align}` : null,
                 ...extraProps,
             }, item.$description.header);
-        })
+        }),
     );
 };
 
@@ -48,7 +48,7 @@ const buildHeaderRow = ($desc, visibleColumns) => {
                 rowspan: col.$description.rowspan || null,
                 ...extraProps,
             }, col.$description.header);
-        })
+        }),
     );
 };
 
@@ -78,7 +78,7 @@ const buildBody = ($desc, instance, visibleColumns) => {
             return fragment;
         },
         set: () => {
-            mutations.clear()
+            mutations.clear();
             mutations.push($desc.data.val());
         },
         push: (args) => {
@@ -160,10 +160,10 @@ const buildRow = ($desc, visibleColumns, row) => {
         const extraProps = column.$description.props || $desc.cellProps?.(value, row, column) || {};
         const classProperty = classPropertyAccumulator(extraProps.class || {});
         if(column.$description.align) {
-            classProperty.add(`is-${column.$description.align}`)
+            classProperty.add(`is-${column.$description.align}`);
         }
         const cell = TBodyCell({ ...extraProps, class: classProperty.value() },
-            content
+            content,
         );
         if(column.$description.onClick) {
             cell.nd.onClick((event) => column.$description.onClick(row, event));
@@ -173,7 +173,7 @@ const buildRow = ($desc, visibleColumns, row) => {
 
     const rowExtraProps = $desc.rowProps?.(row) || {};
     const classProperty = classPropertyAccumulator(rowExtraProps.class || {});
-    classProperty.add({'has-click': !!$desc.onRowClick})
+    classProperty.add({'has-click': !!$desc.onRowClick});
 
     const tr = TRow({ ...rowExtraProps, class: classProperty.value()}, cells);
 

package/src/ui/components/tabs/TabsRender.js

@@ -1,8 +1,8 @@
 import {Div, ForEachArray, Match, Nav, ShowIf, Span} from '../../../core/elements';
 import { $ } from '../../../core/data/Observable';
-import {Button} from "../../../components/button";
+import {Button} from '../../../components/button';
 import {Dropdown} from '../../../components/dropdown';
-import {nextTick} from "../../../core/utils/helpers";
+import {nextTick} from '../../../core/utils/helpers';
 
 import './tabs.css';
 
@@ -55,7 +55,7 @@ export default function TabsRender($desc, instance) {
 
 const buildNavContent = ($keys, $desc, instance) => {
     const tabItemWrapper = Nav({class: 'tabs-nav-wrap', role: 'tablist' },
-        ForEachArray($keys, (key) => buildTab(key, $keys, $desc, instance))
+        ForEachArray($keys, (key) => buildTab(key, $keys, $desc, instance)),
     );
 
     const navOptionsContent = [];
@@ -69,19 +69,19 @@ const buildNavContent = ($keys, $desc, instance) => {
             btnPlusButton
                 .nd.onClick(() => {
                     $desc.addPLusCallback && $desc.addPLusCallback($desc, instance);
-                })
+                }),
         );
     }
 
     if($desc.overflow) {
         navOptionsContent.push(
-            Div({class: 'tab-nav-overflow'}, buildOverflowMenu(tabItemWrapper, $keys, $desc, instance))
+            Div({class: 'tab-nav-overflow'}, buildOverflowMenu(tabItemWrapper, $keys, $desc, instance)),
         );
     }
 
     return [
         tabItemWrapper,
-        Div({ class: 'tab-nav-options'}, navOptionsContent)
+        Div({ class: 'tab-nav-options'}, navOptionsContent),
     ];
 };
 
@@ -139,7 +139,7 @@ const buildOverflowMenu = (tabItemWrapper, $keys, $desc, instance) => {
             })
             .atBottomTrailing()
             .trigger(Button('▾').ghost().small())
-            .onChange((key) => $desc.active.set(key))
+            .onChange((key) => $desc.active.set(key));
     });
 };
 
@@ -157,7 +157,7 @@ const buildTab = (key, $keys, $desc, instance) => {
         'aria-selected': isActive,
         'data-key': key,
         draggable: true,
-        role: 'tab'
+        role: 'tab',
     }, buildTabContent(tab, $desc, instance));
 
 
@@ -216,9 +216,9 @@ const buildTabContent = (tab, $desc, instance) => {
         content.push(
             closeButton
                 .nd.onClick((e) => {
-                e.stopPropagation();
-                instance.closeTab(tab.key);
-            })
+                    e.stopPropagation();
+                    instance.closeTab(tab.key);
+                }),
         );
     }
 

package/src/ui/components/toast/ToastRender.js

@@ -1,6 +1,6 @@
 import {Div, Span} from '../../../core/elements';
 import Button from '../../../components/button/Button';
-import {createPortal} from "../../../core/elements/anchor/anchor";
+import {createPortal} from '../../../core/elements/anchor/anchor';
 
 import './toast.css';
 
@@ -16,7 +16,7 @@ const getContainer = (position) => {
     $containers[position] = container;
 
     return container;
-}
+};
 
 export default function ToastRender($desc, instance) {
     const props    = instance.getEditableProps();
@@ -96,4 +96,4 @@ const buildContent = ($desc, instance) => {
     }
 
     return Div({class: 'toast-body'}, body);
-}
+};

package/src/ui/components/tooltip/TooltipRender.js

@@ -1,4 +1,4 @@
-import PopoverRender from "../popover/PopoverRender";
+import PopoverRender from '../popover/PopoverRender';
 
 import './tooltip.css';
 

package/src/ui/index.js

@@ -1,39 +1,47 @@
-export { default as SpinnerRender } from "./components/spinner/SpinnerRender";
-export { default as AvatarRender } from "./components/avatar/avatar/AvatarRender";
-export { default as AvatarGroupRender } from "./components/avatar/avata-group/AvatarGroupRender";
-export { default as BadgeRender } from "./components/badge/BadgeRender";
-export { default as DividerRender } from "./components/divider/DividerRender";
-export { default as SkeletonRender } from "./components/skeleton/SkeletonRender";
-export { default as ProgressRender } from "./components/progress/ProgressRender";
-export { default as ButtonRender } from "./components/button/ButtonRender";
-export { default as AlertRender } from "./components/alert/AlertRender";
-export { default as ToastRender } from "./components/toast/ToastRender";
-export { default as PopoverRender } from "./components/popover/PopoverRender";
-export { default as TooltipRender } from "./components/tooltip/TooltipRender";
-export { default as DropdownRender } from "./components/dropdown/DropdownRender";
-export { default as ModalRender } from "./components/modal/ModalRender";
-export { default as DropdownItemRender } from "./components/dropdown/item/DropdownItemRender";
-export { default as DropdownGroupRender } from "./components/dropdown/group/DropdownGroupRender";
-export { default as DropdownDividerRender } from "./components/dropdown/divider/DropdownDividerRender";
-export { default as BreadcrumbRender } from "./components/breadcrumb/BreadcrumbRender";
-export { default as TabsRender } from "./components/tabs/TabsRender";
-export { default as PaginationRender } from "./components/pagination/PaginationRender";
-export { default as StepperRender } from "./components/stepper/StepperRender";
-export { default as StepperStepRender } from "./components/stepper/StepperStepRender";
-export { default as MenuRender } from "./components/menu/MenuRender";
-export { default as MenuItemRender } from "./components/menu/MenuItemRender";
-export { default as MenuGroupRender } from "./components/menu/MenuGroupRender";
-export { default as MenuLinkRender } from "./components/menu/MenuLinkRender";
-export { default as MenuDividerRender } from "./components/menu/MenuDividerRender";
-export { default as ContextMenuRender, contextMenuHandler } from "./components/contextmenu/ContextMenuRender";
-export { default as SplitterRender } from "./components/splitter/SplitterRender";
-export { default as SplitterGutterRender } from "./components/splitter/SplitterGutterRender";
-export { default as SplitterPanelRender } from "./components/splitter/SplitterPanelRender";
-export { default as AccordionItemRender } from "./components/accordion/AccordionItemRender";
-export { default as AccordionRender } from "./components/accordion/AccordionRender";
-export { default as SimpleTableRender } from "./components/table/simple-table/SimpleTableRender";
-export { default as DataTableRender } from "./components/table/data-table/DataTableRender";
-export { default as SwitchRender } from "./components/switch/SwitchRender";
+export { default as SpinnerRender } from './components/spinner/SpinnerRender';
+export { default as AvatarRender } from './components/avatar/avatar/AvatarRender';
+export { default as AvatarGroupRender } from './components/avatar/avata-group/AvatarGroupRender';
+export { default as BadgeRender } from './components/badge/BadgeRender';
+export { default as DividerRender } from './components/divider/DividerRender';
+export { default as SkeletonRender } from './components/skeleton/SkeletonRender';
+export { default as ProgressRender } from './components/progress/ProgressRender';
+export { default as ButtonRender } from './components/button/ButtonRender';
+export { default as AlertRender } from './components/alert/AlertRender';
+export { default as ToastRender } from './components/toast/ToastRender';
+export { default as PopoverRender } from './components/popover/PopoverRender';
+export { default as TooltipRender } from './components/tooltip/TooltipRender';
+export { default as DropdownRender } from './components/dropdown/DropdownRender';
+export { default as ModalRender } from './components/modal/ModalRender';
+export { default as DropdownItemRender } from './components/dropdown/item/DropdownItemRender';
+export { default as DropdownGroupRender } from './components/dropdown/group/DropdownGroupRender';
+export { default as DropdownDividerRender } from './components/dropdown/divider/DropdownDividerRender';
+export { default as BreadcrumbRender } from './components/breadcrumb/BreadcrumbRender';
+export { default as TabsRender } from './components/tabs/TabsRender';
+export { default as PaginationRender } from './components/pagination/PaginationRender';
+export { default as StepperRender } from './components/stepper/StepperRender';
+export { default as StepperStepRender } from './components/stepper/StepperStepRender';
+export { default as MenuRender } from './components/menu/MenuRender';
+export { default as MenuItemRender } from './components/menu/MenuItemRender';
+export { default as MenuGroupRender } from './components/menu/MenuGroupRender';
+export { default as MenuLinkRender } from './components/menu/MenuLinkRender';
+export { default as MenuDividerRender } from './components/menu/MenuDividerRender';
+export { default as ContextMenuRender, contextMenuHandler } from './components/contextmenu/ContextMenuRender';
+export { default as SplitterRender } from './components/splitter/SplitterRender';
+export { default as SplitterGutterRender } from './components/splitter/SplitterGutterRender';
+export { default as SplitterPanelRender } from './components/splitter/SplitterPanelRender';
+export { default as AccordionItemRender } from './components/accordion/AccordionItemRender';
+export { default as AccordionRender } from './components/accordion/AccordionRender';
+export { default as SimpleTableRender } from './components/table/simple-table/SimpleTableRender';
+export { default as DataTableRender } from './components/table/data-table/DataTableRender';
+export { default as SwitchRender } from './components/switch/SwitchRender';
+export { default as SpacerRender } from './components/spacer/SpacerRender';
+
+export { default as ListRender } from './components/list/ListRender';
+export { default as ListGroupRender } from './components/list/group/ListGroupRender';
+export { default as ListItemRender } from './components/list/item/ListItemRender';
+export { default as ListDividerRender } from './components/list/divider/ListDividerRender';
+
+export { default as CardRender } from './components/card/CardRender';
 
 export * from './components/stacks';
 export * from './components/form';