decantr 0.9.0

package/src/components/float-button.js

@@ -0,0 +1,90 @@
+/**
+ * FloatButton — Floating action button (FAB) fixed to viewport corner.
+ * Supports expandable group of actions.
+ *
+ * @module decantr/components/float-button
+ */
+import { onDestroy } from '../core/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createOverlay } from './_behaviors.js';
+
+const { div, span, button: buttonTag } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {string|Node} [props.icon='+']
+ * @param {string} [props.tooltip]
+ * @param {'circle'|'square'} [props.shape='circle']
+ * @param {'default'|'primary'} [props.type='default']
+ * @param {Function} [props.onClick]
+ * @param {'right-bottom'|'right-top'|'left-bottom'|'left-top'} [props.position='right-bottom']
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function FloatButton(props = {}) {
+  injectBase();
+  const { icon = '+', tooltip, shape = 'circle', type = 'default', onClick, position = 'right-bottom', class: cls } = props;
+
+  const iconEl = typeof icon === 'string' ? span({ class: 'd-float-btn-icon' }, icon) : icon;
+
+  const btn = buttonTag({
+    type: 'button',
+    class: cx('d-float-btn', `d-float-btn-${shape}`, `d-float-btn-${type}`, cls),
+    'aria-label': tooltip || 'Action'
+  }, iconEl);
+
+  if (tooltip) {
+    btn.setAttribute('title', tooltip);
+  }
+
+  if (onClick) btn.addEventListener('click', onClick);
+
+  const wrap = div({ class: cx('d-float-btn-wrap', `d-float-btn-${position}`) }, btn);
+
+  return wrap;
+}
+
+/**
+ * FloatButton.Group — Expandable group of float buttons.
+ * @param {Object} [props]
+ * @param {string|Node} [props.icon='+']
+ * @param {'circle'|'square'} [props.shape='circle']
+ * @param {'top'|'bottom'|'left'|'right'} [props.direction='top']
+ * @param {'right-bottom'|'right-top'|'left-bottom'|'left-top'} [props.position='right-bottom']
+ * @param {string} [props.class]
+ * @param {...Node} children - FloatButton elements
+ * @returns {HTMLElement}
+ */
+FloatButton.Group = function FloatButtonGroup(props = {}, ...children) {
+  injectBase();
+  const { icon = '+', shape = 'circle', direction = 'top', position = 'right-bottom', class: cls } = props;
+
+  const iconEl = typeof icon === 'string' ? span({ class: 'd-float-btn-icon' }, icon) : icon;
+
+  const trigger = buttonTag({
+    type: 'button',
+    class: cx('d-float-btn', `d-float-btn-${shape}`, 'd-float-btn-primary'),
+    'aria-label': 'Actions',
+    'aria-expanded': 'false'
+  }, iconEl);
+
+  const menu = div({ class: cx('d-float-btn-group-menu', `d-float-btn-group-${direction}`) });
+  children.forEach(c => { if (c && c.nodeType) menu.appendChild(c); });
+
+  const overlay = createOverlay(trigger, menu, {
+    trigger: 'click',
+    closeOnEscape: true,
+    closeOnOutside: true,
+    onOpen: () => trigger.classList.add('d-float-btn-active'),
+    onClose: () => trigger.classList.remove('d-float-btn-active')
+  });
+
+  const wrap = div({ class: cx('d-float-btn-wrap', `d-float-btn-${position}`, cls) }, menu, trigger);
+
+  onDestroy(() => {
+    overlay.destroy();
+  });
+
+  return wrap;
+};

package/src/components/form.js

