decantr 0.9.0

package/src/components/input-number.js

@@ -0,0 +1,155 @@
+/**
+ * InputNumber — Numeric input with increment/decrement buttons.
+ *
+ * @module decantr/components/input-number
+ */
+import { createEffect } from '../state/index.js';
+import { onDestroy } from '../core/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createFormField } from './_behaviors.js';
+import { icon } from './icon.js';
+import { applyFieldState } from './_primitives.js';
+
+const { div, input: inputTag, button: buttonTag } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {number|Function} [props.value]
+ * @param {number} [props.min=-Infinity]
+ * @param {number} [props.max=Infinity]
+ * @param {number} [props.step=1]
+ * @param {number} [props.precision]
+ * @param {boolean|Function} [props.disabled]
+ * @param {boolean} [props.controls=true]
+ * @param {string} [props.placeholder]
+ * @param {boolean|string|Function} [props.error]
+ * @param {boolean|string|Function} [props.success]
+ * @param {string} [props.variant='outlined'] - 'outlined'|'filled'|'ghost'
+ * @param {string} [props.size] - xs|sm|lg
+ * @param {string} [props.label]
+ * @param {string} [props.help]
+ * @param {boolean} [props.required]
+ * @param {Function} [props.onchange]
+ * @param {string} [props['aria-label']]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function InputNumber(props = {}) {
+  injectBase();
+  const {
+    value, min = -Infinity, max = Infinity, step = 1, precision,
+    disabled, controls = true, placeholder, error, success,
+    variant, size, label, help, required, onchange,
+    'aria-label': ariaLabel, class: cls
+  } = props;
+
+  let current = typeof value === 'function' ? value() : (value ?? 0);
+  let _disabled = typeof disabled === 'function' ? disabled() : !!disabled;
+
+  const input = inputTag({
+    type: 'text',
+    inputmode: 'decimal',
+    class: 'd-inputnumber-input',
+    placeholder,
+    role: 'spinbutton',
+    'aria-valuemin': min === -Infinity ? undefined : String(min),
+    'aria-valuemax': max === Infinity ? undefined : String(max),
+    'aria-valuenow': String(current),
+    'aria-label': ariaLabel
+  });
+
+  function format(n) {
+    return precision !== undefined ? n.toFixed(precision) : String(n);
+  }
+
+  function clamp(n) {
+    return Math.max(min, Math.min(max, n));
+  }
+
+  let decBtn = null, incBtn = null;
+
+  function setValue(n) {
+    current = clamp(n);
+    input.value = format(current);
+    input.setAttribute('aria-valuenow', String(current));
+    updateStepState();
+    if (onchange) onchange(current);
+  }
+
+  function updateStepState() {
+    if (decBtn) { (_disabled || current <= min) ? decBtn.setAttribute('disabled', '') : decBtn.removeAttribute('disabled'); }
+    if (incBtn) { (_disabled || current >= max) ? incBtn.setAttribute('disabled', '') : incBtn.removeAttribute('disabled'); }
+  }
+
+  input.value = format(current);
+
+  function handleChange() {
+    const parsed = parseFloat(input.value);
+    if (!isNaN(parsed)) setValue(parsed);
+    else input.value = format(current);
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'ArrowUp') { e.preventDefault(); setValue(current + step); }
+    else if (e.key === 'ArrowDown') { e.preventDefault(); setValue(current - step); }
+  }
+
+  function handleDec() { setValue(current - step); }
+  function handleInc() { setValue(current + step); }
+
+  input.addEventListener('change', handleChange);
+  input.addEventListener('keydown', handleKeydown);
+
+  const wrap = div({ class: cx('d-inputnumber', cls) });
+
+  if (controls) {
+    decBtn = buttonTag({ type: 'button', class: 'd-inputnumber-step', 'aria-label': 'Decrease' }, icon('minus', { size: '1em' }));
+    incBtn = buttonTag({ type: 'button', class: 'd-inputnumber-step', 'aria-label': 'Increase' }, icon('plus', { size: '1em' }));
+    decBtn.addEventListener('click', handleDec);
+    incBtn.addEventListener('click', handleInc);
+    wrap.appendChild(decBtn);
+    wrap.appendChild(input);
+    wrap.appendChild(incBtn);
+    updateStepState();
+  } else {
+    wrap.appendChild(input);
+  }
+
+  // Reactive disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => {
+      _disabled = disabled();
+      input.disabled = _disabled;
+      updateStepState();
+    });
+  } else if (disabled) {
+    input.disabled = true;
+  }
+
+  // Reactive value
+  if (typeof value === 'function') {
+    createEffect(() => {
+      current = value();
+      input.value = format(current);
+      input.setAttribute('aria-valuenow', String(current));
+      updateStepState();
+    });
+  }
+
+  onDestroy(() => {
+    input.removeEventListener('change', handleChange);
+    input.removeEventListener('keydown', handleKeydown);
+    if (decBtn) decBtn.removeEventListener('click', handleDec);
+    if (incBtn) incBtn.removeEventListener('click', handleInc);
+  });
+
+  applyFieldState(wrap, { error, success, disabled, variant, size });
+
+  if (label || help) {
+    const { wrapper } = createFormField(wrap, { label, error, help, required, success, variant, size });
+    return wrapper;
+  }
+
+  return wrap;
+}

