@granularjs/ui 0.1.0

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@granularjs/ui",
+  "version": "0.1.0",
+  "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",
+  "module": "./dist/granular-ui.min.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/granular-ui.min.js",
+      "default": "./dist/granular-ui.min.js"
+    }
+  },
+  "files": [
+    "dist",
+    "types",
+    "src"
+  ],
+  "scripts": {
+    "build:minify": "mkdir -p ./dist/fonts && cp -R src/theme/fonts/* ./dist/fonts/ && npx -y esbuild src/index.js --bundle --minify --sourcemap --format=esm --external:@granularjs/core --outfile=./dist/granular-ui.min.js && npx -y -p typescript@latest tsc -p tsconfig.json",
+    "build:debug": "mkdir -p ./dist/fonts && cp -R src/theme/fonts/* ./dist/fonts/ && npx -y esbuild src/index.js --bundle --sourcemap --format=esm --external:@granularjs/core --outfile=./dist/granular-ui.js && npx -y -p typescript@latest tsc -p tsconfig.json",
+    "build:watch": "npx -y esbuild src/index.js --bundle --minify --sourcemap --format=esm --external:@granularjs/core --outfile=./dist/granular-ui.min.js --watch",
+    "version": "npm run build:minify && git add -A",
+    "postversion": "git push && git push --tags"
+  },
+  "peerDependencies": {
+    "@granularjs/core": "^1.0.0"
+  },
+  "author": "Guilherme Ferreira",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zerobytes/granular-ui.git"
+  },
+  "homepage": "https://granular.web.app",
+  "bugs": {
+    "url": "https://github.com/zerobytes/granular-ui/issues"
+  },
+  "keywords": [
+    "granular",
+    "granularjs",
+    "ui",
+    "components",
+    "component-library",
+    "design-system",
+    "theme",
+    "dark-mode",
+    "reactive",
+    "frontend",
+    "javascript",
+    "no-vdom"
+  ]
+}

package/src/components/Accordion.js

@@ -0,0 +1,25 @@
+import { Div } from '@granularjs/core';
+import { state, when, after } from '@granularjs/core';
+import { cx, splitPropsChildren, resolveBool } from '../utils.js';
+
+export function Accordion(...args) {
+  const { props, children } = splitPropsChildren(args, { opened: false });
+  const { opened, className, ...rest } = props;
+  const openedState = state(resolveBool(opened));
+
+  after(opened).change((next) => {
+    openedState.set(resolveBool(next));
+  });
+
+  const toggle = () => {
+    openedState.set(!openedState.get());
+  };
+
+  const header = children[0];
+  const content = children[1];
+  return Div(
+    { ...rest, className: cx('g-ui-accordion', className) },
+    Div({ className: 'g-ui-accordion-header', onClick: toggle }, header),
+    when(openedState, () => Div({ className: 'g-ui-accordion-content' }, content))
+  );
+}

package/src/components/ActionIcon.js

@@ -0,0 +1,20 @@
+import { Button } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar } from '../utils.js';
+
+export function ActionIcon(...args) {
+  const { props, children } = splitPropsChildren(args, { size: 'md', variant: 'filled' });
+  const { size, variant, className, ...rest } = props;
+  return Button(
+    {
+      ...rest,
+      type: 'button',
+      className: cx(
+        'g-ui-action-icon',
+        classVar('g-ui-action-icon-size-', size, 'md'),
+        classVar('g-ui-action-icon-', variant, 'filled'),
+        className
+      ),
+    },
+    children
+  );
+}

package/src/components/Affix.js

@@ -0,0 +1,11 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Affix(...args) {
+  const { props, children } = splitPropsChildren(args, { position: 'bottom-right' });
+  const { position, className, ...rest } = props;
+  return Div(
+    { ...rest, className: cx('g-ui-affix', [position, (value) => `g-ui-affix-${value}`], className) },
+    children
+  );
+}

package/src/components/Alert.js

