decantr 0.9.0

package/src/components/radiogroup.js

@@ -0,0 +1,120 @@
+import { createEffect } from '../state/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createRovingTabindex } from './_behaviors.js';
+
+const { div, label: labelTag, input: inputTag, span } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {{ value: string, label: string, disabled?: boolean }[]} props.options
+ * @param {string|Function} [props.value]
+ * @param {string} [props.name]
+ * @param {boolean|Function} [props.disabled]
+ * @param {string} [props.orientation='vertical'] - 'vertical'|'horizontal'
+ * @param {boolean|string|Function} [props.error]
+ * @param {string} [props.size] - xs|sm|lg
+ * @param {Function} [props.onchange]
+ * @param {string} [props['aria-label']]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function RadioGroup(props = {}) {
+  injectBase();
+
+  const {
+    options = [], value, name = `d-radio-${Date.now()}`,
+    disabled, orientation = 'vertical', error, size, onchange,
+    'aria-label': ariaLabel, class: cls
+  } = props;
+
+  let currentValue = typeof value === 'function' ? value() : (value || '');
+
+  const groupProps = {
+    class: cx('d-radiogroup', orientation === 'horizontal' && 'd-radiogroup-horizontal', size && `d-radiogroup-${size}`, cls),
+    role: 'radiogroup'
+  };
+  if (ariaLabel) groupProps['aria-label'] = ariaLabel;
+
+  const group = div(groupProps);
+  const radios = [];
+
+  options.forEach((opt) => {
+    const native = inputTag({
+      type: 'radio',
+      name,
+      value: opt.value,
+      class: 'd-radio-native',
+      'aria-label': opt.label
+    });
+
+    if (opt.value === currentValue) native.checked = true;
+    if (opt.disabled) native.disabled = true;
+
+    const indicator = span({ class: 'd-radio-indicator' }, span({ class: 'd-radio-dot' }));
+    const label = span({ class: 'd-radio-label' }, opt.label);
+
+    const wrapper = labelTag({
+      class: cx('d-radio', opt.disabled && 'd-radio-disabled')
+    }, native, indicator, label);
+
+    native.addEventListener('change', () => {
+      if (native.checked) {
+        currentValue = opt.value;
+        updateChecked();
+        if (onchange) onchange(opt.value);
+      }
+    });
+
+    radios.push({ native, wrapper, opt });
+    group.appendChild(wrapper);
+  });
+
+  function updateChecked() {
+    radios.forEach(({ native, opt }) => {
+      native.checked = opt.value === currentValue;
+    });
+  }
+
+  // Use createRovingTabindex for keyboard navigation
+  createRovingTabindex(group, {
+    itemSelector: '.d-radio-native:not([disabled])',
+    orientation: orientation === 'horizontal' ? 'horizontal' : 'vertical',
+    onFocus: (el) => {
+      el.checked = true;
+      el.dispatchEvent(new Event('change'));
+    }
+  });
+
+  // Reactive value
+  if (typeof value === 'function') {
+    createEffect(() => {
+      currentValue = value();
+      updateChecked();
+    });
+  }
+
+  // Reactive disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => {
+      const v = disabled();
+      radios.forEach(({ native }) => { native.disabled = v; });
+      group.toggleAttribute('data-disabled', v);
+    });
+  } else if (disabled) {
+    radios.forEach(({ native }) => { native.disabled = true; });
+    group.setAttribute('data-disabled', '');
+  }
+
+  // Reactive error
+  if (typeof error === 'function') {
+    createEffect(() => {
+      const v = error();
+      group.toggleAttribute('data-error', !!v);
+    });
+  } else if (error) {
+    group.setAttribute('data-error', '');
+  }
+
+  return group;
+}

package/src/components/range-slider.js

