@granularjs/ui 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granularjs/ui",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "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",
@@ -29,7 +29,7 @@
     "@granularjs/core": "^1.0.0"
   },
   "author": "Guilherme Ferreira",
-  "license": "MIT",
+  "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/zerobytes/granular-ui.git"

package/src/components/Accordion.js

@@ -1,17 +1,21 @@
 import { Div } from '@granularjs/core';
 import { state, when, after } from '@granularjs/core';
-import { cx, splitPropsChildren, resolveBool } from '../utils.js';
+import { cx, splitPropsChildren, resolveBool, isReactive } from '../utils.js';
 
 export function Accordion(...args) {
-  const { props, children } = splitPropsChildren(args, { opened: false });
+  const { props, rawProps, children } = splitPropsChildren(args, { opened: false });
   const { opened, className, ...rest } = props;
-  const openedState = state(resolveBool(opened));
+  const { opened: rawOpened } = rawProps;
+  const isControlledOutside = isReactive(rawOpened)
+  const openedState = isControlledOutside ? rawOpened : state(resolveBool(opened));
 
   after(opened).change((next) => {
+    if(isControlledOutside) return;
     openedState.set(resolveBool(next));
   });
 
   const toggle = () => {
+    if(isControlledOutside) return;
     openedState.set(!openedState.get());
   };
 

package/src/components/Tabs.js

@@ -7,8 +7,10 @@ export function Tabs(...args) {
     orientation: 'horizontal',
     variant: 'default',
     sticky: true,
+    align: 'left',
+    size: 'md'
   });
-  const { value, tabs, orientation, variant, sticky, className, style } = props;
+  const { value, tabs, orientation, variant, sticky, className, style, align, size } = props;
   const { onChange } = rawProps;
 
   const currentState = state(resolveValue(value) ?? resolveValue(tabs)?.[0]?.value ?? '');
@@ -161,13 +163,15 @@ export function Tabs(...args) {
 
   return Div(
     Div({
-        className: cx(
-          'g-ui-tabs',
-          classMap(orientation, { vertical: 'g-ui-tabs-vertical' }),
-          classVar('g-ui-tabs-variant-', variant, 'default'),
-          props.className ?? className
-        ),
-      },
+      className: cx(
+        'g-ui-tabs',
+        classMap(orientation, { vertical: 'g-ui-tabs-vertical' }),
+        classVar('g-ui-tabs-variant-', variant, 'default'),
+        classVar('g-ui-tabs-align-', align, 'left'),
+        classVar('g-ui-tabs-size-', size, 'md'),
+        props.className ?? className
+      ),
+    },
       Div({ node: sentinelNode }),
       Div({ style: spacerStyle }),
       Div({ node: listNode, className: 'g-ui-tabs-list', style: stickyStyle },

package/src/theme/styles.js

@@ -1323,6 +1323,45 @@ body .g-ui-card-shadow-lg { box-shadow: var(--g-ui-shadow-lg); }
   color: var(--g-ui-primary-fg);
 }
 
+.g-ui-tabs-vertical {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: var(--g-ui-space-16);
+}
+.g-ui-tabs-vertical .g-ui-tabs-list {
+  flex-direction: column;
+}
+.g-ui-tabs-align-left .g-ui-tabs-list {
+  justify-content: flex-start;
+}
+.g-ui-tabs-align-center .g-ui-tabs-list {
+  justify-content: center;
+}
+.g-ui-tabs-align-right .g-ui-tabs-list {
+  justify-content: flex-end;
+}
+.
+.g-ui-tabs-size-xs .g-ui-tabs-tab {
+  padding: var(--g-ui-space-6) var(--g-ui-space-10);
+  font-size: 12px;
+}
+.g-ui-tabs-size-sm .g-ui-tabs-tab {
+  padding: var(--g-ui-space-8) var(--g-ui-space-12);
+  font-size:
+}
+.g-ui-tabs-size-md .g-ui-tabs-tab {
+  padding: var(--g-ui-space-10) var(--g-ui-space-14);
+  font-size: 16px;
+}
+.g-ui-tabs-size-lg .g-ui-tabs-tab {
+  padding: var(--g-ui-space-12) var(--g-ui-space-16);
+  font-size: 18px;
+}
+.g-ui-tabs-size-xl .g-ui-tabs-tab {
+  padding: var(--g-ui-space-14) var(--g-ui-space-20);
+  font-size: 20px;
+}
+
 .g-ui-table {
   width: 100%;
   border-collapse: collapse;
@@ -3020,14 +3059,6 @@ body .g-ui-card-shadow-lg { box-shadow: var(--g-ui-shadow-lg); }
 }
 .g-ui-toast-title { font-weight: 600; }
 
-.g-ui-tabs-vertical {
-  display: grid;
-  grid-template-columns: 200px 1fr;
-  gap: var(--g-ui-space-16);
-}
-.g-ui-tabs-vertical .g-ui-tabs-list {
-  flex-direction: column;
-}
 
 .g-ui-drawer-shadowed {
   box-shadow: var(--g-ui-shadow);

package/src/utils.js

@@ -1,6 +1,6 @@
 import { Renderer, isSignal, isState, isStatePath, isComputed, resolve, computed, after, concat } from '@granularjs/core';
 
-function isReactive(value) {
+export function isReactive(value) {
   return isSignal(value) || isState(value) || isStatePath(value) || isComputed(value);
 }
 
@@ -13,6 +13,7 @@ export function toPx(value) {
   return typeof value === 'number' ? `${value}px` : value;
 }
 
+
 export function splitPropsChildren(args, defaults) {
   const props = {};
   const children = [];

package/types/utils.d.ts

@@ -1,3 +1,4 @@
+export function isReactive(value: any): any;
 export function cx(...values: any[]): any;
 export function toPx(value: any): any;
 export function splitPropsChildren(args: any, defaults: any): {