decantr 0.9.0

package/src/components/statistic.js

@@ -0,0 +1,136 @@
+/**
+ * Statistic — Display a numeric value with label, prefix/suffix, and trend.
+ * Supports countdown timer.
+ *
+ * @module decantr/components/statistic
+ */
+import { h } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+import { icon } from './icon.js';
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.label] - Description label
+ * @param {number|string|Function} [props.value] - The statistic value
+ * @param {number} [props.precision] - Decimal places
+ * @param {string|Node} [props.prefix]
+ * @param {string|Node} [props.suffix]
+ * @param {'up'|'down'} [props.trend] - Trend direction
+ * @param {string} [props.trendValue] - Trend text (e.g. "12%")
+ * @param {boolean} [props.groupSeparator=true] - Thousands separator
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Statistic(props = {}) {
+  injectBase();
+  const { label, value, precision, prefix, suffix, trend, trendValue, groupSeparator = true, class: cls } = props;
+
+  const container = h('div', { class: cx('d-statistic', cls) });
+
+  if (label) {
+    container.appendChild(h('div', { class: 'd-statistic-label' }, label));
+  }
+
+  const valueRow = h('div', { class: 'd-statistic-value' });
+
+  if (prefix) {
+    const pre = h('span', { class: 'd-statistic-prefix' });
+    if (typeof prefix === 'string') pre.textContent = prefix;
+    else pre.appendChild(prefix);
+    valueRow.appendChild(pre);
+  }
+
+  const valueSpan = h('span', null);
+  valueRow.appendChild(valueSpan);
+
+  if (suffix) {
+    const suf = h('span', { class: 'd-statistic-suffix' });
+    if (typeof suffix === 'string') suf.textContent = suffix;
+    else suf.appendChild(suffix);
+    valueRow.appendChild(suf);
+  }
+
+  container.appendChild(valueRow);
+
+  function formatValue(v) {
+    if (v == null) return '';
+    let num = typeof v === 'number' ? v : parseFloat(v);
+    if (isNaN(num)) return String(v);
+    if (precision !== undefined) num = num.toFixed(precision);
+    else num = String(num);
+    if (groupSeparator) {
+      const parts = num.split('.');
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      num = parts.join('.');
+    }
+    return num;
+  }
+
+  function update() {
+    const v = typeof value === 'function' ? value() : value;
+    valueSpan.textContent = formatValue(v);
+  }
+
+  update();
+
+  if (typeof value === 'function') {
+    createEffect(update);
+  }
+
+  if (trend) {
+    const trendEl = h('div', {
+      class: cx('d-statistic-trend', `d-statistic-trend-${trend}`)
+    });
+    trendEl.appendChild(icon(trend === 'up' ? 'trending-up' : 'trending-down', { size: '1em' }));
+    if (trendValue) trendEl.appendChild(h('span', null, trendValue));
+    container.appendChild(trendEl);
+  }
+
+  return container;
+}
+
+/**
+ * Statistic.Countdown — Countdown timer.
+ * @param {Object} [props]
+ * @param {string} [props.label]
+ * @param {number|Date} [props.target] - Target time (timestamp or Date)
+ * @param {string} [props.format='HH:mm:ss']
+ * @param {Function} [props.onFinish]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+Statistic.Countdown = function Countdown(props = {}) {
+  injectBase();
+  const { label, target, format = 'HH:mm:ss', onFinish, class: cls } = props;
+
+  const container = h('div', { class: cx('d-statistic', cls) });
+  if (label) container.appendChild(h('div', { class: 'd-statistic-label' }, label));
+
+  const valueEl = h('div', { class: 'd-statistic-value d-statistic-countdown' });
+  container.appendChild(valueEl);
+
+  const targetTime = target instanceof Date ? target.getTime() : (target || 0);
+
+  function formatDuration(ms) {
+    if (ms <= 0) return format.replace('HH', '00').replace('mm', '00').replace('ss', '00');
+    const totalSec = Math.floor(ms / 1000);
+    const hours = String(Math.floor(totalSec / 3600)).padStart(2, '0');
+    const minutes = String(Math.floor((totalSec % 3600) / 60)).padStart(2, '0');
+    const seconds = String(totalSec % 60).padStart(2, '0');
+    return format.replace('HH', hours).replace('mm', minutes).replace('ss', seconds);
+  }
+
+  function tick() {
+    const remaining = targetTime - Date.now();
+    valueEl.textContent = formatDuration(remaining);
+    if (remaining <= 0) {
+      if (onFinish) onFinish();
+      return;
+    }
+    requestAnimationFrame(tick);
+  }
+
+  tick();
+  return container;
+};

package/src/components/steps.js

@@ -0,0 +1,99 @@
+/**
+ * Steps — Step-by-step navigation indicator.
+ * Shows progress through a multi-step process.
+ *
+ * @module decantr/components/steps
+ */
+import { h } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+import { icon } from './icon.js';
+
+/**
+ * @param {Object} [props]
+ * @param {{ title: string, description?: string, icon?: string|Node, status?: 'wait'|'process'|'finish'|'error' }[]} [props.items]
+ * @param {number|Function} [props.current=0] - Current step index
+ * @param {'horizontal'|'vertical'} [props.direction='horizontal']
+ * @param {Function} [props.onChange] - Called with step index on click
+ * @param {boolean} [props.clickable=false]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Steps(props = {}) {
+  injectBase();
+  const { items = [], current = 0, direction = 'horizontal', onChange, clickable = false, class: cls } = props;
+
+  const isVert = direction === 'vertical';
+  const container = h('div', {
+    class: cx('d-steps', isVert && 'd-steps-vertical', cls),
+    role: 'list'
+  });
+
+  function getStatus(index, cur) {
+    const item = items[index];
+    if (item.status) return item.status;
+    if (index < cur) return 'finish';
+    if (index === cur) return 'process';
+    return 'wait';
+  }
+
+  function renderIcon(index, status) {
+    const item = items[index];
+    if (item.icon) {
+      return typeof item.icon === 'string'
+        ? h('span', null, item.icon)
+        : item.icon;
+    }
+    if (status === 'finish') return icon('check', { size: '1em' });
+    if (status === 'error') return icon('x', { size: '1em' });
+    return h('span', null, String(index + 1));
+  }
+
+  function render() {
+    const cur = typeof current === 'function' ? current() : current;
+    container.replaceChildren();
+
+    items.forEach((item, i) => {
+      const status = getStatus(i, cur);
+
+      const iconEl = h('div', {
+        class: cx('d-step-icon', `d-step-icon-${status}`)
+      }, renderIcon(i, status));
+
+      const content = h('div', { class: 'd-step-content' });
+      content.appendChild(h('div', { class: 'd-step-title' }, item.title));
+      if (item.description) {
+        content.appendChild(h('div', { class: 'd-step-desc' }, item.description));
+      }
+
+      const step = h('div', {
+        class: cx('d-step', `d-step-${status}`),
+        role: 'listitem',
+        'aria-current': status === 'process' ? 'step' : undefined
+      }, iconEl, content);
+
+      if (clickable && onChange) {
+        step.classList.add('d-step-clickable');
+        step.addEventListener('click', () => onChange(i));
+      }
+
+      // Connector between steps (child of step, not sibling)
+      if (i < items.length - 1) {
+        const connector = h('div', {
+          class: cx('d-step-connector', status === 'finish' && 'd-step-connector-done')
+        });
+        step.appendChild(connector);
+      }
+
+      container.appendChild(step);
+    });
+  }
+
+  render();
+
+  if (typeof current === 'function') {
+    createEffect(() => { current(); render(); });
+  }
+
+  return container;
+}

package/src/components/switch.js

@@ -0,0 +1,95 @@
+/**
+ * Switch — Toggle switch with accessible role="switch".
+ *
+ * @module decantr/components/switch
+ */
+import { createEffect } from '../state/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+
+const { label: labelTag, input: inputTag, span } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {boolean|Function} [props.checked]
+ * @param {boolean|Function} [props.disabled]
+ * @param {string} [props.label]
+ * @param {boolean|string|Function} [props.error]
+ * @param {string} [props.size] - xs|sm|lg
+ * @param {string} [props.name] - Form field name
+ * @param {boolean} [props.required]
+ * @param {Function} [props.onchange]
+ * @param {Function} [props.ref] - Called with the input element
+ * @param {string} [props['aria-label']]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Switch(props = {}) {
+  injectBase();
+
+  const {
+    checked,
+    disabled,
+    label,
+    error,
+    size,
+    name,
+    required,
+    onchange,
+    ref,
+    'aria-label': ariaLabel,
+    class: cls
+  } = props;
+
+  const inputProps = { type: 'checkbox', class: 'd-switch-native', role: 'switch' };
+  if (ariaLabel) inputProps['aria-label'] = ariaLabel;
+  if (name) inputProps.name = name;
+  if (required) inputProps.required = '';
+
+  const input = inputTag(inputProps);
+  const track = span({ class: 'd-switch-track' }, span({ class: 'd-switch-thumb' }));
+  const wrapper = labelTag({ class: cx('d-switch', size && `d-switch-${size}`, cls) }, input, track);
+
+  if (label) wrapper.appendChild(span({ class: 'd-switch-label' }, label));
+  if (onchange) input.addEventListener('change', () => onchange(input.checked));
+  if (ref) ref(input);
+
+  // Checked state — always set aria-checked
+  if (typeof checked === 'function') {
+    createEffect(() => {
+      input.checked = checked();
+      input.setAttribute('aria-checked', String(input.checked));
+    });
+  } else {
+    input.checked = !!checked;
+    input.setAttribute('aria-checked', String(!!checked));
+  }
+
+  // Reactive disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => {
+      const v = disabled();
+      input.disabled = v;
+      if (v) wrapper.setAttribute('data-disabled', '');
+      else wrapper.removeAttribute('data-disabled');
+    });
+  } else if (disabled) {
+    input.disabled = true;
+    wrapper.setAttribute('data-disabled', '');
+  }
+
+  // Reactive error
+  if (typeof error === 'function') {
+    createEffect(() => {
+      const v = error();
+      if (v) wrapper.setAttribute('data-error', '');
+      else wrapper.removeAttribute('data-error');
+      input.setAttribute('aria-invalid', v ? 'true' : 'false');
+    });
+  } else if (error) {
+    wrapper.setAttribute('data-error', '');
+    input.setAttribute('aria-invalid', 'true');
+  }
+
+  return wrapper;
+}