@@ -0,0 +1,176 @@
+/**
+ * RangeSlider — Dual-thumb slider for selecting a numeric range.
+ * Keyboard accessible with ARIA slider pattern.
+ * Uses createDrag behavior for pointer interaction.
+ *
+ * @module decantr/components/range-slider
+ */
+import { h } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+import { createDrag } from './_behaviors.js';
+
+/**
+ * @param {Object} [props]
+ * @param {Array<number>|Function} [props.value] - [min, max]
+ * @param {number} [props.min=0]
+ * @param {number} [props.max=100]
+ * @param {number} [props.step=1]
+ * @param {Function} [props.onchange] - ([low, high]) => void
+ * @param {boolean|Function} [props.disabled]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function RangeSlider(props = {}) {
+  injectBase();
+  const {
+    value, min: pMin = 0, max: pMax = 100, step = 1,
+    onchange, disabled, class: cls
+  } = props;
+
+  let low = pMin;
+  let high = pMax;
+
+  function parseValue(v) {
+    if (!v || !Array.isArray(v)) return;
+    low = clamp(v[0] ?? pMin);
+    high = clamp(v[1] ?? pMax);
+    if (low > high) { const t = low; low = high; high = t; }
+  }
+
+  function clamp(v) {
+    return Math.min(pMax, Math.max(pMin, Math.round(v / step) * step));
+  }
+
+  function pct(v) {
+    return ((v - pMin) / (pMax - pMin)) * 100;
+  }
+
+  parseValue(typeof value === 'function' ? value() : value);
+
+  const track = h('div', { class: 'd-rangeslider-track' });
+  const fill = h('div', { class: 'd-rangeslider-fill' });
+
+  const thumbLow = h('div', {
+    class: 'd-rangeslider-thumb',
+    role: 'slider',
+    tabindex: '0',
+    'aria-valuemin': String(pMin),
+    'aria-valuemax': String(pMax),
+    'aria-valuenow': String(low),
+    'aria-label': 'Range start'
+  });
+
+  const thumbHigh = h('div', {
+    class: 'd-rangeslider-thumb',
+    role: 'slider',
+    tabindex: '0',
+    'aria-valuemin': String(pMin),
+    'aria-valuemax': String(pMax),
+    'aria-valuenow': String(high),
+    'aria-label': 'Range end'
+  });
+
+  const container = h('div', {
+    class: cx('d-rangeslider', cls),
+    role: 'group',
+    'aria-label': 'Range slider'
+  }, track, fill, thumbLow, thumbHigh);
+
+  function syncDOM() {
+    const lp = pct(low);
+    const hp = pct(high);
+    thumbLow.style.left = lp + '%';
+    thumbHigh.style.left = hp + '%';
+    fill.style.left = lp + '%';
+    fill.style.width = (hp - lp) + '%';
+    thumbLow.setAttribute('aria-valuenow', String(low));
+    thumbHigh.setAttribute('aria-valuenow', String(high));
+  }
+
+  function emit() {
+    if (onchange) onchange([low, high]);
+  }
+
+  function valueFromX(clientX) {
+    const rect = container.getBoundingClientRect();
+    const ratio = (clientX - rect.left) / rect.width;
+    return clamp(pMin + ratio * (pMax - pMin));
+  }
+
+  // Drag for low thumb
+  createDrag(thumbLow, {
+    onMove: (x) => {
+      const v = valueFromX(x);
+      if (v <= high) { low = v; } else { low = high; high = v; }
+      syncDOM();
+    },
+    onEnd: () => emit()
+  });
+
+  // Drag for high thumb
+  createDrag(thumbHigh, {
+    onMove: (x) => {
+      const v = valueFromX(x);
+      if (v >= low) { high = v; } else { high = low; low = v; }
+      syncDOM();
+    },
+    onEnd: () => emit()
+  });
+
+  // Click on track to move nearest thumb
+  container.addEventListener('pointerdown', (e) => {
+    if (e.target === thumbLow || e.target === thumbHigh) return;
+    const v = valueFromX(e.clientX);
+    if (Math.abs(v - low) <= Math.abs(v - high)) {
+      low = v;
+      thumbLow.focus();
+    } else {
+      high = v;
+      thumbHigh.focus();
+    }
+    syncDOM();
+    emit();
+  });
+
+  // Keyboard
+  function handleKey(e, isLow) {
+    let delta = 0;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') delta = step;
+    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') delta = -step;
+    else if (e.key === 'Home') { delta = pMin - (isLow ? low : high); }
+    else if (e.key === 'End') { delta = pMax - (isLow ? low : high); }
+    else return;
+    e.preventDefault();
+    if (isLow) {
+      low = clamp(low + delta);
+      if (low > high) low = high;
+    } else {
+      high = clamp(high + delta);
+      if (high < low) high = low;
+    }
+    syncDOM();
+    emit();
+  }
+
+  thumbLow.addEventListener('keydown', (e) => handleKey(e, true));
+  thumbHigh.addEventListener('keydown', (e) => handleKey(e, false));
+
+  // Reactive disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => {
+      if (disabled()) container.setAttribute('data-disabled', '');
+      else container.removeAttribute('data-disabled');
+    });
+  } else if (disabled) {
+    container.setAttribute('data-disabled', '');
+  }
+
+  // Reactive value
+  if (typeof value === 'function') {
+    createEffect(() => { parseValue(value()); syncDOM(); });
+  }
+
+  syncDOM();
+  return container;
+}

package/src/components/rate.js

@@ -0,0 +1,186 @@
+/**
+ * Rate — Star rating component.
+ * Supports half-star, custom icons, reactive value.
+ *
+ * @module decantr/components/rate
+ */
+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';
+
+const { div, button: buttonTag } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {number|Function} [props.value=0] - Current rating value
+ * @param {number} [props.count=5] - Number of stars
+ * @param {boolean} [props.half=false] - Allow half-star ratings
+ * @param {boolean|Function} [props.disabled=false]
+ * @param {boolean} [props.readonly=false]
+ * @param {string} [props.size] - sm|lg
+ * @param {string} [props.character='★'] - Star character or custom text
+ * @param {boolean|string|Function} [props.error]
+ * @param {boolean|string|Function} [props.success]
+ * @param {string} [props.label] - Label for createFormField
+ * @param {string} [props.help] - Help text for createFormField
+ * @param {boolean} [props.required] - Required indicator
+ * @param {Function} [props.onchange]
+ * @param {string} [props['aria-label']]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Rate(props = {}) {
+  injectBase();
+  const {
+    value = 0, count = 5, half = false, disabled = false, readonly = false,
+    size, character = '\u2605', onchange, class: cls,
+    error, success, label, help, required,
+    'aria-label': ariaLabel
+  } = props;
+
+  let current = typeof value === 'function' ? value() : value;
+  let hoverVal = -1;
+
+  const container = div({
+    class: cx('d-rate', size && `d-rate-${size}`, cls),
+    role: 'radiogroup',
+    'aria-label': ariaLabel || 'Rating',
+    'aria-disabled': (typeof disabled === 'function' ? disabled() : disabled) ? 'true' : 'false'
+  });
+
+  // Reactive aria-disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => {
+      container.setAttribute('aria-disabled', disabled() ? 'true' : 'false');
+    });
+  }
+
+  // Error state
+  if (typeof error === 'function') {
+    createEffect(() => {
+      const v = error();
+      container.toggleAttribute('data-error', !!v);
+      container.setAttribute('aria-invalid', v ? 'true' : 'false');
+    });
+  } else if (error) {
+    container.setAttribute('data-error', '');
+    container.setAttribute('aria-invalid', 'true');
+  }
+
+  // Success state
+  if (typeof success === 'function') {
+    createEffect(() => { container.toggleAttribute('data-success', !!success()); });
+  } else if (success) {
+    container.setAttribute('data-success', '');
+  }
+
+  const stars = [];
+  const cleanups = [];
+
+  function isDisabled() {
+    return readonly || (typeof disabled === 'function' ? disabled() : disabled);
+  }
+
+  function updateStars() {
+    const displayVal = hoverVal >= 0 ? hoverVal : current;
+    stars.forEach((star, i) => {
+      const val = i + 1;
+      const filled = displayVal >= val;
+      const halfFilled = half && displayVal >= val - 0.5 && displayVal < val;
+      star.classList.toggle('d-rate-star-active', filled);
+      star.classList.toggle('d-rate-star-half', halfFilled && !filled);
+      star.setAttribute('aria-checked', filled || halfFilled ? 'true' : 'false');
+    });
+  }
+
+  for (let i = 0; i < count; i++) {
+    const star = buttonTag({
+      type: 'button',
+      class: 'd-rate-star',
+      role: 'radio',
+      'aria-label': `${i + 1} star${i > 0 ? 's' : ''}`,
+      tabindex: i === 0 ? '0' : '-1'
+    }, character);
+
+    const onClick = () => {
+      if (isDisabled()) return;
+      const newVal = i + 1;
+      current = current === newVal ? 0 : newVal;
+      updateStars();
+      if (onchange) onchange(current);
+    };
+    star.addEventListener('click', onClick);
+    cleanups.push(() => star.removeEventListener('click', onClick));
+
+    if (half) {
+      const onMousemove = (e) => {
+        if (isDisabled()) return;
+        const rect = star.getBoundingClientRect();
+        hoverVal = e.clientX < rect.left + rect.width / 2 ? i + 0.5 : i + 1;
+        updateStars();
+      };
+      star.addEventListener('mousemove', onMousemove);
+      cleanups.push(() => star.removeEventListener('mousemove', onMousemove));
+    } else {
+      const onMouseenter = () => {
+        if (isDisabled()) return;
+        hoverVal = i + 1;
+        updateStars();
+      };
+      star.addEventListener('mouseenter', onMouseenter);
+      cleanups.push(() => star.removeEventListener('mouseenter', onMouseenter));
+    }
+
+    const onKeydown = (e) => {
+      if (isDisabled()) return;
+      if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        const step = half ? 0.5 : 1;
+        current = Math.min(count, current + step);
+        updateStars();
+        if (onchange) onchange(current);
+        const next = Math.min(count - 1, i + 1);
+        stars[next].focus();
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        const step = half ? 0.5 : 1;
+        current = Math.max(0, current - step);
+        updateStars();
+        if (onchange) onchange(current);
+        const prev = Math.max(0, i - 1);
+        stars[prev].focus();
+      }
+    };
+    star.addEventListener('keydown', onKeydown);
+    cleanups.push(() => star.removeEventListener('keydown', onKeydown));
+
+    stars.push(star);
+    container.appendChild(star);
+  }
+
+  const onMouseleave = () => {
+    hoverVal = -1;
+    updateStars();
+  };
+  container.addEventListener('mouseleave', onMouseleave);
+  cleanups.push(() => container.removeEventListener('mouseleave', onMouseleave));
+
+  updateStars();
+
+  if (typeof value === 'function') {
+    createEffect(() => { current = value(); updateStars(); });
+  }
+
+  // Cleanup
+  onDestroy(() => { cleanups.forEach(fn => fn()); });
+
+  // Form field wrapping
+  if (label || help) {
+    const { wrapper } = createFormField(container, { label, error, help, required, success });
+    return wrapper;
+  }
+
+  return container;
+}