package/src/components/input-otp.js

@@ -0,0 +1,178 @@
+/**
+ * InputOTP — One-time password input with individual digit slots.
+ *
+ * @module decantr/components/input-otp
+ */
+import { createEffect } from '../state/index.js';
+import { onDestroy } from '../core/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createFormField } from './_behaviors.js';
+
+const { div, input: inputTag, span } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {number} [props.length=6]
+ * @param {string|Function} [props.value]
+ * @param {boolean} [props.masked=false]
+ * @param {number} [props.separator]
+ * @param {Function} [props.onComplete]
+ * @param {Function} [props.onchange]
+ * @param {boolean|Function} [props.disabled]
+ * @param {boolean|string|Function} [props.error]
+ * @param {boolean|string|Function} [props.success]
+ * @param {string} [props.size] - sm|lg
+ * @param {string} [props.variant] - 'outlined'|'filled'|'ghost'
+ * @param {string} [props.label]
+ * @param {string} [props.help]
+ * @param {boolean} [props.required]
+ * @param {string} [props['aria-label']]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function InputOTP(props = {}) {
+  injectBase();
+  const { length = 6, value, masked = false, separator, onComplete, onchange, disabled, error, success, size, variant, label, help, required, 'aria-label': ariaLabel, class: cls } = props;
+
+  const container = div({
+    class: cx('d-otp', size && `d-otp-${size}`, cls),
+    role: 'group',
+    'aria-label': ariaLabel || 'One-time password'
+  });
+  const slots = [];
+  const cleanups = [];
+
+  function getValue() {
+    return slots.map(s => s.value).join('');
+  }
+
+  function focusSlot(idx) {
+    if (idx >= 0 && idx < slots.length) slots[idx].focus();
+  }
+
+  for (let i = 0; i < length; i++) {
+    if (separator && i > 0 && i % separator === 0) {
+      container.appendChild(span({ class: 'd-otp-separator' }, '\u2013'));
+    }
+
+    const slotProps = {
+      type: masked ? 'password' : 'text',
+      inputmode: 'numeric',
+      maxlength: '1',
+      class: 'd-otp-slot d-field',
+      'aria-label': `Digit ${i + 1}`,
+      autocomplete: 'one-time-code'
+    };
+
+    const slot = inputTag(slotProps);
+
+    const onInput = () => {
+      const val = slot.value.replace(/\D/g, '');
+      slot.value = val.slice(0, 1);
+      if (val && i < length - 1) focusSlot(i + 1);
+      const full = getValue();
+      if (onchange) onchange(full);
+      if (full.length === length && onComplete) onComplete(full);
+    };
+
+    const onKeydown = (e) => {
+      if (e.key === 'Backspace') {
+        if (!slot.value && i > 0) { e.preventDefault(); slots[i - 1].value = ''; focusSlot(i - 1); }
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault(); focusSlot(i - 1);
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault(); focusSlot(i + 1);
+      }
+    };
+
+    const onPaste = (e) => {
+      e.preventDefault();
+      const text = (e.clipboardData || window.clipboardData).getData('text').replace(/\D/g, '');
+      for (let j = 0; j < Math.min(text.length, length - i); j++) {
+        slots[i + j].value = text[j];
+      }
+      focusSlot(Math.min(i + text.length, length - 1));
+      const full = getValue();
+      if (onchange) onchange(full);
+      if (full.length === length && onComplete) onComplete(full);
+    };
+
+    const onFocus = () => slot.select();
+
+    slot.addEventListener('input', onInput);
+    slot.addEventListener('keydown', onKeydown);
+    slot.addEventListener('paste', onPaste);
+    slot.addEventListener('focus', onFocus);
+
+    cleanups.push(() => {
+      slot.removeEventListener('input', onInput);
+      slot.removeEventListener('keydown', onKeydown);
+      slot.removeEventListener('paste', onPaste);
+      slot.removeEventListener('focus', onFocus);
+    });
+
+    slots.push(slot);
+    container.appendChild(slot);
+  }
+
+  // Set initial value
+  const initVal = typeof value === 'function' ? value() : (value || '');
+  for (let i = 0; i < Math.min(initVal.length, length); i++) {
+    slots[i].value = initVal[i];
+  }
+
+  // Reactive value
+  if (typeof value === 'function') {
+    createEffect(() => {
+      const v = value() || '';
+      for (let i = 0; i < length; i++) {
+        slots[i].value = v[i] || '';
+      }
+    });
+  }
+
+  // Reactive disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => {
+      const v = disabled();
+      slots.forEach(s => { s.disabled = v; });
+    });
+  } else if (disabled) {
+    slots.forEach(s => { s.disabled = true; });
+  }
+
+  // Reactive error
+  if (typeof error === 'function') {
+    createEffect(() => {
+      const v = error();
+      if (v) container.setAttribute('data-error', ''); else container.removeAttribute('data-error');
+      container.setAttribute('aria-invalid', v ? 'true' : 'false');
+      slots.forEach(s => { if (v) s.setAttribute('data-error', ''); else s.removeAttribute('data-error'); });
+    });
+  } else if (error) {
+    container.setAttribute('data-error', '');
+    container.setAttribute('aria-invalid', 'true');
+    slots.forEach(s => { s.setAttribute('data-error', ''); });
+  }
+
+  // Success state on container (for createFormField cascade)
+  if (typeof success === 'function') {
+    createEffect(() => {
+      const v = success();
+      if (v) container.setAttribute('data-success', typeof v === 'string' ? v : '');
+      else container.removeAttribute('data-success');
+    });
+  } else if (success) {
+    container.setAttribute('data-success', typeof success === 'string' ? success : '');
+  }
+
+  onDestroy(() => cleanups.forEach(fn => fn()));
+
+  if (label || help) {
+    const { wrapper } = createFormField(container, { label, error, help, required, success, variant, size });
+    return wrapper;
+  }
+
+  return container;
+}