package/src/components/table.js

@@ -0,0 +1,44 @@
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {{ key: string, label: string, width?: string, render?: Function }[]} props.columns
+ * @param {Object[]} props.data
+ * @param {boolean} [props.striped]
+ * @param {boolean} [props.hoverable]
+ * @param {boolean} [props.compact]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Table(props = {}) {
+  injectBase();
+
+  const { columns = [], data = [], striped, hoverable, compact, class: cls } = props;
+
+  const tableClass = cx(
+    'd-table',
+    striped && 'd-table-striped',
+    hoverable && 'd-table-hover',
+    compact && 'd-table-compact',
+    cls
+  );
+
+  const thead = h('thead', null,
+    h('tr', null, ...columns.map(col =>
+      h('th', { class: 'd-th', style: col.width ? { width: col.width } : undefined }, col.label)
+    ))
+  );
+
+  const tbody = h('tbody', null, ...data.map(row =>
+    h('tr', { class: 'd-tr' }, ...columns.map(col => {
+      const val = row[col.key];
+      const content = col.render ? col.render(val, row) : (val != null ? String(val) : '');
+      return h('td', { class: 'd-td' }, content);
+    }))
+  ));
+
+  return h('div', { class: 'd-table-wrap' },
+    h('table', { class: tableClass }, thead, tbody)
+  );
+}