package/src/components/resizable.js

@@ -0,0 +1,83 @@
+/**
+ * Resizable — Split pane layout with draggable handle.
+ * Uses createDrag behavior for pointer-based resizing.
+ *
+ * @module decantr/components/resizable
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+import { createDrag } from './_behaviors.js';
+
+/**
+ * @param {Object} [props]
+ * @param {'horizontal'|'vertical'} [props.direction='horizontal']
+ * @param {number} [props.defaultSize=50] - Default size of first panel in %
+ * @param {number} [props.minSize=10] - Min size in %
+ * @param {number} [props.maxSize=90] - Max size in %
+ * @param {Function} [props.onResize] - Called with new size %
+ * @param {string} [props.class]
+ * @param {...Node} children - Exactly 2 children (panels)
+ * @returns {HTMLElement}
+ */
+export function Resizable(props = {}, ...children) {
+  injectBase();
+  const { direction = 'horizontal', defaultSize = 50, minSize = 10, maxSize = 90, onResize, class: cls, ...rest } = props;
+
+  const isVert = direction === 'vertical';
+  let size = defaultSize;
+
+  const panel1 = h('div', { class: 'd-resizable-panel' });
+  const panel2 = h('div', { class: 'd-resizable-panel' });
+
+  if (children[0]) panel1.appendChild(children[0]);
+  if (children[1]) panel2.appendChild(children[1]);
+
+  const handleBar = h('div', { class: 'd-resizable-handle-bar' });
+  const handle = h('div', {
+    class: cx('d-resizable-handle', isVert && 'd-resizable-handle-vertical'),
+    role: 'separator',
+    'aria-orientation': isVert ? 'horizontal' : 'vertical',
+    tabindex: '0',
+    'aria-valuenow': String(size),
+    'aria-valuemin': String(minSize),
+    'aria-valuemax': String(maxSize)
+  }, handleBar);
+
+  const container = h('div', {
+    class: cx('d-resizable', isVert && 'd-resizable-vertical', cls),
+    ...rest
+  }, panel1, handle, panel2);
+
+  function applySize() {
+    const prop = isVert ? 'height' : 'width';
+    panel1.style[prop] = `${size}%`;
+    panel2.style[prop] = `${100 - size}%`;
+    handle.setAttribute('aria-valuenow', String(Math.round(size)));
+    if (onResize) onResize(size);
+  }
+
+  createDrag(handle, {
+    onMove(x, y, dx, dy) {
+      const rect = container.getBoundingClientRect();
+      const total = isVert ? rect.height : rect.width;
+      const delta = isVert ? dy : dx;
+      const pct = (delta / total) * 100;
+      size = Math.max(minSize, Math.min(maxSize, defaultSize + pct));
+      applySize();
+    },
+    onStart() { container.style.userSelect = 'none'; },
+    onEnd() { container.style.userSelect = ''; }
+  });
+
+  // Keyboard support
+  handle.addEventListener('keydown', (e) => {
+    const step = e.shiftKey ? 10 : 2;
+    if (e.key === (isVert ? 'ArrowUp' : 'ArrowLeft')) { e.preventDefault(); size = Math.max(minSize, size - step); applySize(); }
+    else if (e.key === (isVert ? 'ArrowDown' : 'ArrowRight')) { e.preventDefault(); size = Math.min(maxSize, size + step); applySize(); }
+    else if (e.key === 'Home') { e.preventDefault(); size = minSize; applySize(); }
+    else if (e.key === 'End') { e.preventDefault(); size = maxSize; applySize(); }
+  });
+
+  applySize();
+  return container;
+}

