@granularjs/ui 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granularjs/ui",
-  "version": "0.1.0",
+  "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/Button.js

@@ -2,7 +2,7 @@ import { Button as HtmlButton, Span, when, after} from '@granularjs/core';
 import { cx, splitPropsChildren, resolveBool, classVar, classFlag } from '../utils.js';
 
 export function Button(...args) {
-  const { props, children } = splitPropsChildren(args, { variant: 'filled', size: 'md' });
+  const { props, children } = splitPropsChildren(args, { variant: 'filled', size: 'md', justify: 'center' });
   const {
     variant,
     size,
@@ -12,6 +12,7 @@ export function Button(...args) {
     rightSection,
     className,
     disabled,
+    justify,
     ...rest
   } = props;
 
@@ -24,6 +25,7 @@ export function Button(...args) {
       className: cx(
         'g-ui-button',
         classVar('g-ui-button-variant-', variant, 'filled'),
+        classVar('g-ui-justify-', justify, 'center'),
         classVar('g-ui-button-size-', size, 'md'),
         classFlag('g-ui-button-full', fullWidth),
         classFlag('g-ui-button-loading', loading),

package/src/components/Card.js

@@ -1,40 +1,41 @@
-import { Div, list, when, after } from '@granularjs/core';
+import { Div, list, when, after, Span } from '@granularjs/core';
 import { cx, splitPropsChildren, classVar } from '../utils.js';
 import { Button } from './Button.js';
 
 export function Card(...args) {
   const { props, children } = splitPropsChildren(args, { padding: 'md', radius: 'md', shadow: 'none', border: 'default' });
-  const { title, content, actions, border,  padding, radius, shadow, className, style, ...rest } = props;
+  const { title, content, actions, border, padding, radius, shadow, className, style, ...rest } = props;
 
   return Div(
+    { style },
     when(title, () => Div({ className: 'g-ui-card-title' }, title)),
     when(content, () => Div({ className: 'g-ui-card-content' }, content)),
+    {
+      className: cx(
+        'g-ui-card',
+        classVar('g-ui-card-border-', border, 'md'),
+        classVar('g-ui-card-padding-', padding, 'md'),
+        classVar('g-ui-card-radius-', radius, 'md'),
+        classVar('g-ui-card-shadow-', shadow, 'md'),
+        className
+      ),
+      ...rest,
+    },
+    children,
     when(actions, () => Div(
       { className: 'g-ui-card-actions' },
       list(actions, (action) => Button(
         {
           className: 'g-ui-card-action',
-          onClick: (e) => action.onClick.get()?.(e),
+          onClick: (e) => action.get().onClick?.(e),
           leftSection: action.leftSection,
           rightSection: action.rightSection,
           size: after(action.size).compute(s => s || 'sm'),
           variant: after(action.variant).compute(v => v || 'outline'),
-          ...(action.props.get() || {}),
+          ...(action.get().props || {}),
         },
         action.label
       ))
     )),
-    {
-      className: cx(
-        'g-ui-card',
-        classVar('g-ui-card-border-', border, 'md'),
-        classVar('g-ui-card-padding-', padding, 'md'),
-        classVar('g-ui-card-radius-', radius, 'md'),
-        classVar('g-ui-card-shadow-', shadow, 'md'),
-        className
-      ),
-      ...rest,
-    },
-    children
   );
 }

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/components/Tabs.js

@@ -160,8 +160,7 @@ export function Tabs(...args) {
   });
 
   return Div(
-    Div(
-      {
+    Div({
         className: cx(
           'g-ui-tabs',
           classMap(orientation, { vertical: 'g-ui-tabs-vertical' }),
@@ -171,22 +170,20 @@ export function Tabs(...args) {
       },
       Div({ node: sentinelNode }),
       Div({ style: spacerStyle }),
-      Div(
-        { node: listNode, className: 'g-ui-tabs-list', style: stickyStyle },
+      Div({ node: listNode, className: 'g-ui-tabs-list', style: stickyStyle },
         list(tabs, (tab) =>
           Button(
             {
               className: after(currentState, tab.value).compute(([v, tabVal]) =>
                 cx('g-ui-tabs-tab', tabVal === v && 'g-ui-tabs-tab-active')
               ),
-              onClick: () => setValue(tab.value.get()),
+              onClick: () => setValue(tab.get().value),
             },
             tab.label
           )
         )
       ),
-      Div(
-        { className: 'g-ui-tabs-panel' },
+      Div({ className: 'g-ui-tabs-panel' },
         when(currentState, () => tabs.get()?.find((tab) => tab.value === currentState.get())?.content ?? null)
       )
     )

package/src/components/Text.js

@@ -3,7 +3,7 @@ import { cx, splitPropsChildren, classVar, classFlag, classMap } from '../utils.
 
 export function Text(...args) {
   const { props, children } = splitPropsChildren(args, { size: 'md' });
-  const { size, weight, color, dimmed, align, className, style, ...rest } = props;
+  const { size, weight, color, dimmed, align, ellipsis, className, style, ...rest } = props;
   const weightClass = classMap(weight, {
     bold: 'g-ui-text-weight-700',
     semibold: 'g-ui-text-weight-600',
@@ -27,10 +27,12 @@ export function Text(...args) {
   return Span(
     {
       ...rest,
+      style,
       className: cx(
         'g-ui-text',
         classVar('g-ui-text-size-', size, 'md'),
         classFlag('g-ui-text-dimmed', dimmed),
+        classFlag('g-ui-text-ellipsis', ellipsis),
         weightClass,
         colorClass,
         alignClass,

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

@@ -819,7 +819,6 @@ body {
   line-height: 1;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
 }
 .g-ui-button:active { transform: translateY(1px); }
 .g-ui-button:disabled { opacity: 0.6; cursor: not-allowed; }
@@ -840,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%;
@@ -896,6 +895,11 @@ body {
   flex-direction: column;
   gap: var(--g-ui-space-6);
 }
+.g-ui-text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .g-ui-text-input-label {
   font-size: 13px;
   font-weight: 500;
@@ -961,6 +965,9 @@ body {
   padding: 0;
   width: 28px;
   height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .g-ui-modal-close svg {
   width: 16px;
@@ -1000,6 +1007,7 @@ body {
   background: var(--g-ui-bg);
   position: relative;
   transition: background-color .12s ease, border-color .12s ease;
+  cursor: pointer;
 }
 .g-ui-checkbox-input:focus-visible {
   outline: 2px solid var(--g-ui-primary);
@@ -1026,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 {
@@ -1080,14 +1088,14 @@ body {
   border-color: var(--g-ui-primary);
 }
 .g-ui-switch-input:checked::after {
-  transform: translateX(calc(var(--g-ui-switch-width, 36px) - var(--g-ui-switch-thumb, 14px) - (var(--g-ui-switch-offset, 2px) * 2)));
+  transform: translateX(calc(var(--g-ui-switch-width, 36px) - var(--g-ui-switch-thumb, 14px) - (var(--g-ui-switch-offset, 2px) * 2) - 2px));
 }
 .g-ui-switch-label { font-size: 14px; }
-.g-ui-switch-size-xs { --g-ui-switch-width: 32px; --g-ui-switch-height: 16px; --g-ui-switch-thumb: 12px; --g-ui-switch-offset: 2px; }
-.g-ui-switch-size-sm { --g-ui-switch-width: 38px; --g-ui-switch-height: 20px; --g-ui-switch-thumb: 14px; --g-ui-switch-offset: 3px; }
-.g-ui-switch-size-md { --g-ui-switch-width: 46px; --g-ui-switch-height: 24px; --g-ui-switch-thumb: 18px; --g-ui-switch-offset: 3px; }
-.g-ui-switch-size-lg { --g-ui-switch-width: 56px; --g-ui-switch-height: 30px; --g-ui-switch-thumb: 22px; --g-ui-switch-offset: 4px; }
-.g-ui-switch-size-xl { --g-ui-switch-width: 72px; --g-ui-switch-height: 36px; --g-ui-switch-thumb: 28px; --g-ui-switch-offset: 4px; }
+.g-ui-switch-size-xs { --g-ui-switch-width: 32px; --g-ui-switch-height: 16px; --g-ui-switch-thumb: 12px; --g-ui-switch-offset: 1px; }
+.g-ui-switch-size-sm { --g-ui-switch-width: 38px; --g-ui-switch-height: 20px; --g-ui-switch-thumb: 14px; --g-ui-switch-offset: 2px; }
+.g-ui-switch-size-md { --g-ui-switch-width: 46px; --g-ui-switch-height: 24px; --g-ui-switch-thumb: 18px; --g-ui-switch-offset: 2px; }
+.g-ui-switch-size-lg { --g-ui-switch-width: 56px; --g-ui-switch-height: 30px; --g-ui-switch-thumb: 22px; --g-ui-switch-offset: 3px; }
+.g-ui-switch-size-xl { --g-ui-switch-width: 72px; --g-ui-switch-height: 36px; --g-ui-switch-thumb: 28px; --g-ui-switch-offset: 3px; }
 
 .g-ui-select-root {
   position: relative;

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";