package/src/components/input.js

@@ -0,0 +1,91 @@
+import { onDestroy } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createFormField } from './_behaviors.js';
+import { applyFieldState } from './_primitives.js';
+
+const { div, input: inputTag, span } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.type='text']
+ * @param {string} [props.placeholder]
+ * @param {string|Function} [props.value]
+ * @param {boolean|Function} [props.disabled]
+ * @param {boolean|Function} [props.readonly]
+ * @param {string|Node} [props.prefix]
+ * @param {string|Node} [props.suffix]
+ * @param {boolean|string|Function} [props.error]
+ * @param {boolean|string|Function} [props.success]
+ * @param {boolean|Function} [props.loading]
+ * @param {string} [props.variant='outlined'] - 'outlined'|'filled'|'ghost'
+ * @param {string} [props.size] - xs|sm|lg
+ * @param {string} [props.label]
+ * @param {string} [props.help]
+ * @param {boolean} [props.required]
+ * @param {Function} [props.oninput]
+ * @param {Function} [props.onchange]
+ * @param {Function} [props.ref]
+ * @param {string} [props['aria-label']]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Input(props = {}) {
+  injectBase();
+
+  const {
+    type = 'text', placeholder, value, disabled, readonly,
+    prefix, suffix, error, success, loading, variant, size,
+    label, help, required, oninput, onchange, ref,
+    'aria-label': ariaLabel, class: cls
+  } = props;
+
+  const inputProps = { class: 'd-input', type };
+  if (placeholder) inputProps.placeholder = placeholder;
+  if (readonly && typeof readonly !== 'function') inputProps.readonly = '';
+  if (oninput) inputProps.oninput = oninput;
+  if (onchange) inputProps.onchange = onchange;
+  if (ariaLabel) inputProps['aria-label'] = ariaLabel;
+  if (required) inputProps.required = '';
+
+  const inputEl = inputTag(inputProps);
+  if (ref) ref(inputEl);
+
+  // Reactive value
+  if (typeof value === 'function') {
+    createEffect(() => { inputEl.value = value(); });
+  } else if (value !== undefined) {
+    inputEl.value = value;
+  }
+
+  // Reactive disabled on the input itself
+  if (typeof disabled === 'function') {
+    createEffect(() => { inputEl.disabled = disabled(); });
+  } else if (disabled) {
+    inputEl.disabled = true;
+  }
+
+  // Reactive readonly
+  if (typeof readonly === 'function') {
+    createEffect(() => { inputEl.readOnly = readonly(); });
+  }
+
+  const children = [];
+  if (prefix) children.push(span({ class: 'd-input-prefix' }, prefix));
+  children.push(inputEl);
+  if (suffix) children.push(span({ class: 'd-input-suffix' }, suffix));
+
+  const wrap = div({ class: cx('d-input-wrap', cls) }, ...children);
+
+  // Apply .d-field state
+  applyFieldState(wrap, { error, success, disabled, readonly, loading, variant, size });
+
+  // createFormField wrapper if label/help provided
+  if (label || help) {
+    const { wrapper } = createFormField(wrap, { label, error, help, required, success, variant, size });
+    return wrapper;
+  }
+
+  return wrap;
+}

