@granularjs/ui 0.1.0

package/src/components/PinInput.js

@@ -0,0 +1,218 @@
+import { Div, Input, after, state, when, list } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, resolveValue } from '../utils.js';
+
+export function PinInput(...args) {
+  const { props, rawProps } = splitPropsChildren(args, {
+    length: 4,
+    size: 'md',
+    type: 'alphanumeric',
+    mask: false,
+    placeholder: '○',
+    disabled: false,
+    error: false,
+    oneTimeCode: false,
+  });
+
+  const {
+    length,
+    value,
+    size,
+    type,
+    mask,
+    placeholder,
+    disabled,
+    error,
+    oneTimeCode,
+    className,
+  } = props;
+
+  const { onChange, onComplete } = rawProps;
+
+  const currentLength = state(resolveValue(length) ?? 4);
+  const getLength = () => currentLength.get();
+
+  after(length).change((next) => {
+    const newLen = resolveValue(next) ?? 4;
+    const oldLen = currentLength.get();
+    if (newLen === oldLen) return;
+    currentLength.set(newLen);
+    const currentValues = currentState.get();
+    const currentNodes = inputNodes.get();
+    currentState.set(Array.from({ length: newLen }, (_, i) => currentValues[i] ?? ''));
+    inputNodes.set(Array.from({ length: newLen }, (_, i) => currentNodes[i] ?? null));
+  });
+
+  const inputNodes = state(Array.from({ length: getLength() }, () => null));
+
+  const currentState = state(
+    Array.from({ length: getLength() }, (_, i) => {
+      const initial = resolveValue(value);
+      if (typeof initial === 'string') return initial[i] ?? '';
+      if (Array.isArray(initial)) return initial[i] ?? '';
+      return '';
+    })
+  );
+
+  after(value).change((next) => {
+    if (next == null) return;
+    const len = getLength();
+    if (typeof next === 'string') {
+      currentState.set(Array.from({ length: len }, (_, i) => next[i] ?? ''));
+    } else if (Array.isArray(next)) {
+      currentState.set(Array.from({ length: len }, (_, i) => next[i] ?? ''));
+    }
+  });
+
+  const getValueString = () => currentState.get().join('');
+
+  const setValue = (next) => {
+    currentState.set(next);
+    const str = next.join('');
+    onChange?.(str);
+    if (next.every((v) => v !== '') && next.length === getLength()) {
+      onComplete?.(str);
+    }
+  };
+
+  const focusInput = (index) => {
+    const len = getLength();
+    const nodes = inputNodes.get();
+    if (index >= 0 && index < len && nodes[index]) {
+      nodes[index].focus();
+      nodes[index].select();
+    }
+  };
+
+  const getTypeRegex = () => {
+    const t = resolveValue(type);
+    if (t === 'number') return /^[0-9]$/;
+    if (t instanceof RegExp) return t;
+    return /^[a-zA-Z0-9]$/;
+  };
+
+  const handleInput = (idx, ev) => {
+    const inputValue = ev.target.value;
+    const regex = getTypeRegex();
+
+    if (inputValue.length > 1) {
+      handlePaste(idx, inputValue);
+      return;
+    }
+
+    if (inputValue && !regex.test(inputValue)) {
+      ev.target.value = currentState.get()[idx] ?? '';
+      return;
+    }
+
+    const current = currentState.get().slice();
+    current[idx] = inputValue;
+    setValue(current);
+
+    if (inputValue && idx < getLength() - 1) {
+      focusInput(idx + 1);
+    }
+  };
+
+  const handlePaste = (startIdx, pastedValue) => {
+    const regex = getTypeRegex();
+    const chars = pastedValue.split('').filter((c) => regex.test(c));
+    const current = currentState.get().slice();
+    const len = getLength();
+
+    chars.forEach((char, i) => {
+      const targetIdx = startIdx + i;
+      if (targetIdx < len) {
+        current[targetIdx] = char;
+      }
+    });
+
+    setValue(current);
+
+    const nextEmpty = current.findIndex((v, i) => i >= startIdx && v === '');
+    if (nextEmpty >= 0) {
+      focusInput(nextEmpty);
+    } else {
+      focusInput(Math.min(startIdx + chars.length, len - 1));
+    }
+  };
+
+  const handleKeyDown = (idx, ev) => {
+    if (ev.key === 'Backspace') {
+      const current = currentState.get().slice();
+      if (current[idx] === '' && idx > 0) {
+        ev.preventDefault();
+        current[idx - 1] = '';
+        setValue(current);
+        focusInput(idx - 1);
+      } else if (current[idx] !== '') {
+        current[idx] = '';
+        setValue(current);
+      }
+    } else if (ev.key === 'ArrowLeft' && idx > 0) {
+      ev.preventDefault();
+      focusInput(idx - 1);
+    } else if (ev.key === 'ArrowRight' && idx < getLength() - 1) {
+      ev.preventDefault();
+      focusInput(idx + 1);
+    }
+  };
+
+  const handleFocus = (idx, ev) => {
+    ev.target.select();
+  };
+
+  const handleContainerClick = () => {
+    const current = currentState.get();
+    const firstEmpty = current.findIndex((v) => v === '');
+    if (firstEmpty >= 0) {
+      focusInput(firstEmpty);
+    } else {
+      focusInput(current.length - 1);
+    }
+  };
+
+  const inputType = after(mask).compute((m) => (resolveValue(m) ? 'password' : 'text'));
+  const inputMode = after(type).compute((t) => (resolveValue(t) === 'number' ? 'numeric' : 'text'));
+  const autoComplete = after(oneTimeCode).compute((o) => (resolveValue(o) ? 'one-time-code' : 'off'));
+  const isDisabled = after(disabled).compute((d) => !!resolveValue(d));
+  const hasError = after(error).compute((e) => !!resolveValue(e));
+
+  const indices = after(currentLength).compute((len) =>
+    Array.from({ length: len }, (_, i) => i)
+  );
+
+  const renderInput = (idx) =>
+    Input({
+      className: cx(
+        'g-ui-pin-input-field',
+        when(hasError, () => 'g-ui-pin-input-error')
+      ),
+      type: inputType,
+      inputMode,
+      autocomplete: autoComplete,
+      maxLength: 2,
+      placeholder: when(isDisabled, () => '', () => placeholder),
+      disabled: isDisabled,
+      value: after(currentState, idx).compute(([values, i]) => values[i] ?? ''),
+      node: inputNodes[idx.get()],
+      onInput: (ev) => handleInput(idx.get(), ev),
+      onChange: (ev) => handleInput(idx.get(), ev),
+      onKeyDown: (ev) => handleKeyDown(idx.get(), ev),
+      onFocus: (ev) => handleFocus(idx.get(), ev),
+    });
+
+  return Div(
+    {
+      className: cx(
+        'g-ui-pin-input',
+        classVar('g-ui-input-size-', size, 'md'),
+        className
+      ),
+      onClick: handleContainerClick,
+    },
+    Div(
+      { className: 'g-ui-pin-input-wrapper' },
+      list(indices, renderInput)
+    )
+  );
+}