@@ -0,0 +1,106 @@
+/**
+ * Form — Form wrapper with validation, layout modes, and field management.
+ * Field wraps any form control with label, error, and help text.
+ * Re-exports createFormField from _behaviors.js for imperative use.
+ *
+ * @module decantr/components/form
+ */
+import { h } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+import { createFormField } from './_behaviors.js';
+
+/**
+ * Form — Container for form fields.
+ * @param {Object} [props]
+ * @param {'vertical'|'horizontal'|'inline'} [props.layout='vertical']
+ * @param {Function} [props.onSubmit]
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+export function Form(props = {}, ...children) {
+  injectBase();
+  const { layout = 'vertical', onSubmit, class: cls, ...rest } = props;
+
+  const form = h('form', {
+    class: cx('d-form', layout === 'horizontal' && 'd-form-horizontal', layout === 'inline' && 'd-form-inline', cls),
+    ...rest
+  }, ...children);
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    if (onSubmit) onSubmit(e);
+  });
+
+  return form;
+}
+
+/**
+ * Form.Actions — Button row at bottom of form.
+ * @param {Object} [props]
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+Form.Actions = function Actions(props = {}, ...children) {
+  injectBase();
+  const { class: cls, ...rest } = props;
+  return h('div', { class: cx('d-form-actions', cls), ...rest }, ...children);
+};
+
+/**
+ * Field — Wraps a form control with label, error, and help text.
+ * Can be used declaratively as a component.
+ *
+ * @param {Object} [props]
+ * @param {string} [props.label]
+ * @param {string|Function} [props.error]
+ * @param {string} [props.help]
+ * @param {boolean} [props.required]
+ * @param {string} [props.class]
+ * @param {...Node} children - The form control(s)
+ * @returns {HTMLElement}
+ */
+export function Field(props = {}, ...children) {
+  injectBase();
+  const { label, error, help, required, class: cls, ...rest } = props;
+
+  const wrapper = h('div', { class: cx('d-field', cls), ...rest });
+
+  if (label) {
+    const labelEl = h('label', { class: 'd-field-label' }, label);
+    if (required) {
+      labelEl.appendChild(h('span', { class: 'd-field-required', 'aria-hidden': 'true' }, ' *'));
+    }
+    wrapper.appendChild(labelEl);
+  }
+
+  children.forEach(child => {
+    if (child && child.nodeType) wrapper.appendChild(child);
+  });
+
+  if (help) {
+    wrapper.appendChild(h('div', { class: 'd-field-help' }, help));
+  }
+
+  if (error) {
+    const errEl = h('div', { class: 'd-field-error', role: 'alert' });
+    wrapper.appendChild(errEl);
+
+    if (typeof error === 'function') {
+      createEffect(() => {
+        const msg = error();
+        errEl.textContent = msg || '';
+        errEl.style.display = msg ? '' : 'none';
+      });
+    } else {
+      errEl.textContent = error;
+    }
+  }
+
+  return wrapper;
+}
+
+// Re-export for imperative wrapping
+export { createFormField };

package/src/components/hover-card.js

@@ -0,0 +1,49 @@
+/**
+ * HoverCard — Content card that appears on hover over a trigger.
+ * Uses createOverlay behavior with hover trigger.
+ *
+ * @module decantr/components/hover-card
+ */
+import { onDestroy } from '../core/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createOverlay } from './_behaviors.js';
+
+const { div, span } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {Function} [props.trigger] - Returns trigger element
+ * @param {'top'|'bottom'|'left'|'right'} [props.position='bottom']
+ * @param {number} [props.openDelay=300]
+ * @param {number} [props.closeDelay=200]
+ * @param {string} [props.class]
+ * @param {...Node} children - Card content
+ * @returns {HTMLElement}
+ */
+export function HoverCard(props = {}, ...children) {
+  injectBase();
+  const { trigger, position = 'bottom', openDelay = 300, closeDelay = 200, class: cls, ...rest } = props;
+
+  const triggerEl = typeof trigger === 'function' ? trigger() : span(null, 'Hover me');
+
+  const content = div({
+    class: cx('d-hovercard-content', `d-popover-${position}`, cls),
+    ...rest
+  }, ...children);
+
+  const wrap = div({ class: 'd-hovercard' }, triggerEl, content);
+
+  const overlay = createOverlay(triggerEl, content, {
+    trigger: 'hover',
+    hoverDelay: openDelay,
+    hoverCloseDelay: closeDelay,
+    closeOnEscape: true
+  });
+
+  onDestroy(() => {
+    overlay.destroy();
+  });
+
+  return wrap;
+}

package/src/components/icon.js

