@oneli8/core 1.0.0-beta.10

package/src/atoms/icon/icon.js

@@ -0,0 +1,81 @@
+/**
+ * Oneli8 · Icon atom — headless behavior.
+ *
+ * Two entry points, one output:
+ *   renderIcon(name, opts)  -> markup string (build time / SSR)
+ *   hydrateIcons(root)      -> fills in [data-ol8-icon] placeholders (runtime)
+ *
+ * Icons render INLINE (never <img>) because the Figma contract says the consumer
+ * supplies semantic color — that needs `currentColor`, which <img> cannot inherit.
+ */
+import { OL8_ICONS, OL8_ICON_VIEWBOX } from './icons.generated.js';
+
+/** Universal sizes from the Figma "Icon Frame" (418:51). */
+export const OL8_ICON_SIZES = [9, 12, 18, 24, 30, 36, 48, 60, 72, 96, 108];
+
+/** @param {string} name */
+export function isOl8IconName(name) {
+  return Object.hasOwn(OL8_ICONS, name);
+}
+
+/** The inner leaf only — the <svg>, in canonical 24-unit source space. */
+export function renderIconSvg(name) {
+  if (!isOl8IconName(name)) throw new Error(`[ol8] unknown icon "${name}"`);
+  return `<svg viewBox="${OL8_ICON_VIEWBOX}" fill="none" focusable="false">${OL8_ICONS[name].body}</svg>`;
+}
+
+/** The complete atom: outer box + leaf. */
+export function renderIcon(name, options = {}) {
+  if (!isOl8IconName(name)) throw new Error(`[ol8] unknown icon "${name}"`);
+  const { size = 24, label, className } = options;
+  if (!OL8_ICON_SIZES.includes(size)) {
+    throw new Error(`[ol8] size ${size} is not an Icon Frame universal size (${OL8_ICON_SIZES.join(', ')})`);
+  }
+  const entry = OL8_ICONS[name];
+  const attrs = [
+    `class="ol8-icon${className ? ` ${className}` : ''}"`,
+    `data-ol8-icon="${name}"`,
+    `data-ol8-icon-size="${size}"`,
+    entry.mirrorInRTL ? 'data-ol8-icon-mirror="true"' : '',
+    label ? `role="img" aria-label="${escapeAttr(label)}"` : 'aria-hidden="true"',
+  ].filter(Boolean).join(' ');
+  return `<span ${attrs}>${renderIconSvg(name)}</span>`;
+}
+
+/**
+ * Upgrades every `[data-ol8-icon]` placeholder under `root` in place. Idempotent.
+ *   <span data-ol8-icon="add" data-ol8-icon-size="18"></span>
+ *   <span data-ol8-icon="close" data-ol8-icon-label="Dismiss"></span>
+ */
+export function hydrateIcons(root = document) {
+  for (const el of root.querySelectorAll('[data-ol8-icon]')) {
+    if (el.dataset.ol8IconHydrated === 'true') continue;
+    const name = el.dataset.ol8Icon ?? '';
+    if (!isOl8IconName(name)) { console.warn(`[ol8] unknown icon "${name}"`, el); continue; }
+
+    const entry = OL8_ICONS[name];
+    const label = el.dataset.ol8IconLabel;
+
+    el.classList.add('ol8-icon');
+    if (!el.dataset.ol8IconSize) el.dataset.ol8IconSize = '24';
+    if (entry.mirrorInRTL) el.dataset.ol8IconMirror = 'true';
+
+    if (label) {
+      el.setAttribute('role', 'img');
+      el.setAttribute('aria-label', label);
+      el.removeAttribute('aria-hidden');
+    } else {
+      el.setAttribute('aria-hidden', 'true');
+      el.removeAttribute('role');
+    }
+
+    el.innerHTML = renderIconSvg(name);
+    el.dataset.ol8IconHydrated = 'true';
+  }
+}
+
+function escapeAttr(value) {
+  return String(value).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+
+export { OL8_ICONS };

package/src/atoms/icon/icons.generated.d.ts

@@ -0,0 +1,48 @@
+// GENERATED by packages/sync/src/build-icons.mjs — do not edit by hand.
+// Source: Figma "Oneli8 Design System — 1.0.0-beta.1", page Iconography,
+// frame "Icon Library / Masters" (426:55). Re-run `npm run sync:icons`.
+
+export interface Ol8IconEntry {
+  /** Figma category segment: "Icon / <Category> / <Name>". */
+  readonly category: 'action' | 'navigation' | 'status' | 'selection'
+    | 'transport' | 'vitals' | 'maneuver';
+  /** Node id of the 24px master in Figma, or null while it is a candidate. */
+  readonly figmaNode: string | null;
+  /** True until the master is approved and mapped to a Figma node. */
+  readonly candidate?: boolean;
+  /** Semantic registry controls RTL mirroring (per Iconography documentation). */
+  readonly mirrorInRTL: boolean;
+  /** The ink Figma baked into the master, discarded in favour of currentColor. */
+  readonly sourceInk: string | null;
+  /** Drawing instructions in the canonical 24-unit source space. */
+  readonly body: string;
+}
+
+export declare const OL8_ICON_VIEWBOX: '0 0 24 24';
+export declare const OL8_ICONS: {
+  readonly "add": Ol8IconEntry;
+  readonly "caution": Ol8IconEntry;
+  readonly "check": Ol8IconEntry;
+  readonly "chevron-down": Ol8IconEntry;
+  readonly "chevron-up": Ol8IconEntry;
+  readonly "clear": Ol8IconEntry;
+  readonly "close": Ol8IconEntry;
+  readonly "copy": Ol8IconEntry;
+  readonly "critical": Ol8IconEntry;
+  readonly "forward": Ol8IconEntry;
+  readonly "heart": Ol8IconEntry;
+  readonly "informative": Ol8IconEntry;
+  readonly "loading": Ol8IconEntry;
+  readonly "maneuver-right": Ol8IconEntry;
+  readonly "mixed": Ol8IconEntry;
+  readonly "pause": Ol8IconEntry;
+  readonly "play": Ol8IconEntry;
+  readonly "positive": Ol8IconEntry;
+  readonly "search": Ol8IconEntry;
+  readonly "selected-dot": Ol8IconEntry;
+  readonly "skip-back": Ol8IconEntry;
+  readonly "skip-forward": Ol8IconEntry;
+  readonly "visibility-closed": Ol8IconEntry;
+  readonly "visibility-open": Ol8IconEntry;
+};
+export type Ol8IconName = keyof typeof OL8_ICONS;