package/src/components/result.js

@@ -0,0 +1,57 @@
+/**
+ * Result — Full-page result feedback (success, error, info, warning, 403, 404, 500).
+ *
+ * @module decantr/components/result
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+import { icon as makeIcon } from './icon.js';
+
+const STATUS_ICON_MAP = {
+  success: 'check-circle',
+  error: 'x-circle',
+  info: 'info',
+  warning: 'alert-triangle',
+  403: 'shield',
+  404: 'search',
+  500: 'alert-circle'
+};
+
+/**
+ * @param {Object} [props]
+ * @param {'success'|'error'|'info'|'warning'|'403'|'404'|'500'} [props.status='info']
+ * @param {string} [props.title]
+ * @param {string} [props.subTitle]
+ * @param {Node} [props.icon] - Custom icon override
+ * @param {Node[]} [props.extra] - Action buttons at bottom
+ * @param {string} [props.class]
+ * @param {...Node} children - Additional content
+ * @returns {HTMLElement}
+ */
+export function Result(props = {}, ...children) {
+  injectBase();
+  const { status = 'info', title, subTitle, icon, extra, class: cls } = props;
+
+  const iconNode = icon
+    ? (typeof icon === 'string' ? h('div', { class: 'd-result-icon' }, icon) : h('div', { class: 'd-result-icon' }, icon))
+    : h('div', { class: cx('d-result-icon', `d-result-icon-${status}`) }, makeIcon(STATUS_ICON_MAP[status] || 'info', { size: '3rem' }));
+
+  const el = h('div', { class: cx('d-result', cls) });
+  el.appendChild(iconNode);
+  if (title) el.appendChild(h('div', { class: 'd-result-title' }, title));
+  if (subTitle) el.appendChild(h('div', { class: 'd-result-subtitle' }, subTitle));
+
+  if (children.length) {
+    const content = h('div', { class: 'd-result-content' });
+    children.forEach(c => { if (c && c.nodeType) content.appendChild(c); });
+    el.appendChild(content);
+  }
+
+  if (extra && extra.length) {
+    const actions = h('div', { class: 'd-result-extra' });
+    extra.forEach(node => { if (node && node.nodeType) actions.appendChild(node); });
+    el.appendChild(actions);
+  }
+
+  return el;
+}