@@ -0,0 +1,33 @@
+import { Button, Div, Span, after, when } from '@granularjs/core';
+import { cx, splitPropsChildren, resolveBool } from '../utils.js';
+
+export function Alert(...args) {
+  const { props, rawProps, children } = splitPropsChildren(args, { color: 'blue' });
+  const {
+    title,
+    color,
+    icon,
+    withCloseButton,
+    className,
+    ...rest
+  } = props;
+  const { onClose } = rawProps;
+
+  const hasContent = after(title, withCloseButton).compute(([title, showClose]) => {
+    return title || showClose
+  });
+  const hasIcon = after(icon).compute((icon) => {
+    return icon !== undefined
+  });
+
+  return Div(
+    { ...rest, className: cx('g-ui-alert', [color, (value) => `g-ui-alert-${value}`], className) },
+    Div(
+      { className: 'g-ui-alert-header' },
+      when(icon, () => Span({ className: 'g-ui-alert-icon' }, icon)),
+      when(title, () => Div({ className: 'g-ui-alert-title' }, title)),
+      when(withCloseButton, () => Button({ type: 'button', className: 'g-ui-alert-close', onClick: () => onClose?.() }, '×'))
+    ),
+    children
+  );
+}

package/src/components/Anchor.js

@@ -0,0 +1,8 @@
+import { A } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Anchor(...args) {
+  const { props, children } = splitPropsChildren(args);
+  const { className, ...rest } = props;
+  return A({ ...rest, className: cx('g-ui-anchor', className) }, children);
+}

package/src/components/AppBar.js

@@ -0,0 +1,14 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar } from '../utils.js';
+
+export function AppBar(...args) {
+  const { props, children } = splitPropsChildren(args, { position: 'sticky' });
+  const { position, className, ...rest } = props;
+  return Div(
+    {
+      ...rest,
+      className: cx('g-ui-appbar', classVar('g-ui-appbar-', position, 'sticky'), className),
+    },
+    children
+  );
+}

package/src/components/Avatar.js

@@ -0,0 +1,13 @@
+import { Div, Img, when } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Avatar(...args) {
+  const { props, children } = splitPropsChildren(args, { size: 'md', alt: '' });
+  const { src, size, alt, className, ...rest } = props;
+  return Div(
+    { ...rest, className: cx('g-ui-avatar', [size, (value) => `g-ui-avatar-size-${value}`], className) },
+    when(src, () => Img({ className: 'g-ui-avatar-img', src, alt }), () => {
+      return children;
+    })
+  );
+}

package/src/components/AvatarGroup.js

@@ -0,0 +1,8 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function AvatarGroup(...args) {
+  const { props, children } = splitPropsChildren(args);
+  const { className, ...rest } = props;
+  return Div({ ...rest, className: cx('g-ui-avatar-group', className) }, children);
+}

package/src/components/Badge.js

@@ -0,0 +1,22 @@
+import { Span } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, classFlag, classMap } from '../utils.js';
+
+export function Badge(...args) {
+  const { props, children } = splitPropsChildren(args, { variant: 'filled', size: 'md' });
+  const { variant, size, className, dot, style, ...rest } = props;
+  const dotClass = classMap(variant, { dot: 'g-ui-badge-dot' });
+  return Span(
+    {
+      ...rest,
+      className: cx(
+        'g-ui-badge',
+        classVar('g-ui-badge-variant-', variant, 'filled'),
+        classVar('g-ui-badge-size-', size, 'md'),
+        classFlag('g-ui-badge-dot', dot),
+        dotClass,
+        className
+      ),
+    },
+    children
+  );
+}

package/src/components/BadgeGroup.js

@@ -0,0 +1,8 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function BadgeGroup(...args) {
+  const { props, children } = splitPropsChildren(args);
+  const { className, ...rest } = props;
+  return Div({ ...rest, className: cx('g-ui-badge-group', className) }, children);
+}

package/src/components/Blockquote.js

@@ -0,0 +1,8 @@
+import { Blockquote as HtmlBlockquote } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Blockquote(...args) {
+  const { props, children } = splitPropsChildren(args);
+  const { className, ...rest } = props;
+  return HtmlBlockquote({ ...rest, className: cx('g-ui-blockquote', className) }, children);
+}

package/src/components/BottomBar.js