package/src/components/Popover.js

@@ -0,0 +1,38 @@
+import { Div, when, after, state } from '@granularjs/core';
+import { cx, splitPropsChildren, resolveValue } from '../utils.js';
+
+export function Popover(...args) {
+  const { props, rawProps, children } = splitPropsChildren(args, { position: 'left' });
+  const { opened, position, content, className, ...rest } = props;
+  const { onChange } = rawProps;
+  const currentState = state(resolveValue(opened) ?? false);
+  after(opened).change((next) => {
+    const resolved = resolveValue(next);
+    if (resolved == null) return;
+    currentState.set(!!resolved);
+  });
+
+  const setOpen = (next) => {
+    currentState.set(next);
+    onChange?.(next);
+  };
+
+  return Div(
+    { ...rest, className: cx('g-ui-popover', props.className ?? className) },
+    Div({ onClick: () => setOpen(!currentState.get()) }, children),
+    when(
+      currentState,
+      () =>
+        Div(
+          {
+            className: cx(
+              'g-ui-popover-dropdown',
+              position === 'right' && 'g-ui-popover-right',
+              position === 'center' && 'g-ui-popover-center'
+            ),
+          },
+          content
+        )
+    )
+  );
+}

package/src/components/Popper.js

@@ -0,0 +1,25 @@
+import { Div, when, after, state } from '@granularjs/core';
+import { cx, splitPropsChildren, resolveValue } from '../utils.js';
+
+export function Popper(...args) {
+  const { props, rawProps, children } = splitPropsChildren(args);
+  const { opened, content, className, ...rest } = props;
+  const { onChange } = rawProps;
+  const currentState = state(resolveValue(opened) ?? false);
+  after(opened).change((next) => {
+    const resolved = resolveValue(next);
+    if (resolved == null) return;
+    currentState.set(!!resolved);
+  });
+
+  const setOpen = (next) => {
+    currentState.set(next);
+    onChange?.(next);
+  };
+
+  return Div(
+    { ...rest, className: cx('g-ui-popper', className) },
+    Div({ onClick: () => setOpen(!currentState.get()) }, children),
+    when(currentState, () => Div({ className: 'g-ui-popper-dropdown' }, content))
+  );
+}

