boongle-white-black-components 1.1.0

package/README.md

@@ -0,0 +1,88 @@
+# boongle-white-black-components
+
+Ultra-clean **black & white only** HTML/CSS/JS components with **light** and **dark** themes. **80+ icons** via `boongle:icon-name`.
+
+## Install
+
+```bash
+npm install boongle-white-black-components
+```
+
+## Quick start
+
+```javascript
+import {
+  init,
+  Button,
+  Icon,
+  Input,
+} from 'boongle-white-black-components';
+
+// CSS (pick one)
+import 'boongle-white-black-components/styles/boongle.css';
+// or: init() injects styles in the browser
+
+init({ theme: 'dark' });
+
+document.body.append(
+  Button({ label: 'Save', size: 'md', theme: 'dark', icon: 'boongle:check' })
+);
+```
+
+## Components (21)
+
+| Component | Notes |
+|-----------|--------|
+| Button | `variant`: solid, outline, ghost |
+| Text | Google Sans, `muted`, `bold` |
+| CodeBlock | Monospace pre/code |
+| Dropdown | `options`, `onChange` |
+| Card | `title`, `body`, `children` |
+| LinkButton | `href`, `external` |
+| Icon | `boongle:name` |
+| Input | text, email, password… |
+| Textarea | resizable |
+| Checkbox | labeled |
+| Radio | grouped by `name` |
+| Switch | toggle |
+| Badge | solid / outline |
+| Alert | icon + optional close |
+| Divider | optional label |
+| Spinner | loading |
+| Avatar | initials or image |
+| Tabs | `tabs: [{ id, label, content }]` |
+| Modal | dialog overlay |
+| Progress | 0–100 bar |
+| Chip | tag with optional remove |
+| Tooltip | wrap any child |
+
+Every component accepts: `size` (`sm` \| `md` \| `lg`), `theme` (`light` \| `dark`), `className`.
+
+## Icons (80+)
+
+```javascript
+Icon({ icon: 'boongle:star' });
+Icon({ icon: 'boongle:settings' });
+```
+
+Run `listIcons()` for all names. Register custom:
+
+```javascript
+import { registerIcon } from 'boongle-white-black-components';
+registerIcon('spark', '<svg viewBox="0 0 24 24">…</svg>');
+```
+
+## Local demo
+
+```bash
+cd example
+npm install
+npm start
+```
+
+Open http://localhost:3847 — uses the same import path as npm (`boongle-white-black-components`).
+
+## Docs
+
+- **[INFO.md](./INFO.md)** — all components, props, icons, publish steps
+- [PUBLISH.md](./PUBLISH.md) — npm login & publish only

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "boongle-white-black-components",
+  "version": "1.1.0",
+  "description": "Ultra-clean black & white HTML/CSS/JS components with light & dark themes",
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./styles": "./src/styles/boongle.css",
+    "./styles/boongle.css": "./src/styles/boongle.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "components",
+    "ui",
+    "black-white",
+    "boongle",
+    "vanilla",
+    "design-system"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yourusername/boongle-white-black-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yourusername/boongle-white-black-components/issues"
+  },
+  "homepage": "https://github.com/yourusername/boongle-white-black-components#readme"
+}

package/src/components/alert.js

@@ -0,0 +1,39 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+import { Icon } from './icon.js';
+
+export function Alert(props = {}) {
+  const {
+    title,
+    message = '',
+    icon = 'boongle:info',
+    size = 'md',
+    theme = 'light',
+    className = '',
+    onClose,
+  } = props;
+
+  const root = el('div', {
+    className: boongleClasses('boongle-alert', { size, theme, className }),
+    role: 'alert',
+  }, [
+    Icon({ icon, size: 'sm', theme }),
+    el('div', { className: 'boongle-alert__content' }, [
+      title ? el('strong', { className: 'boongle-alert__title' }, [title]) : null,
+      el('p', { className: 'boongle-alert__message' }, [message]),
+    ].filter(Boolean)),
+  ]);
+
+  if (onClose) {
+    const closeBtn = el('button', {
+      type: 'button',
+      className: 'boongle-alert__close',
+      'aria-label': 'Dismiss',
+      onClick: onClose,
+    });
+    closeBtn.appendChild(Icon({ icon: 'boongle:close', size: 'sm', theme }));
+    root.appendChild(closeBtn);
+  }
+
+  return root;
+}