@@ -0,0 +1,43 @@
+import { Button, Div, Span, when } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, classFlag } from '../utils.js';
+
+export function BottomBar(...args) {
+  const { props, children } = splitPropsChildren(args, { grow: true });
+  const { grow, className, ...rest } = props;
+
+  return Div(
+    {
+      ...rest,
+      className: cx(
+        'g-ui-bottombar',
+        classFlag('g-ui-bottombar-grow', grow),
+        className
+      ),
+    },
+    children
+  );
+}
+
+BottomBar.Action = function BottomBarAction(...args) {
+  const { props, rawProps, children } = splitPropsChildren(args, { variant: 'subtle' });
+  const { icon, label, active, disabled, variant, className, ...rest } = props;
+  const { onClick } = rawProps;
+
+  return Button(
+    {
+      ...rest,
+      className: cx(
+        'g-ui-bottombar-action',
+        classVar('g-ui-bottombar-action-variant-', variant, 'subtle'),
+        classFlag('g-ui-bottombar-action-active', active),
+        classFlag('g-ui-bottombar-action-disabled', disabled),
+        className
+      ),
+      onClick,
+      disabled,
+    },
+    when(icon, () => Span({ className: 'g-ui-bottombar-action-icon' }, icon)),
+    when(label, () => Span({ className: 'g-ui-bottombar-action-label' }, label)),
+    children
+  );
+};

package/src/components/Breadcrumbs.js

@@ -0,0 +1,19 @@
+import { Nav, Span } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Breadcrumbs(...args) {
+  const { props, children } = splitPropsChildren(args, { separator: '/' });
+  const { separator, className, ...rest } = props;
+  const items = [];
+  if (Array.isArray(children)) items.push(...children);
+  else items.push(children);
+  const filtered = items.filter(Boolean);
+  const nodes = [];
+  filtered.forEach((item, idx) => {
+    nodes.push(item);
+    if (idx < filtered.length - 1) {
+      nodes.push(Span({ className: 'g-ui-breadcrumbs-separator' }, separator));
+    }
+  });
+  return Nav({ ...rest, className: cx('g-ui-breadcrumbs', className) }, nodes);
+}

package/src/components/Burger.js

@@ -0,0 +1,13 @@
+import { Span } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Burger(...args) {
+  const { props } = splitPropsChildren(args);
+  const { opened, className, ...rest } = props;
+  return Span(
+    { ...rest, className: cx('g-ui-burger', [opened, 'g-ui-burger-open'], className) },
+    Span(''),
+    Span(''),
+    Span('')
+  );
+}

package/src/components/Button.js

@@ -0,0 +1,37 @@
+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 {
+    variant,
+    size,
+    fullWidth,
+    loading,
+    leftSection,
+    rightSection,
+    className,
+    disabled,
+    ...rest
+  } = props;
+
+  const isDisabled = after(disabled, loading).compute(([disabled, loading]) => disabled || loading);
+
+  return HtmlButton(
+    {
+      ...rest,
+      disabled: isDisabled,
+      className: cx(
+        'g-ui-button',
+        classVar('g-ui-button-variant-', variant, 'filled'),
+        classVar('g-ui-button-size-', size, 'md'),
+        classFlag('g-ui-button-full', fullWidth),
+        classFlag('g-ui-button-loading', loading),
+        className
+      ),
+    },
+    when(leftSection, () => Span({ className: 'g-ui-button-section-left' }, leftSection)),
+    when(loading, () => Span('Loading...'), () => children),
+    when(rightSection, () => Span({ className: 'g-ui-button-section-right' }, rightSection))
+  );
+}

package/src/components/Calendar.js