package/src/components/kbd.js

@@ -0,0 +1,36 @@
+/**
+ * Kbd — Keyboard shortcut display component.
+ * Renders keyboard keys with proper styling.
+ *
+ * @module decantr/components/kbd
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {string|string[]} [props.keys] - Key(s) to display. Array = combination (e.g. ['Ctrl', 'S'])
+ * @param {string} [props.separator='+'] - Separator between keys in combination
+ * @param {string} [props.class]
+ * @param {...(string|Node)} children - Alternative: pass key text as children
+ * @returns {HTMLElement}
+ */
+export function Kbd(props = {}, ...children) {
+  injectBase();
+  const { keys, separator = '+', class: cls, ...rest } = props;
+
+  if (keys) {
+    const keyArr = Array.isArray(keys) ? keys : [keys];
+    if (keyArr.length === 1) {
+      return h('kbd', { class: cx('d-kbd', cls), ...rest }, keyArr[0]);
+    }
+    const group = h('span', { class: cx('d-kbd-group', cls), ...rest });
+    keyArr.forEach((key, i) => {
+      if (i > 0) group.appendChild(h('span', { class: 'd-kbd-separator' }, separator));
+      group.appendChild(h('kbd', { class: 'd-kbd' }, key));
+    });
+    return group;
+  }
+
+  return h('kbd', { class: cx('d-kbd', cls), ...rest }, ...children);
+}

package/src/components/label.js