package/src/components/avatar.js

@@ -0,0 +1,19 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+
+export function Avatar(props = {}) {
+  const { initials = '?', src, alt = '', size = 'md', theme = 'light', className = '' } = props;
+
+  if (src) {
+    return el('img', {
+      className: boongleClasses('boongle-avatar', { size, theme, className }),
+      src,
+      alt,
+    });
+  }
+
+  return el('span', {
+    className: boongleClasses('boongle-avatar', { size, theme, className }),
+    'aria-label': alt || initials,
+  }, [initials.slice(0, 2).toUpperCase()]);
+}

package/src/components/badge.js

@@ -0,0 +1,10 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+
+export function Badge(props = {}) {
+  const { label = '', size = 'md', theme = 'light', variant = 'solid', className = '' } = props;
+  const variantClass = variant === 'outline' ? 'boongle-badge--outline' : '';
+  return el('span', {
+    className: `${boongleClasses('boongle-badge', { size, theme, className })} ${variantClass}`.trim(),
+  }, [label]);
+}

package/src/components/button.js

@@ -0,0 +1,43 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+import { Icon } from './icon.js';
+
+/**
+ * @param {object} props
+ * @param {string} [props.label]
+ * @param {'sm'|'md'|'lg'} [props.size='md']
+ * @param {'light'|'dark'} [props.theme='light']
+ * @param {'solid'|'outline'|'ghost'} [props.variant='solid']
+ * @param {string} [props.icon] - e.g. "boongle:star"
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.type='button']
+ * @param {string} [props.className]
+ * @param {() => void} [props.onClick]
+ */
+export function Button(props = {}) {
+  const {
+    label = '',
+    size = 'md',
+    theme = 'light',
+    variant = 'solid',
+    icon,
+    disabled = false,
+    type = 'button',
+    className = '',
+    onClick,
+  } = props;
+
+  const variantClass =
+    variant === 'outline' ? 'boongle-btn--outline' : variant === 'ghost' ? 'boongle-btn--ghost' : '';
+
+  const children = [];
+  if (icon) children.push(Icon({ icon, size: size === 'lg' ? 'md' : 'sm', theme }));
+  if (label) children.push(label);
+
+  return el('button', {
+    type,
+    className: `${boongleClasses('boongle-btn', { size, theme, className })} ${variantClass}`.trim(),
+    disabled: disabled ? '' : undefined,
+    onClick,
+  }, children);
+}

package/src/components/card.js

@@ -0,0 +1,32 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+
+/**
+ * @param {object} props
+ * @param {string} [props.title]
+ * @param {string} [props.body]
+ * @param {HTMLElement|Node|string} [props.children]
+ * @param {'sm'|'md'|'lg'} [props.size='md']
+ * @param {'light'|'dark'} [props.theme='light']
+ * @param {string} [props.className]
+ */
+export function Card(props = {}) {
+  const { title, body, children, size = 'md', theme = 'light', className = '' } = props;
+
+  const card = el('article', {
+    className: boongleClasses('boongle-card', { size, theme, className }),
+  });
+
+  if (title) {
+    card.appendChild(el('h3', { className: 'boongle-card__title' }, [title]));
+  }
+  if (body) {
+    card.appendChild(el('p', { className: 'boongle-card__body' }, [body]));
+  }
+  if (children) {
+    if (typeof children === 'string') card.appendChild(document.createTextNode(children));
+    else card.appendChild(children);
+  }
+
+  return card;
+}

package/src/components/checkbox.js