package/src/components/Progress.js

@@ -0,0 +1,27 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar } from '../utils.js';
+
+export function Progress(...args) {
+  const { props } = splitPropsChildren(args, { value: 0, color: 'primary', size: 'md' });
+  const { value, color, size, className, ...rest } = props;
+  return Div(
+    {
+      ...rest,
+      className: cx(
+        'g-ui-progress',
+        classVar('g-ui-progress-size-', size, 'md'),
+        [value, (next) => {
+          const pct = Math.max(0, Math.min(100, Number(next) || 0));
+          const bucket = Math.round(pct / 5) * 5;
+          return `g-ui-progress-${bucket}`;
+        }],
+        [color, (next) => {
+          if (next) return `g-ui-progress-${next}`;
+          return '';
+        }],
+        className
+      ),
+    },
+    Div({ className: 'g-ui-progress-bar' })
+  );
+}

package/src/components/ProgressRing.js

@@ -0,0 +1,11 @@
+import { Div } from '@granularjs/core';
+import { cx, splitPropsChildren } from '../utils.js';
+
+export function ProgressRing(...args) {
+  const { props } = splitPropsChildren(args, { size: 'md' });
+  const { size, className, ...rest } = props;
+  return Div({
+    ...rest,
+    className: cx('g-ui-progress-ring', [size, (value) => `g-ui-progress-ring-size-${value}`], className),
+  });
+}

package/src/components/Radio.js

@@ -0,0 +1,22 @@
+import { Div, Input, Label, Span, when } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar } from '../utils.js';
+
+export function Radio(...args) {
+  const { props } = splitPropsChildren(args, { size: 'md' });
+  const { label, description, size, className, inputProps, ...rest } = props;
+  const control = Label(
+    { className: 'g-ui-radio-control' },
+    Input({
+      type: 'radio',
+      className: cx('g-ui-radio-input', classVar('g-ui-radio-size-', size, 'md'), inputProps?.className),
+      ...rest,
+    }),
+    when(label, () => Span({ className: 'g-ui-radio-label' }, label))
+  );
+
+  return Div(
+    { className: cx('g-ui-radio', classVar('g-ui-radio-size-', size, 'md'), className) },
+    control,
+    when(description, () => Span({ className: 'g-ui-radio-description' }, description))
+  );
+}

package/src/components/RadioGroup.js

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

package/src/components/RangePicker.js

@@ -0,0 +1,45 @@
+import { Div, state, after } from '@granularjs/core';
+import { cx, splitPropsChildren, resolveValue } from '../utils.js';
+import { TextInput } from './TextInput.js';
+
+export function RangePicker(...args) {
+  const { props, rawProps } = splitPropsChildren(args, { size: 'md' });
+  const { value, size, className, ...rest } = props;
+  const { onChange } = rawProps;
+  const currentState = state(resolveValue(value) ?? ['', '']);
+
+  after(value).change((next) => {
+    const resolved = resolveValue(next);
+    if (resolved == null) return;
+    currentState.set(resolved);
+  });
+
+  const setValue = (next) => {
+    currentState.set(next);
+    onChange?.(next);
+  };
+
+  return Div(
+    { ...rest, className: cx('g-ui-range-picker', props.className ?? className) },
+    TextInput({
+      size,
+      type: 'text',
+      inputMode: 'numeric',
+      value: after(currentState).compute((current) => current?.[0] ?? ''),
+      onInput: (ev) => {
+        const current = currentState.get() ?? ['', ''];
+        setValue([ev.target.value, current[1]]);
+      },
+    }),
+    TextInput({
+      size,
+      type: 'text',
+      inputMode: 'numeric',
+      value: after(currentState).compute((current) => current?.[1] ?? ''),
+      onInput: (ev) => {
+        const current = currentState.get() ?? ['', ''];
+        setValue([current[0], ev.target.value]);
+      },
+    })
+  );
+}

package/src/components/RangeSlider.js