@@ -0,0 +1,109 @@
+import { Button, Div, state, after } from '@granularjs/core';
+import { cx, splitPropsChildren, resolveValue, classVar } from '../utils.js';
+import { forwardSvg, backwardSvg } from '../theme/icons.js';
+import { ActionIcon } from './ActionIcon.js';
+import { Icon } from './Icon.js';
+
+const weekDays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
+export function Calendar(...args) {
+  const { props, rawProps } = splitPropsChildren(args, { size: 'md' });
+  const { value, className, size, ...rest } = props;
+  const { onChange } = rawProps;
+  const resolveDate = (next) => {
+    const resolved = resolveValue(next);
+    if (resolved instanceof Date) return resolved;
+    if (resolved == null) return null;
+    const parsed = new Date(resolved);
+    if (Number.isNaN(parsed.getTime())) return null;
+    return parsed;
+  };
+  const currentState = state(resolveDate(value) ?? new Date());
+  const viewState = state(new Date(currentState.get()));
+
+  after(value).change((next) => {
+    const resolved = resolveDate(next);
+    if (resolved == null) return;
+    currentState.set(resolved);
+    viewState.set(new Date(resolved));
+  });
+
+  const createDate = (year, month, day) => {
+    const maxDay = new Date(year, month + 1, 0).getDate();
+    return new Date(year, month, Math.min(day, maxDay));
+  };
+
+  const setDate = (day) => {
+    const current = viewState.get();
+    const next = createDate(current.getFullYear(), current.getMonth(), day);
+    currentState.set(next);
+    viewState.set(next);
+    onChange?.(next);
+  };
+
+  const shiftMonth = (delta) => {
+    const current = viewState.get();
+    const next = createDate(current.getFullYear(), current.getMonth() + delta, current.getDate());
+    viewState.set(next);
+  };
+
+  const shiftYear = (delta) => {
+    const current = viewState.get();
+    const next = createDate(current.getFullYear() + delta, current.getMonth(), current.getDate());
+    viewState.set(next);
+  };
+
+  const monthLabel = after(viewState).compute((current) => current.toLocaleString('default', { month: 'long' }));
+  const yearLabel = after(viewState).compute((current) => String(current.getFullYear()));
+  const gridCells = after(viewState, currentState).compute(([current, selected]) => {
+    const year = current.getFullYear();
+    const month = current.getMonth();
+    const first = new Date(year, month, 1);
+    const start = first.getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const cells = [];
+    for (let i = 0; i < start; i += 1) cells.push({ muted: true, label: '' });
+    for (let d = 1; d <= daysInMonth; d += 1) cells.push({ label: d });
+    return [
+      ...weekDays.map((d) => Div({ className: 'g-ui-calendar-cell g-ui-calendar-cell-muted' }, d)),
+      ...cells.map((c) =>
+        Div(
+          {
+            className: cx(
+              'g-ui-calendar-cell',
+              c.muted && 'g-ui-calendar-cell-muted',
+              c.label &&
+                selected.getFullYear() === year &&
+                selected.getMonth() === month &&
+                c.label === selected.getDate() &&
+                'g-ui-calendar-cell-active'
+            ),
+            onClick: () => c.label && setDate(c.label),
+          },
+          c.label
+        )
+      ),
+    ];
+  });
+
+  return Div(
+    { ...rest, className: cx('g-ui-calendar', className, classVar('g-ui-calendar-size-', size, 'md')) },
+    Div(
+      { className: 'g-ui-calendar-header' },
+      ActionIcon(
+        { size: 'xs', variant: 'subtle', className: 'g-ui-calendar-nav', onClick: () => shiftMonth(-1) },
+        Icon({ size: 'sm', className: 'g-ui-calendar-nav-icon', innerHTML: backwardSvg })
+      ),
+      Div(
+        { className: 'g-ui-calendar-title-group' },
+        Button({ type: 'button', className: 'g-ui-calendar-title-button', onClick: () => shiftMonth(1) }, monthLabel),
+        Button({ type: 'button', className: 'g-ui-calendar-title-button', onClick: () => shiftYear(1) }, yearLabel)
+      ),
+      ActionIcon(
+        { size: 'xs', variant: 'subtle', className: 'g-ui-calendar-nav', onClick: () => shiftMonth(1) },
+        Icon({ size: 'sm', className: 'g-ui-calendar-nav-icon', innerHTML: forwardSvg })
+      )
+    ),
+    Div({ className: 'g-ui-calendar-grid' }, gridCells)
+  );
+}

package/src/components/Card.js