@@ -0,0 +1,25 @@
+/**
+ * Label — Form label with optional required indicator.
+ *
+ * @module decantr/components/label
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.for] - Associated input ID
+ * @param {boolean} [props.required]
+ * @param {string} [props.class]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+export function Label(props = {}, ...children) {
+  injectBase();
+  const { for: htmlFor, required, class: cls, ...rest } = props;
+  return h('label', {
+    class: cx('d-label', required && 'd-label-required', cls),
+    for: htmlFor,
+    ...rest
+  }, ...children);
+}

package/src/components/list.js

@@ -0,0 +1,118 @@
+/**
+ * List — Data list with items, avatars, actions, and grid mode.
+ *
+ * @module decantr/components/list
+ */
+import { h } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {{ title?: string, description?: string, avatar?: Node, extra?: Node, actions?: Node[] }[]|Function} [props.items]
+ * @param {Function} [props.renderItem] - Custom render: (item, index) => Node
+ * @param {string} [props.header]
+ * @param {string} [props.footer]
+ * @param {boolean} [props.bordered=false]
+ * @param {number} [props.grid] - Grid columns (enables grid mode)
+ * @param {boolean} [props.loading=false]
+ * @param {string} [props.emptyText='No data']
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function List(props = {}) {
+  injectBase();
+  const { items, renderItem, header, footer, bordered, grid, loading, emptyText = 'No data', class: cls } = props;
+
+  const container = h('div', { class: cx('d-list', bordered && 'd-list-bordered', cls), role: 'list' });
+
+  function render() {
+    container.replaceChildren();
+
+    if (header) container.appendChild(h('div', { class: 'd-list-header' }, header));
+
+    const data = typeof items === 'function' ? items() : (items || []);
+
+    if (typeof loading === 'function' ? loading() : loading) {
+      container.appendChild(h('div', { class: 'd-list-loading' }, '\u23F3'));
+      return;
+    }
+
+    if (!data.length) {
+      container.appendChild(h('div', { class: 'd-empty' },
+        h('div', { class: 'd-empty-desc' }, emptyText)
+      ));
+      if (footer) container.appendChild(h('div', { class: 'd-list-footer' }, footer));
+      return;
+    }
+
+    const body = grid
+      ? h('div', { class: 'd-list-grid', style: { gridTemplateColumns: `repeat(${grid},1fr)`, gap: 'var(--d-sp-3)' } })
+      : document.createDocumentFragment();
+
+    data.forEach((item, i) => {
+      if (renderItem) {
+        const node = renderItem(item, i);
+        if (node) body.appendChild(node);
+        return;
+      }
+
+      const el = h('div', { class: 'd-list-item', role: 'listitem' });
+
+      if (item.avatar) {
+        el.appendChild(h('div', { class: 'd-list-item-avatar' }, item.avatar));
+      }
+
+      const meta = h('div', { class: 'd-list-item-meta' });
+      if (item.title) meta.appendChild(h('div', { class: 'd-list-item-title' }, item.title));
+      if (item.description) meta.appendChild(h('div', { class: 'd-list-item-desc' }, item.description));
+      el.appendChild(meta);
+
+      if (item.extra) el.appendChild(item.extra);
+
+      if (item.actions && item.actions.length) {
+        const actions = h('div', { class: 'd-list-item-actions' });
+        item.actions.forEach(a => actions.appendChild(a));
+        el.appendChild(actions);
+      }
+
+      body.appendChild(el);
+    });
+
+    container.appendChild(grid ? body : body);
+    if (footer) container.appendChild(h('div', { class: 'd-list-footer' }, footer));
+  }
+
+  render();
+
+  if (typeof items === 'function') {
+    createEffect(() => { items(); render(); });
+  }
+  if (typeof loading === 'function') {
+    createEffect(() => { loading(); render(); });
+  }
+
+  return container;
+}
+
+/**
+ * List.Item — Standalone list item.
+ * @param {Object} [props]
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+List.Item = function Item(props = {}, ...children) {
+  injectBase();
+  const { class: cls, ...rest } = props;
+  return h('div', { class: cx('d-list-item', cls), role: 'listitem', ...rest }, ...children);
+};
+
+List.Item.Meta = function Meta(props = {}) {
+  injectBase();
+  const { title, description, avatar, class: cls } = props;
+  const el = h('div', { class: cx('d-list-item-meta', cls) });
+  if (title) el.appendChild(h('div', { class: 'd-list-item-title' }, title));
+  if (description) el.appendChild(h('div', { class: 'd-list-item-desc' }, description));
+  return el;
+};