To props and children

README.md

@@ -110,5 +110,6 @@ const bau = Bau();
 const { div } = bau.tags;
 ```
 
+- Bau reactive functions can return an array of elements, the equivalent of a React Fragment.
 - Bau promotes only one paradigm: views derive from the state. Van could mix paradigms, imperative and state derived view. The imperative way is when your code directly maniplates the DOM, in the same way as vanilla js and jquery. This style of programming is error prone, therefore, preventing its use makes bau _hard to misuse_
 - Bau supports undefined or null attribute, see [issue 39](https://github.com/vanjs-org/van/pull/39)

bau-ui/alert/alert.js

@@ -92,7 +92,7 @@ export default function (context, options = {}) {
         onRemove,
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
 
     return div(
@@ -111,7 +111,7 @@ export default function (context, options = {}) {
         role: "alert",
       },
       span({ class: "icon" }, severityMap[color]),
-      div({ class: "content" }, ...children),
+      div({ class: "content" }, children),
       onRemove && CloseIcon({ onclick: onRemove })
     );
   };

bau-ui/alertStack/alertStack.js

@@ -45,7 +45,7 @@ export default (context, options = {}) => {
     }
   };
 
-  return function AlertStack(props = {}, ...children) {
+  return function AlertStack(props = {}) {
     const remove = ({ id }) => {
       setStatus({ id, status: "removing" });
       const idx = messagesState.val.findIndex((message) => message.id === id);

bau-ui/autocomplete/autocomplete.js

@@ -73,7 +73,7 @@ export default function (context, componentOptions = {}) {
         loading,
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
 
     const Popover = popover(context);

bau-ui/avatar/avatar.js

@@ -56,7 +56,7 @@ export default function (context, options = {}) {
         alt,
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
     const Skeleton = skeleton(context, {
       class: [

bau-ui/badge/badge.js

@@ -34,15 +34,15 @@ export default function (context, options = {}) {
         content,
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
     return span(
       {
         ...props,
         class: ["badge", className, options?.class, props?.class],
       },
       span({ class: [color, variant, size] }, content),
-      ...children
+      children
     );
   };
 }

bau-ui/breadcrumbs/breadcrumbs.js

@@ -48,7 +48,7 @@ export default function (context, options = {}) {
         items,
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
     return ul(
       {

bau-ui/button/button.js

@@ -91,7 +91,7 @@ export default function (context, options = {}) {
         href,
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
 
     const tagButton = href ? bau.tags.a : bau.tags.button;

bau-ui/buttonGroup/buttonGroup.js

@@ -53,7 +53,7 @@ export default function (context, options = {}) {
         color = options.color ?? "neutral",
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
 
     return div(
@@ -69,7 +69,7 @@ export default function (context, options = {}) {
           props?.class,
         ],
       },
-      ...children
+      children
     );
   };
 }

bau-ui/calendar/calendar.js

@@ -33,7 +33,7 @@ export default function (context, options = {}) {
         color = options.color ?? "neutral",
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
     return input(
       {
@@ -49,7 +49,7 @@ export default function (context, options = {}) {
           props?.class,
         ],
       },
-      ...children
+      children
     );
   };
 }

bau-ui/checkbox/checkbox.js

@@ -72,7 +72,7 @@ export default function (context, options = {}) {
         color = options.color ?? "neutral",
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
 
     return input({

bau-ui/chip/chip.js

@@ -38,7 +38,7 @@ export default function (context, options = {}) {
         onclick,
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
 
     return span(
@@ -56,7 +56,7 @@ export default function (context, options = {}) {
           props.class,
         ],
       },
-      ...children
+      children
     );
   };
 }

bau-ui/divider/divider.js

@@ -28,14 +28,14 @@ export default function (context, options = {}) {
         color = options.color ?? "neutral",
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
     return div(
       {
         ...props,
         class: ["divider", size, className, options?.class, props?.class],
       },
-      div({ class: "content" }, ...children)
+      div({ class: "content" }, children)
     );
   };
 }

bau-ui/drawer/drawer.js

@@ -48,10 +48,8 @@ export default function (context, options) {
   `;
 
   return function Drawer(...args) {
-    let [
-      { color, variant = "outline", size, openState, ...props },
-      ...children
-    ] = toPropsAndChildren(args);
+    let [{ color, variant = "outline", size, openState, ...props }, children] =
+      toPropsAndChildren(args);
     return div(
       { class: [className, options?.class, props.class] },
       // Overlay

bau-ui/dropdownMenu/dropdownMenu.js

@@ -34,7 +34,7 @@ export default function (context, componentOptions = {}) {
         items,
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
 
     const itemIndexActive = bau.state(0);

bau-ui/examples/bau-storybook/src/landingPage.js

@@ -36,7 +36,7 @@ export default function (context) {
             gap: 1rem;
           `,
         },
-        ...children
+        children
       )
     );
 

bau-ui/examples/bau-storybook/src/pages/table/tablePagination.examples.ts

@@ -28,7 +28,7 @@ export default (context: Context) => {
           }
         `,
       },
-      ...children
+      children
     );
 
   return () => {

bau-ui/fileInput/fileInput.js

@@ -39,7 +39,7 @@ export default function (context, options = {}) {
     `,
   };
 
-  return function FileInput(props, ...children) {
+  return function FileInput(props) {
     const {
       size = options.size ?? "md",
       variant = options.variant ?? "outline",

bau-ui/form/form.js

@@ -57,7 +57,7 @@ export default function (context, options = {}) {
         content,
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
     return form(
       {
@@ -72,7 +72,7 @@ export default function (context, options = {}) {
           props?.class,
         ],
       },
-      ...children
+      children
     );
   };
 }

bau-ui/globalStyle/globalStyle.js

@@ -11,7 +11,7 @@ const ColorPaletteDefault = [
 const SHADES_LIGHT = [
   ["light", "1.15"],
   ["lighter", "1.3"],
-  ["lightest", "1.5"],
+  ["lightest", "1.7"],
 ];
 const SHADES_DARK = [
   ["dark", "0.9"],
@@ -117,6 +117,7 @@ export default function globalStyle(
       --background-color: var(--color-white);
       --global-border-width: 1px;
       --global-radius: 0.2rem;
+      --font-color: var(--color-content);
       --font-color-base: var(--color-content);
       --font-color-disabled: var(--color-emphasis-600);
       --font-color-inverse: var(--color-content-inverse);

bau-ui/keyValueList/keyValueList.js

@@ -29,14 +29,14 @@ export default function (context, options = {}) {
         color = options.color ?? "neutral",
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
     return ul(
       {
         ...props,
         class: ["keyValueList", className, options?.class, props?.class],
       },
-      ...children
+      children
     );
   };
 }

bau-ui/list/list.js

@@ -42,7 +42,7 @@ export default function (context, options = {}) {
         color = options.color ?? "neutral",
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
     return ul(
       {
@@ -57,7 +57,7 @@ export default function (context, options = {}) {
           props?.class.join(" "),
         ],
       },
-      ...children
+      children
     );
   };
 }

bau-ui/loadingButton/loadingButton.js

@@ -44,7 +44,7 @@ export default function (context, options = {}) {
         loading,
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
 
     const Button = button(context);

bau-ui/modal/modal.js

@@ -94,7 +94,7 @@ export default function (context, options = {}) {
         color = options.color ?? "neutral",
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
 
     const dialogEl = dialog(

bau-ui/multiSelect/multiSelect.js

@@ -68,7 +68,7 @@ export default function (context, componentOptions = {}) {
         loading,
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
 
     const Spinner = spinner(context, { variant, color, size });

bau-ui/paper/paper.js

@@ -39,14 +39,14 @@ export default function (context, options = {}) {
         color = options.color ?? "neutral",
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
     return div(
       {
         ...props,
         class: ["paper", size, className, options?.class, props?.class],
       },
-      ...children
+      children
     );
   };
 }

bau-ui/resizable/resizable.js

@@ -42,7 +42,7 @@ export default function (context, options = {}) {
   `;
 
   function PanelGroup(...args) {
-    let [props, ...children] = toPropsAndChildren(args);
+    let [props, children] = toPropsAndChildren(args);
 
     return section(
       {
@@ -54,7 +54,7 @@ export default function (context, options = {}) {
   }
 
   function Panel(...args) {
-    let [props, ...children] = toPropsAndChildren(args);
+    let [props, children] = toPropsAndChildren(args);
 
     return article(
       {
@@ -66,7 +66,7 @@ export default function (context, options = {}) {
   }
 
   function Handle(...args) {
-    let [props, ...children] = toPropsAndChildren(args);
+    let [props, children] = toPropsAndChildren(args);
 
     // The current position of mouse
     let _x = 0;

bau-ui/select/select.js

@@ -71,7 +71,7 @@ export default function (context, componentOptions = {}) {
         loading,
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
 
     const Spinner = spinner(context, { variant, color, size });

bau-ui/selectNative/selectNative.js

@@ -24,7 +24,7 @@ export default function (context, componentOptions = {}) {
         color = componentOptions.color ?? "neutral",
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
 
     return select(

bau-ui/skeleton/skeleton.js

@@ -43,14 +43,14 @@ export default function (context, options = {}) {
         color = options.color ?? "neutral",
         ...props
       },
-      ...children
+      children,
     ] = toPropsAndChildren(args);
     return div(
       {
         ...props,
         class: ["skeleton", size, className, options?.class, props?.class],
       },
-      ...children
+      children
     );
   };
 }