package/src/components/scroll-area.js

@@ -0,0 +1,43 @@
+/**
+ * ScrollArea — Custom scrollable container with thin scrollbar styling.
+ *
+ * @module decantr/components/scroll-area
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.height] - CSS height for the scrollable area
+ * @param {string} [props.width] - CSS width
+ * @param {'vertical'|'horizontal'|'both'} [props.direction='vertical']
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+export function ScrollArea(props = {}, ...children) {
+  injectBase();
+  const { height, width, direction = 'vertical', class: cls, ...rest } = props;
+
+  const style = {};
+  if (height) style.height = height;
+  if (width) style.width = width;
+
+  const viewportStyle = {};
+  if (direction === 'vertical') viewportStyle.overflowX = 'hidden';
+  else if (direction === 'horizontal') viewportStyle.overflowY = 'hidden';
+
+  const viewport = h('div', {
+    class: 'd-scrollarea-viewport',
+    style: Object.keys(viewportStyle).length ? viewportStyle : undefined,
+    tabindex: '0',
+    role: 'region',
+    'aria-label': 'Scrollable content'
+  }, ...children);
+
+  return h('div', {
+    class: cx('d-scrollarea', cls),
+    style: Object.keys(style).length ? style : undefined,
+    ...rest
+  }, viewport);
+}