@granularjs/ui 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granularjs/ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "90+ production-ready UI components for Granular. Dark/light themes, CSS variables, accessible, zero dependencies beyond @granularjs/core.",
   "type": "module",
   "main": "./dist/granular-ui.min.js",

package/src/components/Container.js

@@ -7,6 +7,7 @@ export function Container(...args) {
   return Div(
     {
       ...rest,
+      style,
       className: cx(
         'g-ui-container',
         classFlag('g-ui-container-fluid', fluid),

package/src/components/List.js

@@ -17,7 +17,13 @@ export function List(...args) {
     value && typeof value === 'object' && typeof value.tagName === 'string' &&
     value.tagName.toLowerCase() === 'li';
   const wrapChild = (child) => {
+    console.log('INFO ABOUT ITEM', child,
+      typeof child,
+      typeof child?.tagName,
+      child?.tagName?.toLowerCase()
+    );
     const wrapValue = (value) => {
+      if (value?.nodeType === 'granular-list-node') return value;
       if (value == null || value === false) return null;
       if (Array.isArray(value)) return value.map((item) => wrapValue(item));
       if (isListItemNode(value)) return value;
@@ -29,7 +35,7 @@ export function List(...args) {
     }
     return wrapValue(child);
   };
-  const listChildren = children.map((child) => wrapChild(child));
+  const listChildren = when(children, () => children.map((child) => wrapChild(child)));
   const listProps = {
     ...rest,
     className: cx(

package/src/components/SegmentedControl.js

@@ -1,4 +1,4 @@
-import { Div, after, state } from '@granularjs/core';
+import { Div, after, state, list } from '@granularjs/core';
 import { cx, splitPropsChildren, classVar, resolveValue } from '../utils.js';
 
 export function SegmentedControl(...args) {
@@ -18,22 +18,22 @@ export function SegmentedControl(...args) {
   return Div(
     { ...rest, className: cx(scroll && 'g-ui-segmented-scroll') },
     Div(
-      { className: cx('g-ui-segmented', classVar('g-ui-segmented-size-', size, 'sm'), props.className ?? className) },
-      data.map((item) =>
+      { className: cx('g-ui-segmented', classVar('g-ui-segmented-size-', size, 'sm'), className) },
+      list(data, ((item) =>
         Div(
           {
             className: cx(
               'g-ui-segmented-item',
-            after(currentState).compute((current) => {
-              if (item.value === current) return 'g-ui-segmented-active';
-              return '';
-            })
+              after(currentState).compute((current) => {
+                if (item.get().value === current) return 'g-ui-segmented-active';
+                return '';
+              })
             ),
-            onClick: () => setValue(item.value),
+            onClick: () => setValue(item.get().value),
           },
           item.label
         )
-      )
+      ))
     )
   );
 }

package/src/index.js

@@ -3,7 +3,7 @@ import { ensureStyles } from './theme/styles.js';
 ensureStyles();
 
 export { setThemeVars, setThemeMode } from './theme/theme.js';
-export { cx } from './utils.js';
+export { cx, classVar, classFlag, classMap, splitPropsChildren } from './utils.js';
 export { Button } from './components/Button.js';
 export { Text } from './components/Text.js';
 export { Title } from './components/Title.js';

package/src/theme/styles.js

@@ -839,8 +839,8 @@ body {
 .g-ui-button-size-xs { font-size: 12px; height: 30px; padding: 0 var(--g-ui-space-8); }
 .g-ui-button-size-sm { font-size: 13px; height: 36px; padding: 0 var(--g-ui-space-10); }
 .g-ui-button-size-md { font-size: 14px; height: 42px; padding: 0 var(--g-ui-space-10); }
-.g-ui-button-size-lg { font-size: 15px; height: 50px; padding: 0 var(--g-ui-space-11); }
-.g-ui-button-size-xl { font-size: 16px; height: 60px; padding: 0 var(--g-ui-space-12); }
+.g-ui-button-size-lg { font-size: 15px; height: 50px; padding: 0 var(--g-ui-space-12); }
+.g-ui-button-size-xl { font-size: 16px; height: 60px; padding: 0 var(--g-ui-space-14); }
 
 .g-ui-input-wrapper {
   width: 100%;
@@ -1034,22 +1034,22 @@ body {
 .g-ui-checkbox-size-xs .g-ui-checkbox-indeterminate svg { width: 16px; height: 16px; }
 .g-ui-checkbox-size-sm .g-ui-checkbox-indeterminate { top:3px; left:4px;  }
 .g-ui-checkbox-size-sm .g-ui-checkbox-indeterminate svg { width: 20px; height:20px;  }
-.g-ui-checkbox-size-md .g-ui-checkbox-indeterminate { top:3px; left:4px; }
+.g-ui-checkbox-size-md .g-ui-checkbox-indeterminate { top:0px; left:0px; }
 .g-ui-checkbox-size-md .g-ui-checkbox-indeterminate svg { width: 24px; height: 24px; }
 .g-ui-checkbox-size-lg .g-ui-checkbox-indeterminate { top:4px; left:5px; }
 .g-ui-checkbox-size-lg .g-ui-checkbox-indeterminate svg { width: 28px; height: 28px; }
 .g-ui-checkbox-size-xl .g-ui-checkbox-indeterminate { top:5px; left:6px; }
 .g-ui-checkbox-size-xl .g-ui-checkbox-indeterminate svg { width: 32px; height: 32px; }
 
-.g-ui-checkbox-size-xs .g-ui-checkbox-checked { top: 2px;left:4px; }
+.g-ui-checkbox-size-xs .g-ui-checkbox-checked { top: 0px;left:0.5px; }
 .g-ui-checkbox-size-xs .g-ui-checkbox-checked svg { width: 16px; height: 16px; }
-.g-ui-checkbox-size-sm .g-ui-checkbox-checked { top:3px; left:4px;  }
+.g-ui-checkbox-size-sm .g-ui-checkbox-checked { top:0px; left:0.3px;  }
 .g-ui-checkbox-size-sm .g-ui-checkbox-checked svg { width: 20px; height:20px;  }
-.g-ui-checkbox-size-md .g-ui-checkbox-checked { top:3px; left:4px; }
+.g-ui-checkbox-size-md .g-ui-checkbox-checked { top:0px; left:0px; }
 .g-ui-checkbox-size-md .g-ui-checkbox-checked svg { width: 24px; height: 24px; }
-.g-ui-checkbox-size-lg .g-ui-checkbox-checked { top:4px; left:5px; }
+.g-ui-checkbox-size-lg .g-ui-checkbox-checked { top:1px; left:1px; }
 .g-ui-checkbox-size-lg .g-ui-checkbox-checked svg { width: 28px; height: 28px; }
-.g-ui-checkbox-size-xl .g-ui-checkbox-checked { top:5px; left:6px; }
+.g-ui-checkbox-size-xl .g-ui-checkbox-checked { top:2px; left:3px; }
 .g-ui-checkbox-size-xl .g-ui-checkbox-checked svg { width: 32px; height: 32px; }
 
 .g-ui-switch {

package/types/index.d.ts

@@ -1,4 +1,3 @@
-export { cx } from "./utils.js";
 export { Button } from "./components/Button.js";
 export { Text } from "./components/Text.js";
 export { Title } from "./components/Title.js";
@@ -91,3 +90,4 @@ export { BottomBar } from "./components/BottomBar.js";
 export { EventCalendar } from "./components/EventCalendar.js";
 export { useDisclosure } from "./hooks/useDisclosure.js";
 export { setThemeVars, setThemeMode } from "./theme/theme.js";
+export { cx, classVar, classFlag, classMap, splitPropsChildren } from "./utils.js";