@@ -0,0 +1,26 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+
+export function Checkbox(props = {}) {
+  const {
+    label = '',
+    checked = false,
+    disabled = false,
+    size = 'md',
+    theme = 'light',
+    className = '',
+    onChange,
+  } = props;
+
+  const input = el('input', {
+    type: 'checkbox',
+    className: 'boongle-checkbox__input',
+    checked: checked ? '' : undefined,
+    disabled: disabled || undefined,
+    onChange,
+  });
+
+  return el('label', {
+    className: boongleClasses('boongle-checkbox', { size, theme, className }),
+  }, [input, el('span', { className: 'boongle-checkbox__box' }), el('span', { className: 'boongle-checkbox__label' }, [label])]);
+}

package/src/components/chip.js

@@ -0,0 +1,36 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+import { Icon } from './icon.js';
+
+export function Chip(props = {}) {
+  const {
+    label = '',
+    icon,
+    removable = false,
+    size = 'md',
+    theme = 'light',
+    className = '',
+    onRemove,
+  } = props;
+
+  const children = [];
+  if (icon) children.push(Icon({ icon, size: 'sm', theme }));
+  children.push(el('span', { className: 'boongle-chip__text' }, [label]));
+
+  const root = el('span', {
+    className: boongleClasses('boongle-chip', { size, theme, className }),
+  }, children);
+
+  if (removable) {
+    const btn = el('button', {
+      type: 'button',
+      className: 'boongle-chip__remove',
+      'aria-label': `Remove ${label}`,
+      onClick: onRemove,
+    });
+    btn.appendChild(Icon({ icon: 'boongle:close', size: 'sm', theme }));
+    root.appendChild(btn);
+  }
+
+  return root;
+}

package/src/components/codeBlock.js

@@ -0,0 +1,24 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+
+/**
+ * @param {object} props
+ * @param {string} props.code
+ * @param {'sm'|'md'|'lg'} [props.size='md']
+ * @param {'light'|'dark'} [props.theme='light']
+ * @param {string} [props.language]
+ * @param {string} [props.className]
+ */
+export function CodeBlock(props = {}) {
+  const { code = '', size = 'md', theme = 'light', language, className = '' } = props;
+
+  const pre = el('pre', {
+    className: boongleClasses('boongle-code', { size, theme, className }),
+  });
+
+  const codeEl = el('code', {}, [code]);
+  if (language) codeEl.className = `language-${language}`;
+  pre.appendChild(codeEl);
+
+  return pre;
+}

package/src/components/divider.js

@@ -0,0 +1,12 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+
+export function Divider(props = {}) {
+  const { label, size = 'md', theme = 'light', className = '' } = props;
+  if (label) {
+    return el('div', {
+      className: `${boongleClasses('boongle-divider', { size, theme, className })} boongle-divider--labeled`,
+    }, [el('span', {}, [label])]);
+  }
+  return el('hr', { className: boongleClasses('boongle-divider', { size, theme, className }) });
+}

package/src/components/dropdown.js