@@ -0,0 +1,87 @@
+import { h } from '../core/index.js';
+import { getIconPath } from '../icons/index.js';
+
+let styleEl = null;
+const injectedIcons = new Set();
+
+const WEIGHT_MAP = { thin: 1, light: 1.5, regular: 2, medium: 2.5, bold: 3 };
+
+function resolveWeight(w) {
+  if (w == null) return 2;
+  if (typeof w === 'string') return WEIGHT_MAP[w] || 2;
+  return Math.max(0.5, Math.min(4, Number(w) || 2));
+}
+
+function variantKey(name, weight, filled) {
+  let key = name;
+  if (weight !== 2) key += `--w${String(weight).replace('.', 'p')}`;
+  if (filled) key += (weight !== 2 ? '-filled' : '--filled');
+  return key;
+}
+
+function ensureStyleEl() {
+  if (styleEl) return styleEl;
+  if (typeof document === 'undefined') return null;
+  styleEl = document.querySelector('style[data-decantr-icons]');
+  if (!styleEl) {
+    styleEl = document.createElement('style');
+    styleEl.setAttribute('data-decantr-icons', '');
+    document.head.appendChild(styleEl);
+  }
+  return styleEl;
+}
+
+function buildDataUri(inner, weight, filled) {
+  const isFillBased = /fill=["'](?!none["'])/.test(inner);
+  if (isFillBased) {
+    return `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black' stroke='none'>${inner}</svg>`)}")`;
+  }
+  const fillAttr = filled ? `fill='black'` : `fill='none'`;
+  const sw = weight != null ? weight : 2;
+  const attrs = `${fillAttr} stroke='black' stroke-width='${sw}' stroke-linecap='round' stroke-linejoin='round'`;
+  return `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' ${attrs}>${inner}</svg>`)}")`;
+}
+
+function injectIconCSS(name, inner, weight, filled) {
+  const vk = variantKey(name, weight, filled);
+  if (injectedIcons.has(vk)) return vk;
+  injectedIcons.add(vk);
+  const el = ensureStyleEl();
+  if (!el) return vk;
+  const uri = buildDataUri(inner, weight, filled);
+  const sel = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(`d-i-${vk}`) : `d-i-${vk}`;
+  el.textContent += `.${sel}{-webkit-mask-image:${uri};mask-image:${uri}}`;
+  return vk;
+}
+
+/**
+ * @param {string} name - Icon name (kebab-case, e.g. 'check', 'chevron-down')
+ * @param {Object} [opts]
+ * @param {string|number} [opts.size] - CSS size (default: 1.25em)
+ * @param {string|number} [opts.weight] - Stroke weight: 'thin'|'light'|'regular'|'medium'|'bold' or number 0.5-4 (default: 2)
+ * @param {boolean} [opts.filled] - Fill closed shapes (default: false)
+ * @param {string} [opts.class]
+ * @returns {HTMLElement}
+ */
+export function icon(name, opts = {}) {
+  const { size = '1.25em', weight: rawWeight, filled = false, class: cls, ...rest } = opts;
+  const cssSize = typeof size === 'number' ? `${size}px` : size;
+  const weight = resolveWeight(rawWeight);
+
+  const inner = getIconPath(name);
+  let vk = name;
+  if (inner) {
+    vk = injectIconCSS(name, inner, weight, filled);
+  }
+
+  const className = cls ? `d-i d-i-${vk} ${cls}` : `d-i d-i-${vk}`;
+  const el = h('span', {
+    class: className,
+    role: 'img',
+    'aria-hidden': 'true',
+    style: { width: cssSize, height: cssSize },
+    ...rest
+  });
+
+  return el;
+}

package/src/components/image.js