@@ -0,0 +1,40 @@
+import { Div, list, when, after } 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;
+
+  return Div(
+    when(title, () => Div({ className: 'g-ui-card-title' }, title)),
+    when(content, () => Div({ className: 'g-ui-card-content' }, content)),
+    when(actions, () => Div(
+      { className: 'g-ui-card-actions' },
+      list(actions, (action) => Button(
+        {
+          className: 'g-ui-card-action',
+          onClick: (e) => action.onClick.get()?.(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.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/Center.js

@@ -0,0 +1,8 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Center(...args) {
+  const { props, children } = splitPropsChildren(args);
+  const { className, ...rest } = props;
+  return Div({ ...rest, className: cx('g-ui-center', className) }, children);
+}

package/src/components/Checkbox.js

@@ -0,0 +1,46 @@
+import { Div, Input, Label, Span, when, state, after } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, resolveBool } from '../utils.js';
+import { checkedSvg, indeterminateSvg } from '../theme/icons.js';
+
+export function Checkbox(...args) {
+  const { props, rawProps } = splitPropsChildren(args, { size: 'md' });
+  const { checked, label, description, size, indeterminate, className, style, inputProps, ...rest } = props;
+  const { onChange } = rawProps;
+  const currentState = state(resolveBool(checked));
+
+  after(checked).change((next) => {
+    if (next == null) return;
+    currentState.set(!!next);
+    onChange?.(next);
+  });
+
+  const control = Label(
+    { className: 'g-ui-checkbox-control' },
+    Input({
+      type: 'checkbox',
+      indeterminate: indeterminate,
+      checked: currentState,
+      className: cx(
+        'g-ui-checkbox-input',
+        classVar('g-ui-checkbox-size-', size, 'md'),
+        inputProps?.className
+      ),
+      ...rest,
+    }),
+    when(currentState,
+      () => Div({ className: 'g-ui-checkbox-checked', innerHTML: checkedSvg }),
+      () => {
+        if (!currentState.get() && indeterminate.get()) {
+          return Div({ className: 'g-ui-checkbox-indeterminate', innerHTML: indeterminateSvg });
+        }
+      }
+    ),
+    when(label, () => Span({ className: 'g-ui-checkbox-label' }, label))
+  );
+
+  return Div(
+    { className: cx('g-ui-checkbox', classVar('g-ui-checkbox-size-', size, 'md'), className) },
+    control,
+    when(description, () => Span({ className: 'g-ui-checkbox-description' }, description))
+  );
+}

package/src/components/CheckboxGroup.js

@@ -0,0 +1,8 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function CheckboxGroup(...args) {
+  const { props, children } = splitPropsChildren(args);
+  const { className, ...rest } = props;
+  return Div({ ...rest, className: cx('g-ui-checkbox-group', className) }, children);
+}

package/src/components/Chip.js

@@ -0,0 +1,35 @@
+import { Button, after, state } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar } from '../utils.js';
+
+export function Chip(...args) {
+  const { props, rawProps, children } = splitPropsChildren(args, { size: 'md', variant: 'filled' });
+  const { checked, size, variant, className, ...rest } = props;
+  const { onChange } = rawProps;
+  const currentState = state(!!checked);
+  after(checked).change((next) => {
+    if (next == null) return;
+    currentState.set(!!next);
+  });
+  const setChecked = (next) => {
+    currentState.set(next);
+    onChange?.(next);
+  };
+  return Button(
+    {
+      ...rest,
+      type: 'button',
+      className: cx(
+        'g-ui-chip',
+        classVar('g-ui-chip-size-', size, 'md'),
+        classVar('g-ui-chip-variant-', variant, 'filled'),
+        after(currentState).compute((current) => {
+          if (current) return 'g-ui-chip-active';
+          return '';
+        }),
+        className
+      ),
+      onClick: () => setChecked(!currentState.get()),
+    },
+    children
+  );
+}

package/src/components/Code.js

@@ -0,0 +1,8 @@
+import { Code as HtmlCode } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Code(...args) {
+  const { props, children } = splitPropsChildren(args);
+  const { className, ...rest } = props;
+  return HtmlCode({ ...rest, className: cx('g-ui-code', className) }, children);
+}

package/src/components/Col.js

@@ -0,0 +1,8 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Col(...args) {
+  const { props, children } = splitPropsChildren(args, { span: 12 });
+  const { span, className, ...rest } = props;
+  return Div({ ...rest, className: cx([span, (value) => `g-ui-col-span-${value}`], className) }, children);
+}

package/src/components/Collapse.js

@@ -0,0 +1,8 @@
+import { Div, when } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function Collapse(...args) {
+  const { props, children } = splitPropsChildren(args);
+  const { opened, className, ...rest } = props;
+  return when(opened, () => Div({ ...rest, className: cx('g-ui-collapse', className) }, children));
+}

package/src/components/Container.js

@@ -0,0 +1,19 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, classFlag } from '../utils.js';
+
+export function Container(...args) {
+  const { props, children } = splitPropsChildren(args, { size: 'md' });
+  const { size, fluid, className, style, ...rest } = props;
+  return Div(
+    {
+      ...rest,
+      className: cx(
+        'g-ui-container',
+        classFlag('g-ui-container-fluid', fluid),
+        classVar('g-ui-container-size-', size, 'md'),
+        className
+      ),
+    },
+    children
+  );
+}