@@ -0,0 +1,143 @@
+import { Div, after, state, when } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, classFlag, resolveBool, resolveValue } from '../utils.js';
+import { SliderMark } from './Slider.js';
+
+export function RangeSlider(...args) {
+  const { props, rawProps } = splitPropsChildren(args, { min: 0, max: 100, step: 1, size: 'md' });
+  const { value, marks, min, max, step, size, disabled, className, ...rest } = props;
+  const { onChange } = rawProps;
+  const currentState = state(resolveValue(value ?? [min, max]));
+  const getBounds = () => {
+    const minValue = Number(resolveValue(min));
+    const maxValue = Number(resolveValue(max));
+    if (!Number.isFinite(minValue) || !Number.isFinite(maxValue)) {
+      return { minValue: 0, maxValue: 100 };
+    }
+    return { minValue: Math.min(minValue, maxValue), maxValue: Math.max(minValue, maxValue) };
+  };
+  const getStep = () => {
+    const stepValue = Number(resolveValue(step));
+    if (Number.isFinite(stepValue) && stepValue > 0) return stepValue;
+    return 1;
+  };
+  const normalize = (vals) => {
+    const { minValue, maxValue } = getBounds();
+    const stepValue = getStep();
+    let list = [minValue, maxValue];
+    if (Array.isArray(vals)) list = vals;
+    const first = Math.max(minValue, Math.min(maxValue, Number(list[0])));
+    const second = Math.max(minValue, Math.min(maxValue, Number(list[1])));
+    const low = Math.round(Math.min(first, second) / stepValue) * stepValue;
+    const high = Math.round(Math.max(first, second) / stepValue) * stepValue;
+    return [low, high];
+  };
+  after(value).change((next) => {
+    if (next == null) return;
+    currentState.set(normalize(next));
+  });
+  const setValue = (next) => {
+    const normalized = normalize(next);
+    if (
+      normalized?.[0] === currentState.get()?.[0] &&
+      normalized?.[1] === currentState.get()?.[1]
+    ) {
+      return;
+    }
+    currentState.set(normalized);
+    onChange?.(normalized);
+  };
+  const percent = after(currentState).compute((vals) => {
+    const { minValue, maxValue } = getBounds();
+    const range = maxValue - minValue;
+    const [low, high] = normalize(vals);
+    if (range <= 0) return { lowPct: 0, highPct: 0 };
+    const lowPct = ((low - minValue) / range) * 100;
+    const highPct = ((high - minValue) / range) * 100;
+    return {
+      lowPct: Math.max(0, Math.min(100, lowPct)),
+      highPct: Math.max(0, Math.min(100, highPct)),
+    };
+  });
+  const updateFromEvent = (ev, getRect, thumb) => {
+    const rect = getRect?.();
+    if (!rect || rect.width === 0) return;
+    const x = Math.min(Math.max(ev.clientX - rect.left, 0), rect.width);
+    const ratio = x / rect.width;
+    const { minValue, maxValue } = getBounds();
+    const nextValue = minValue + ratio * (maxValue - minValue);
+    let current = currentState;
+    if (typeof currentState.get === 'function') current = currentState.get();
+    const [low, high] = normalize(current);
+    if (thumb === 'low') setValue([nextValue, high]);
+    else setValue([low, nextValue]);
+  };
+  const startDrag = (ev, forcedThumb, trackEl) => {
+    if (resolveBool(disabled)) return;
+    ev.preventDefault?.();
+    const track = trackEl || ev.currentTarget;
+    const getRect = () => track.getBoundingClientRect();
+    const rect = getRect();
+    let percentValue = percent;
+    if (typeof percent.get === 'function') percentValue = percent.get();
+    const { lowPct, highPct } = percentValue;
+    const clickPct = ((ev.clientX - rect.left) / rect.width) * 100;
+    let thumb = forcedThumb;
+    if (!thumb) {
+      const isLow = Math.abs(clickPct - lowPct) <= Math.abs(clickPct - highPct);
+      thumb = 'high';
+      if (isLow) thumb = 'low';
+    }
+    track.setPointerCapture?.(ev.pointerId);
+    updateFromEvent(ev, getRect, thumb);
+    const handleMove = (moveEv) => updateFromEvent(moveEv, getRect, thumb);
+    const handleUp = () => {
+      track.releasePointerCapture?.(ev.pointerId);
+      window.removeEventListener('pointermove', handleMove);
+      window.removeEventListener('pointerup', handleUp);
+    };
+    window.addEventListener('pointermove', handleMove);
+    window.addEventListener('pointerup', handleUp);
+  };
+
+  return Div(
+    {
+      ...rest,
+      className: cx(
+        'g-ui-range-slider',
+        classVar('g-ui-slider-size-', size, 'md'),
+        classFlag('g-ui-slider-disabled', disabled),
+        props.className ?? className
+      ),
+    },
+    Div(
+      { className: 'g-ui-slider-track', onPointerDown: (ev) => startDrag(ev) },
+      Div({
+        className: 'g-ui-slider-bar',
+        style: after(percent).compute(({ lowPct, highPct }) => ({
+          left: `${lowPct}%`,
+          width: `${Math.max(0, highPct - lowPct)}%`,
+        })),
+      }),
+      Div({
+        className: 'g-ui-slider-thumb',
+        style: after(percent).compute(({ lowPct }) => ({ left: `${lowPct}%` })),
+        onPointerDown: (ev) => {
+          ev.stopPropagation?.();
+          startDrag(ev, 'low', ev.currentTarget.parentElement);
+        },
+      }),
+      Div({
+        className: 'g-ui-slider-thumb',
+        style: after(percent).compute(({ highPct }) => ({ left: `${highPct}%` })),
+        onPointerDown: (ev) => {
+          ev.stopPropagation?.();
+          startDrag(ev, 'high', ev.currentTarget.parentElement);
+        },
+      })
+    ),
+    when(marks, () => Div(
+      { className: 'g-ui-slider-marks' },
+      marks.map((mark) => SliderMark({ mark, getBounds }))
+    ))
+  );
+}

