@granularjs/ui 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granularjs/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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/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/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; }
@@ -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);
@@ -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;