@@ -0,0 +1,88 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+
+/**
+ * @typedef {{ value: string, label: string }} DropdownOption
+ */
+
+/**
+ * @param {object} props
+ * @param {DropdownOption[]} props.options
+ * @param {string} [props.value]
+ * @param {string} [props.placeholder='Select…']
+ * @param {'sm'|'md'|'lg'} [props.size='md']
+ * @param {'light'|'dark'} [props.theme='light']
+ * @param {string} [props.className]
+ * @param {(value: string, option: DropdownOption) => void} [props.onChange]
+ */
+export function Dropdown(props = {}) {
+  const {
+    options = [],
+    value,
+    placeholder = 'Select…',
+    size = 'md',
+    theme = 'light',
+    className = '',
+    onChange,
+  } = props;
+
+  const selected = options.find((o) => o.value === value) ?? options[0];
+  const label = selected?.label ?? placeholder;
+
+  const root = el('div', {
+    className: `${boongleClasses('boongle-dropdown', { size, theme, className })} boongle`,
+    dataset: { open: 'false', theme },
+  });
+
+  const labelSpan = el('span', { className: 'boongle-dropdown__label' }, [label]);
+  const trigger = el('button', {
+    type: 'button',
+    className: 'boongle-dropdown__trigger',
+    'aria-haspopup': 'listbox',
+    'aria-expanded': 'false',
+  }, [labelSpan, el('span', { className: 'boongle-dropdown__chevron' })]);
+
+  const menu = el('ul', {
+    className: 'boongle-dropdown__menu',
+    role: 'listbox',
+  });
+
+  for (const opt of options) {
+    const item = el('li', {
+      className: 'boongle-dropdown__item',
+      role: 'option',
+      dataset: { value: opt.value, selected: opt.value === (value ?? selected?.value) ? 'true' : 'false' },
+    }, [opt.label]);
+
+    item.addEventListener('click', () => {
+      root.dataset.open = 'false';
+      trigger.setAttribute('aria-expanded', 'false');
+      labelSpan.textContent = opt.label;
+      menu.querySelectorAll('.boongle-dropdown__item').forEach((el) => {
+        el.dataset.selected = el.dataset.value === opt.value ? 'true' : 'false';
+      });
+      onChange?.(opt.value, opt);
+    });
+
+    menu.appendChild(item);
+  }
+
+  const toggle = () => {
+    const open = root.dataset.open !== 'true';
+    root.dataset.open = open ? 'true' : 'false';
+    trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
+  };
+
+  trigger.addEventListener('click', (e) => {
+    e.stopPropagation();
+    toggle();
+  });
+
+  document.addEventListener('click', () => {
+    root.dataset.open = 'false';
+    trigger.setAttribute('aria-expanded', 'false');
+  });
+
+  root.append(trigger, menu);
+  return root;
+}

package/src/components/icon.js

@@ -0,0 +1,28 @@
+import { boongleClasses } from '../theme.js';
+import { getIconSvg } from '../icons/registry.js';
+import { el } from '../utils/dom.js';
+
+/**
+ * @param {object} props
+ * @param {string} props.icon - e.g. "boongle:star"
+ * @param {'sm'|'md'|'lg'} [props.size='md']
+ * @param {'light'|'dark'} [props.theme='light']
+ * @param {string} [props.className]
+ * @param {string} [props.ariaLabel]
+ */
+export function Icon(props = {}) {
+  const { icon, size = 'md', theme = 'light', className = '', ariaLabel } = props;
+  const svg = getIconSvg(icon);
+  const wrap = el('span', {
+    className: boongleClasses('boongle-icon', { size, theme, className }),
+    role: ariaLabel ? 'img' : undefined,
+    'aria-label': ariaLabel,
+    'aria-hidden': ariaLabel ? undefined : 'true',
+    html: svg || '',
+  });
+  if (!svg) {
+    wrap.dataset.boongleIconMissing = icon || 'unknown';
+    wrap.title = `Icon not found: ${icon}`;
+  }
+  return wrap;
+}

package/src/components/input.js

@@ -0,0 +1,30 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+
+export function Input(props = {}) {
+  const {
+    value = '',
+    placeholder = '',
+    type = 'text',
+    name,
+    id,
+    disabled = false,
+    size = 'md',
+    theme = 'light',
+    className = '',
+    onInput,
+    onChange,
+  } = props;
+
+  return el('input', {
+    type,
+    className: boongleClasses('boongle-input', { size, theme, className }),
+    value,
+    placeholder,
+    name,
+    id,
+    disabled: disabled || undefined,
+    onInput,
+    onChange,
+  });
+}

package/src/components/linkButton.js

@@ -0,0 +1,43 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+import { Icon } from './icon.js';
+
+/**
+ * @param {object} props
+ * @param {string} props.label
+ * @param {string} [props.href='#']
+ * @param {'sm'|'md'|'lg'} [props.size='md']
+ * @param {'light'|'dark'} [props.theme='light']
+ * @param {string} [props.icon]
+ * @param {boolean} [props.external]
+ * @param {string} [props.className]
+ * @param {() => void} [props.onClick]
+ */
+export function LinkButton(props = {}) {
+  const {
+    label = '',
+    href = '#',
+    size = 'md',
+    theme = 'light',
+    icon,
+    external = false,
+    className = '',
+    onClick,
+  } = props;
+
+  const children = [];
+  if (icon) children.push(Icon({ icon, size: 'sm', theme }));
+  children.push(label);
+
+  const attrs = {
+    className: boongleClasses('boongle-link-btn', { size, theme, className }),
+    href,
+    onClick,
+  };
+  if (external) {
+    attrs.target = '_blank';
+    attrs.rel = 'noopener noreferrer';
+  }
+
+  return el('a', attrs, children);
+}