@@ -0,0 +1,97 @@
+/**
+ * Image — Enhanced image with loading state, fallback, and lightbox preview.
+ *
+ * @module decantr/components/image
+ */
+import { h, onDestroy } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.src] - Image URL
+ * @param {string} [props.alt='']
+ * @param {string} [props.width]
+ * @param {string} [props.height]
+ * @param {'cover'|'contain'|'fill'|'none'} [props.fit='cover']
+ * @param {boolean} [props.preview=false] - Enable click-to-zoom lightbox
+ * @param {string} [props.fallback] - Fallback text/icon on error
+ * @param {string} [props.placeholder] - Placeholder while loading
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Image(props = {}) {
+  injectBase();
+  const { src, alt = '', width, height, fit = 'cover', preview = false, fallback = 'Image not available', placeholder, class: cls, ...rest } = props;
+
+  const style = {};
+  if (width) style.width = width;
+  if (height) style.height = height;
+
+  const container = h('div', {
+    class: cx('d-image', preview && 'd-image-preview', cls),
+    style,
+    ...rest
+  });
+
+  const img = h('img', {
+    src,
+    alt,
+    style: { objectFit: fit },
+    loading: 'lazy'
+  });
+
+  img.addEventListener('error', () => {
+    img.remove();
+    container.appendChild(h('div', { class: 'd-image-fallback' }, fallback));
+  });
+
+  container.appendChild(img);
+
+  if (preview) {
+    let activeOverlay = null;
+    let activeHandler = null;
+
+    function dismissOverlay() {
+      if (activeOverlay) { activeOverlay.remove(); activeOverlay = null; }
+      if (activeHandler) { document.removeEventListener('keydown', activeHandler); activeHandler = null; }
+    }
+
+    container.addEventListener('click', () => {
+      const overlay = h('div', { class: 'd-image-overlay', role: 'dialog', 'aria-label': 'Image preview' });
+      const previewImg = h('img', { src, alt, style: { objectFit: 'contain' } });
+      overlay.appendChild(previewImg);
+
+      activeOverlay = overlay;
+      activeHandler = (e) => { if (e.key === 'Escape') dismissOverlay(); };
+
+      overlay.addEventListener('click', dismissOverlay);
+      document.addEventListener('keydown', activeHandler);
+
+      document.body.appendChild(overlay);
+    });
+
+    container.setAttribute('role', 'button');
+    container.setAttribute('tabindex', '0');
+    container.setAttribute('aria-label', `Preview ${alt || 'image'}`);
+    container.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); container.click(); }
+    });
+
+    onDestroy(dismissOverlay);
+  }
+
+  return container;
+}
+
+/**
+ * Image.Group — Wraps multiple images for grouped preview navigation.
+ * @param {Object} [props]
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+Image.Group = function Group(props = {}, ...children) {
+  injectBase();
+  const { class: cls, ...rest } = props;
+  return h('div', { class: cx('d-space d-space-wrap', cls), ...rest }, ...children);
+};

package/src/components/index.js

@@ -0,0 +1,117 @@
+// ─── Original Components ─────────────────────────────────────────
+export { Button, buttonVariants } from './button.js';
+export { Spinner } from './spinner.js';
+export { Input } from './input.js';
+export { Textarea } from './textarea.js';
+export { Checkbox } from './checkbox.js';
+export { Switch } from './switch.js';
+export { Select } from './select.js';
+export { Card } from './card.js';
+export { Badge } from './badge.js';
+export { Modal } from './modal.js';
+export { Tabs } from './tabs.js';
+export { Accordion } from './accordion.js';
+export { Separator } from './separator.js';
+export { Breadcrumb } from './breadcrumb.js';
+export { Table } from './table.js';
+export { Avatar } from './avatar.js';
+export { Progress } from './progress.js';
+export { Skeleton } from './skeleton.js';
+export { Tooltip } from './tooltip.js';
+export { Alert } from './alert.js';
+export { toast, resetToasts } from './toast.js';
+export { Chip } from './chip.js';
+export { Dropdown } from './dropdown.js';
+export { Drawer } from './drawer.js';
+export { Pagination } from './pagination.js';
+export { RadioGroup } from './radiogroup.js';
+export { Popover } from './popover.js';
+export { Combobox } from './combobox.js';
+export { Slider } from './slider.js';
+export { icon } from './icon.js';
+export { registerIcon, registerIcons } from '../icons/index.js';
+
+// ─── General ─────────────────────────────────────────────────────
+export { Toggle, ToggleGroup } from './toggle.js';
+export { Title, Text, Paragraph, Link, Blockquote } from './typography.js';
+export { Kbd } from './kbd.js';
+
+// ─── Layout ──────────────────────────────────────────────────────
+export { Shell } from './shell.js';
+export { Space } from './space.js';
+export { AspectRatio } from './aspect-ratio.js';
+export { Resizable } from './resizable.js';
+export { ScrollArea } from './scroll-area.js';
+export { Collapsible } from './collapsible.js';
+export { Splitter } from './splitter.js';
+
+// ─── Navigation ──────────────────────────────────────────────────
+export { Menu } from './menu.js';
+export { Steps } from './steps.js';
+export { Segmented } from './segmented.js';
+export { Affix } from './affix.js';
+export { ContextMenu } from './context-menu.js';
+export { NavigationMenu } from './navigation-menu.js';
+export { BackTop } from './back-top.js';
+
+// ─── Form ────────────────────────────────────────────────────────
+export { InputGroup, CompactGroup } from './input-group.js';
+export { InputNumber } from './input-number.js';
+export { InputOTP } from './input-otp.js';
+export { Rate } from './rate.js';
+export { ColorPicker } from './color-picker.js';
+export { ColorPalette } from './color-palette.js';
+export { DatePicker } from './date-picker.js';
+export { TimePicker } from './time-picker.js';
+export { Upload } from './upload.js';
+export { Transfer } from './transfer.js';
+export { Cascader } from './cascader.js';
+export { Mentions } from './mentions.js';
+export { Label } from './label.js';
+export { Form, Field, createFormField } from './form.js';
+export { DateRangePicker } from './date-range-picker.js';
+export { TimeRangePicker } from './time-range-picker.js';
+export { RangeSlider } from './range-slider.js';
+export { TreeSelect } from './tree-select.js';
+
+// ─── Data Display ────────────────────────────────────────────────
+export { DataTable } from './data-table.js';
+export { AvatarGroup } from './avatar-group.js';
+export { Tag } from './tag.js';
+export { List } from './list.js';
+export { Tree } from './tree.js';
+export { Descriptions } from './descriptions.js';
+export { Statistic } from './statistic.js';
+export { Calendar } from './calendar.js';
+export { Carousel } from './carousel.js';
+export { Empty } from './empty.js';
+export { Placeholder } from './placeholder.js';
+export { Image } from './image.js';
+export { Timeline } from './timeline.js';
+export { Comment } from './comment.js';
+export { QRCode } from './qrcode.js';
+export { HoverCard } from './hover-card.js';
+
+// ─── Feedback ────────────────────────────────────────────────────
+export { AlertDialog } from './alert-dialog.js';
+export { notification, resetNotifications } from './notification.js';
+export { message, resetMessages } from './message.js';
+export { Result } from './result.js';
+export { Popconfirm } from './popconfirm.js';
+export { Command } from './command.js';
+export { FloatButton } from './float-button.js';
+export { Tour } from './tour.js';
+export { Watermark } from './watermark.js';
+
+// ─── New Components (v0.4.1) ────────────────────────────────────
+export { MaskedInput } from './masked-input.js';
+export { Banner } from './banner.js';
+export { CodeBlock } from './code-block.js';
+export { SortableList } from './sortable-list.js';
+export { DateTimePicker } from './datetime-picker.js';
+
+// ─── Utility ────────────────────────────────────────────────────
+export { VisuallyHidden } from './visually-hidden.js';
+
+// ─── Behaviors ──────────────────────────────────────────────────
+export { createScrollSpy } from './_behaviors.js';

package/src/components/input-group.js

@@ -0,0 +1,75 @@
+/**
+ * InputGroup — Compose inputs with addons (text, icons, buttons, selects).
+ * CompactGroup — Border-merged mixed controls.
+ *
+ * @module decantr/components/input-group
+ */
+import { h } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { injectBase, cx, reactiveClass, reactiveAttr, resolve } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {boolean} [props.vertical=false] - Stack vertically (for textarea header/footer)
+ * @param {string} [props.size] - xs|sm|lg - Propagates addon sizing
+ * @param {boolean|Function} [props.error] - Error state on whole group
+ * @param {boolean|Function} [props.disabled] - Disabled state on whole group
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+export function InputGroup(props = {}, ...children) {
+  injectBase();
+
+  const { vertical = false, size, error, disabled, class: cls, ...rest } = props;
+
+  const className = cx(
+    'd-input-group',
+    vertical && 'd-input-group-vertical',
+    size && `d-input-group-${size}`,
+    cls
+  );
+
+  const el = h('div', { class: className, role: 'group', ...rest }, ...children);
+
+  reactiveClass(el, error, className, cx(className, 'd-input-group-error'));
+  reactiveAttr(el, disabled, 'data-disabled');
+
+  return el;
+}
+
+/**
+ * Static addon sub-component.
+ * Smart first-arg: string/Node → child, object → props.
+ *
+ * @param {Object|string|Node} [propsOrChild]
+ * @param {...(string|Node)} children
+ * @returns {HTMLElement}
+ */
+InputGroup.Addon = function Addon(propsOrChild, ...children) {
+  injectBase();
+
+  // Smart first-arg detection: string, DOM node (has nodeType), or null → treat as child
+  if (propsOrChild == null || typeof propsOrChild === 'string' || (propsOrChild && propsOrChild.nodeType)) {
+    return h('div', { class: 'd-input-group-addon' },
+      ...(propsOrChild != null ? [propsOrChild, ...children] : children));
+  }
+
+  const { class: cls, ...rest } = propsOrChild;
+  return h('div', { class: cx('d-input-group-addon', cls), ...rest }, ...children);
+};
+
+/**
+ * CompactGroup — Border-merged mixed controls.
+ *
+ * @param {Object} [props]
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+export function CompactGroup(props = {}, ...children) {
+  injectBase();
+
+  const { class: cls, ...rest } = props;
+  return h('div', { class: cx('d-compact-group', cls), role: 'group', ...rest }, ...children);
+}