package/src/components/Rating.js

@@ -0,0 +1,42 @@
+import { Span, after, state } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, resolveValue } from '../utils.js';
+
+export function Rating(...args) {
+  const { props, rawProps } = splitPropsChildren(args, { value: 0, max: 5, size: 'md' });
+  const { value, max, size, className, ...rest } = props;
+  const { onChange } = rawProps;
+  const currentState = state(resolveValue(value));
+  after(value).change((next) => {
+    const resolved = resolveValue(next);
+    if (resolved == null) return;
+    currentState.set(resolved);
+  });
+  const setValue = (next) => {
+    currentState.set(next);
+    onChange?.(next);
+  };
+  const items = [];
+  const maxValue = Number(resolveValue(max)) || 0;
+  for (let i = 1; i <= maxValue; i += 1) items.push(i);
+  return Span(
+    {
+      ...rest,
+      className: cx('g-ui-rating', classVar('g-ui-rating-size-', size, 'md'), props.className ?? className),
+    },
+    items.map((i) =>
+      Span(
+        {
+          className: cx(
+            'g-ui-rating-item',
+            after(currentState).compute((current) => {
+              if (i <= current) return 'g-ui-rating-item-active';
+              return '';
+            })
+          ),
+          onClick: () => setValue(i),
+        },
+        '★'
+      )
+    )
+  );
+}

package/src/components/ScrollArea.js

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

package/src/components/SearchInput.js

@@ -0,0 +1,17 @@
+import { Span, Div } from '@granularjs/core';
+import { splitPropsChildren } from '../utils.js';
+import { searchSvg } from '../theme/icons.js';
+import { TextInput } from './TextInput.js';
+
+export function SearchInput(...args) {
+  const { props } = splitPropsChildren(args, { size: 'md' });
+  const { size, className, ...rest } = props;
+  return TextInput({
+    ...rest,
+    size,
+    className,
+    leftSection: Div({ className: 'g-ui-search-input-left-section' , innerHTML: searchSvg }),
+    type: 'text',
+    inputMode: 'search',
+  });
+}

package/src/components/SegmentedControl.js

@@ -0,0 +1,39 @@
+import { Div, after, state } from '@granularjs/core';
+import { cx, splitPropsChildren, classVar, resolveValue } from '../utils.js';
+
+export function SegmentedControl(...args) {
+  const { props, rawProps } = splitPropsChildren(args, { data: [], size: 'sm' });
+  const { value, data, size, scroll, className, ...rest } = props;
+  const { onChange } = rawProps;
+  const currentState = state(resolveValue(value));
+  after(value).change((next) => {
+    const resolved = resolveValue(next);
+    if (resolved == null) return;
+    currentState.set(resolved);
+  });
+  const setValue = (next) => {
+    currentState.set(next);
+    onChange?.(next);
+  };
+  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) =>
+        Div(
+          {
+            className: cx(
+              'g-ui-segmented-item',
+            after(currentState).compute((current) => {
+              if (item.value === current) return 'g-ui-segmented-active';
+              return '';
+            })
+            ),
+            onClick: () => setValue(item.value),
+          },
+          item.label
+        )
+      )
+    )
+  );
+}