package/src/components/tabs.js

@@ -0,0 +1,216 @@
+/**
+ * Tabs — Tabbed interface with roving tabindex keyboard navigation.
+ * Uses createRovingTabindex for arrow-key focus management.
+ *
+ * @module decantr/components/tabs
+ */
+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 { createRovingTabindex } from './_behaviors.js';
+import { icon } from './icon.js';
+
+const { div, button: buttonTag } = tags;
+
+let _tabId = 0;
+
+/**
+ * @param {Object} [props]
+ * @param {{ id: string, label: string, content?: Function, disabled?: boolean, closable?: boolean }[]} props.tabs
+ * @param {string|Function} [props.active] - Active tab id
+ * @param {Function} [props.onchange]
+ * @param {Function} [props.onclose] - Called with tab id when closable tab is closed
+ * @param {'horizontal'|'vertical'} [props.orientation='horizontal']
+ * @param {string} [props.size] - sm|lg
+ * @param {boolean|Function} [props.disabled] - Group-level disabled
+ * @param {boolean} [props.destroyInactive=true] - When false, all panels stay in DOM (hidden)
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Tabs(props = {}) {
+  injectBase();
+
+  const {
+    tabs = [],
+    active,
+    onchange,
+    onclose,
+    orientation = 'horizontal',
+    size,
+    disabled,
+    destroyInactive = true,
+    class: cls
+  } = props;
+
+  const prefix = `d-tabs-${_tabId++}`;
+
+  // Resolve initial active tab
+  let currentActive = typeof active === 'function'
+    ? active()
+    : (active || (tabs[0] && tabs[0].id));
+
+  const tabList = div({
+    class: 'd-tabs-list',
+    role: 'tablist',
+    'aria-orientation': orientation
+  });
+
+  const panelContainer = div({ class: 'd-tabs-panel-container' });
+
+  const container = div({
+    class: cx(
+      'd-tabs',
+      orientation === 'vertical' && 'd-tabs-vertical',
+      size && `d-tabs-${size}`,
+      cls
+    )
+  }, tabList, panelContainer);
+
+  // Track tab elements and panels for destroyInactive=false mode
+  const tabEls = [];
+  const panelMap = new Map(); // id -> { el, rendered }
+
+  tabs.forEach(tab => {
+    const tabBtnId = `${prefix}-tab-${tab.id}`;
+    const panelId = `${prefix}-panel-${tab.id}`;
+
+    const tabEl = buttonTag({
+      type: 'button',
+      class: cx('d-tab', tab.closable && 'd-tab-closable'),
+      role: 'tab',
+      id: tabBtnId,
+      'aria-selected': 'false',
+      'aria-controls': panelId,
+      tabindex: '-1'
+    }, tab.label);
+
+    if (tab.disabled) {
+      tabEl.disabled = true;
+    }
+
+    // Close button for closable tabs
+    if (tab.closable) {
+      const closeBtn = buttonTag({
+        class: 'd-tab-close',
+        'aria-label': `Close ${tab.label}`,
+        tabindex: '-1',
+        type: 'button'
+      }, icon('x', { size: '1em' }));
+      closeBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (onclose) onclose(tab.id);
+      });
+      tabEl.appendChild(closeBtn);
+    }
+
+    tabEl.addEventListener('click', () => {
+      if (tab.disabled) return;
+      currentActive = tab.id;
+      update();
+      if (onchange) onchange(tab.id);
+    });
+
+    tabEls.push({ el: tabEl, tab });
+    tabList.appendChild(tabEl);
+
+    // Pre-create panels for destroyInactive=false
+    if (!destroyInactive) {
+      const panelEl = div({
+        class: 'd-tabs-panel',
+        role: 'tabpanel',
+        id: panelId,
+        'aria-labelledby': tabBtnId
+      });
+      panelEl.style.display = 'none';
+      panelMap.set(tab.id, { el: panelEl, rendered: false });
+      panelContainer.appendChild(panelEl);
+    }
+  });
+
+  // Single panel for destroyInactive=true (default)
+  let singlePanel = null;
+  if (destroyInactive) {
+    singlePanel = div({
+      class: 'd-tabs-panel',
+      role: 'tabpanel'
+    });
+    panelContainer.appendChild(singlePanel);
+  }
+
+  // Roving tabindex for keyboard navigation
+  const roving = createRovingTabindex(tabList, {
+    itemSelector: '.d-tab:not([disabled])',
+    orientation,
+    onFocus: (el) => el.click()
+  });
+
+  function update() {
+    const activeId = typeof active === 'function' ? active() : currentActive;
+
+    // Update tab button states
+    let activeIndex = 0;
+    tabEls.forEach(({ el, tab }, i) => {
+      const isActive = tab.id === activeId;
+      el.classList.toggle('d-tab-active', isActive);
+      el.setAttribute('aria-selected', isActive ? 'true' : 'false');
+      if (isActive) activeIndex = i;
+    });
+
+    // Sync roving active to active tab (find non-disabled index)
+    const enabledItems = [...tabList.querySelectorAll('.d-tab:not([disabled])')];
+    const enabledIndex = enabledItems.indexOf(tabEls[activeIndex]?.el);
+    if (enabledIndex >= 0) roving.setActive(enabledIndex);
+
+    // Update panel content
+    if (destroyInactive) {
+      const activeTab = tabs.find(t => t.id === activeId);
+      singlePanel.id = `${prefix}-panel-${activeId}`;
+      singlePanel.setAttribute('aria-labelledby', `${prefix}-tab-${activeId}`);
+      singlePanel.replaceChildren();
+      if (activeTab && activeTab.content) {
+        const content = activeTab.content();
+        if (typeof content === 'string') singlePanel.appendChild(document.createTextNode(content));
+        else if (content) singlePanel.appendChild(content);
+      }
+    } else {
+      // Show/hide panels, lazy-render on first activation
+      panelMap.forEach((entry, id) => {
+        const isActive = id === activeId;
+        entry.el.style.display = isActive ? '' : 'none';
+        if (isActive && !entry.rendered) {
+          entry.rendered = true;
+          const tab = tabs.find(t => t.id === id);
+          if (tab && tab.content) {
+            const content = tab.content();
+            if (typeof content === 'string') entry.el.appendChild(document.createTextNode(content));
+            else if (content) entry.el.appendChild(content);
+          }
+        }
+      });
+    }
+  }
+
+  // Reactive effect for external active prop changes
+  if (typeof active === 'function') {
+    createEffect(() => { active(); update(); });
+  } else {
+    update();
+  }
+
+  // Reactive group disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => {
+      const v = disabled();
+      container.toggleAttribute('data-disabled', v);
+      tabEls.forEach(({ el }) => { el.disabled = v; });
+    });
+  } else if (disabled) {
+    container.setAttribute('data-disabled', '');
+    tabEls.forEach(({ el }) => { el.disabled = true; });
+  }
+
+  onDestroy(() => { roving.destroy(); });
+
+  return container;
+}

package/src/components/tag.js

@@ -0,0 +1,115 @@
+/**
+ * Tag — Categorization label with optional close/checkable behavior.
+ *
+ * @module decantr/components/tag
+ */
+import { h } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+import { pickForeground } from '../css/derive.js';
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.color] - Preset: primary|success|warning|danger or custom hex
+ * @param {boolean} [props.closable=false]
+ * @param {boolean|Function} [props.checked] - For checkable tags
+ * @param {Function} [props.onClose]
+ * @param {Function} [props.onCheck] - Called with new checked state
+ * @param {string} [props.class]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+export function Tag(props = {}, ...children) {
+  injectBase();
+  const { color, closable, checked, onClose, onCheck, class: cls, ...rest } = props;
+
+  const isCheckable = checked !== undefined;
+  const isCustomColor = color && !['primary', 'success', 'warning', 'danger'].includes(color);
+
+  const className = cx(
+    'd-tag',
+    color && !isCustomColor && `d-tag-${color}`,
+    isCustomColor && 'd-tag-custom',
+    isCheckable && 'd-tag-checkable',
+    cls
+  );
+
+  const tag = isCheckable
+    ? h('button', { type: 'button', class: className, role: 'checkbox', ...rest })
+    : h('span', { class: className, ...rest });
+
+  if (isCustomColor) {
+    tag.style.setProperty('--d-tag-bg', color);
+    tag.style.setProperty('--d-tag-fg', pickForeground(color));
+  }
+
+  children.forEach(child => {
+    if (child && typeof child === 'object' && child.nodeType) tag.appendChild(child);
+    else if (child != null) tag.appendChild(document.createTextNode(String(child)));
+  });
+
+  if (closable) {
+    const closeBtn = h('button', {
+      type: 'button',
+      class: 'd-tag-close',
+      'aria-label': 'Remove'
+    }, '\u00d7');
+    closeBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (onClose) onClose();
+      tag.remove();
+    });
+    tag.appendChild(closeBtn);
+  }
+
+  if (isCheckable) {
+    let _checked = typeof checked === 'function' ? checked() : checked;
+    tag.setAttribute('aria-checked', String(!!_checked));
+
+    tag.addEventListener('click', () => {
+      _checked = !_checked;
+      tag.setAttribute('aria-checked', String(_checked));
+      if (onCheck) onCheck(_checked);
+    });
+
+    if (typeof checked === 'function') {
+      createEffect(() => {
+        _checked = checked();
+        tag.setAttribute('aria-checked', String(!!_checked));
+      });
+    }
+  }
+
+  return tag;
+}
+
+/**
+ * Tag.CheckableGroup — Group of checkable tags.
+ * @param {Object} [props]
+ * @param {{ value: string, label: string }[]} [props.options]
+ * @param {string[]} [props.value] - Selected values
+ * @param {Function} [props.onchange]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+Tag.CheckableGroup = function CheckableGroup(props = {}) {
+  injectBase();
+  const { options = [], value = [], onchange, class: cls } = props;
+  let selected = [...value];
+
+  const group = h('div', { class: cx('d-space d-space-wrap', cls), role: 'group' });
+
+  options.forEach(opt => {
+    const tag = Tag({
+      checked: selected.includes(opt.value),
+      onCheck: (checked) => {
+        if (checked) selected.push(opt.value);
+        else selected = selected.filter(v => v !== opt.value);
+        if (onchange) onchange([...selected]);
+      }
+    }, opt.label);
+    group.appendChild(tag);
+  });
+
+  return group;
+};