package/src/components/modal.js

@@ -0,0 +1,49 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+import { Button } from './button.js';
+import { Text } from './text.js';
+
+export function Modal(props = {}) {
+  const {
+    title = '',
+    body = '',
+    open = false,
+    size = 'md',
+    theme = 'light',
+    className = '',
+    confirmLabel = 'OK',
+    cancelLabel = 'Cancel',
+    onConfirm,
+    onCancel,
+    onClose,
+  } = props;
+
+  const backdrop = el('div', {
+    className: `${boongleClasses('boongle-modal', { size, theme, className })} boongle`,
+    dataset: { open: open ? 'true' : 'false' },
+    role: 'dialog',
+    'aria-modal': 'true',
+  });
+
+  const dialog = el('div', { className: 'boongle-modal__dialog' });
+  const header = el('div', { className: 'boongle-modal__header' });
+  header.appendChild(Text({ content: title, as: 'h2', size: 'md', theme, bold: true }));
+  const content = el('div', { className: 'boongle-modal__body' }, [body]);
+  const footer = el('div', { className: 'boongle-modal__footer' });
+
+  const close = () => {
+    backdrop.dataset.open = 'false';
+    onClose?.();
+  };
+
+  footer.appendChild(Button({ label: cancelLabel, size: 'sm', theme, variant: 'outline', onClick: () => { close(); onCancel?.(); } }));
+  footer.appendChild(Button({ label: confirmLabel, size: 'sm', theme, onClick: () => { onConfirm?.(); close(); } }));
+
+  backdrop.addEventListener('click', (e) => {
+    if (e.target === backdrop) close();
+  });
+
+  dialog.append(header, content, footer);
+  backdrop.appendChild(dialog);
+  return backdrop;
+}

package/src/components/progress.js

@@ -0,0 +1,23 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+
+export function Progress(props = {}) {
+  const { value = 0, max = 100, label, size = 'md', theme = 'light', className = '' } = props;
+  const pct = Math.min(100, Math.max(0, (value / max) * 100));
+
+  const bar = el('div', {
+    className: boongleClasses('boongle-progress', { size, theme, className }),
+    role: 'progressbar',
+    'aria-valuenow': String(value),
+    'aria-valuemin': '0',
+    'aria-valuemax': String(max),
+  });
+
+  const track = el('div', { className: 'boongle-progress__track' });
+  const fill = el('div', { className: 'boongle-progress__fill', style: `width:${pct}%` });
+  track.appendChild(fill);
+  bar.appendChild(track);
+
+  if (label) bar.appendChild(el('span', { className: 'boongle-progress__label' }, [label]));
+  return bar;
+}

package/src/components/radio.js

@@ -0,0 +1,30 @@
+import { boongleClasses } from '../theme.js';
+import { el } from '../utils/dom.js';
+
+export function Radio(props = {}) {
+  const {
+    label = '',
+    name = 'boongle-radio',
+    value = '',
+    checked = false,
+    disabled = false,
+    size = 'md',
+    theme = 'light',
+    className = '',
+    onChange,
+  } = props;
+
+  const input = el('input', {
+    type: 'radio',
+    className: 'boongle-radio__input',
+    name,
+    value,
+    checked: checked ? '' : undefined,
+    disabled: disabled || undefined,
+    onChange,
+  });
+
+  return el('label', {
+    className: boongleClasses('boongle-radio', { size, theme, className }),
+  }, [input, el('span', { className: 'boongle-radio__dot' }), el('span', { className: 'boongle-radio__label' }, [label])]);
+}