staffa 0.1.0 → 0.3.0

package/dist/components/tabs.d.ts

@@ -1,4 +1,4 @@
-import { type BaseOptions, type Bindable, type Content, type Slot, type Styling } from "../core.js";
+import { type Bindable, type Content, type Slot, type Attributes } from "../core.js";
 /** A single tab definition. */
 export interface Tab {
     /** Stable id used as the selection value. Falls back to the array index. */
@@ -13,7 +13,9 @@ export interface Tab {
     disabled?: boolean;
 }
 /** Options for {@link tabs}. */
-export interface TabsOptions extends BaseOptions {
+export interface TabsOptions {
+    /** Aberdeen attr/style string applied to the outermost element. */
+    attrs?: Attributes;
     /** The tabs to display. */
     tabs: Tab[];
     /**
@@ -21,10 +23,8 @@ export interface TabsOptions extends BaseOptions {
      * its own internal selection, starting at the first tab.
      */
     bind?: Bindable<string>;
-    /** Visual style of the tab strip. Defaults to `"underline"`. */
-    variant?: "underline" | "pills";
     /** Aberdeen attr/style string applied to the active panel. */
-    inner?: Styling;
+    contentAttrs?: Attributes;
 }
 /**
  * A tabbed view. Renders an ARIA `tablist` of buttons and a single live panel

package/dist/components/tabs.js

@@ -1,25 +1,19 @@
 import A from "aberdeen";
 import { drawSlot, uniqueId } from "../core.js";
 A.insertGlobalCss({
-    ".S_tabs": {
+    ".s-tabs": {
         "&": "display:flex flex-direction:column gap:$3",
-        ".S_tablist": "display:flex gap:$1 align-items:stretch",
-        ".S_tab": "display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent " +
-            "border:0 fg:$sFgMuted font-weight:600 padding: 0.6em 0.9em; " +
+        ".s-tablist": "display:flex gap:$1 align-items:stretch overflow-x:auto scrollbar-width:none border-bottom: 1px solid $s-border;",
+        ".s-tablist::-webkit-scrollbar": "display:none",
+        ".s-tab": "display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent " +
+            "border:0 color: $s-fg-muted; font-weight:600 padding: 0.6em 0.9em; " +
+            "border-bottom: 3px solid transparent; margin-bottom:-1px " +
             "transition: color 0.15s, background 0.15s, border-color 0.15s;",
-        ".S_tab:hover:not(:disabled)": "fg:$sFg",
-        ".S_tab:disabled": "opacity:0.5 cursor:not-allowed",
-        ".S_tab:focus-visible": "outline:none box-shadow: 0 0 0 3px $sFocus; r:$sRadius",
-        // Underline variant.
-        "&.S_underline .S_tablist": "border-bottom: 1px solid $sBorder;",
-        "&.S_underline .S_tab": "border-bottom: 2px solid transparent; margin-bottom:-1px",
-        "&.S_underline .S_tab[aria-selected=true]": "fg:$sFg border-bottom-color:$sPrimary",
-        // Pills variant.
-        "&.S_pills .S_tab": "r:$sRadius",
-        "&.S_pills .S_tab[aria-selected=true]": "fg:$sPrimaryFg background:$sPrimary",
-        // The panel has no enclosing box, so no default padding — its content
-        // aligns flush with the tab strip. Callers add padding/flex via `inner`.
-        ".S_tabpanel": "display:block",
+        ".s-tab:hover:not(:disabled), .s-tab[aria-selected=true]": "color: $s-fg;",
+        ".s-tab:disabled": "opacity:0.5 cursor:not-allowed",
+        ".s-tab:focus-visible": "outline:none box-shadow: 0 0 0 3px $s-focus; r: $s-radius;",
+        ".s-tab[aria-selected=true]": "border-image: $s-gradient 1;",
+        ".s-tabpanel": "display:block",
     },
 });
 /**
@@ -35,7 +29,6 @@ A.insertGlobalCss({
  * ```
  */
 export function tabs(opts) {
-    const variant = opts.variant ?? "underline";
     const groupId = uniqueId("tabs");
     // Resolve a tab's selection key (its id, or its index as a string).
     const keyOf = (tab, index) => tab.id ?? String(index);
@@ -46,11 +39,11 @@ export function tabs(opts) {
             return;
         $sel.value = keyOf(tab, index);
     };
-    A(`div.S_tabs.S_${variant}`, opts.root, () => {
-        A("div.S_tablist role=tablist", () => {
+    A("div.s-tabs", opts.attrs, () => {
+        A("div.s-tablist role=tablist", () => {
             opts.tabs.forEach((tab, index) => {
                 const key = keyOf(tab, index);
-                A("button.S_tab type=button role=tab", () => {
+                A("button.s-tab type=button role=tab", () => {
                     A(`id=${groupId}-tab-${key} aria-controls=${groupId}-panel-${key}`);
                     A(() => {
                         const selected = $sel.value === key;
@@ -66,7 +59,7 @@ export function tabs(opts) {
                 });
             });
         });
-        A("div.S_tabpanel role=tabpanel", opts.inner, () => {
+        A("div.s-tabpanel role=tabpanel", opts.contentAttrs, () => {
             A(() => {
                 const selKey = $sel.value;
                 const index = opts.tabs.findIndex((t, i) => keyOf(t, i) === selKey);

package/dist/components/textarea.js

@@ -1,8 +1,8 @@
 import A from "aberdeen";
 import { applyControlAttrs, drawField } from "./field.js";
 A.insertGlobalCss({
-    "textarea.S_input": "resize:vertical min-height:3em line-height:1.45",
-    "textarea.S_input.S_autoGrow": "resize:none min-height:2.5em overflow-y:hidden",
+    "textarea.s-input": "resize:vertical min-height:3em line-height:1.45",
+    "textarea.s-input.s-autoGrow": "resize:none min-height:2.5em overflow-y:hidden",
 });
 /**
  * A multi-line text input. Shares the field chrome and styling of
@@ -16,9 +16,9 @@ A.insertGlobalCss({
 export function textarea(opts = {}) {
     const grow = opts.autoGrow !== false;
     drawField(opts, (id, isInvalid) => {
-        const el = A("textarea.S_input", opts.control, () => {
+        const el = A("textarea.s-input", opts.inputAttrs, () => {
             if (grow) {
-                A(".S_autoGrow");
+                A(".s-autoGrow");
                 A("input=", (e) => {
                     fitToContent(e.currentTarget);
                     if (opts.input)

package/dist/components/textline.js

@@ -14,7 +14,7 @@ import { applyControlAttrs, drawField } from "./field.js";
  */
 export function textline(opts = {}) {
     drawField(opts, (id, isInvalid) => {
-        A("input.S_input", opts.control, () => {
+        A("input.s-input", opts.inputAttrs, () => {
             A("type=", opts.type ?? "text");
             if (opts.placeholder != null)
                 A("placeholder=", opts.placeholder);

package/dist/components/toast.d.ts

@@ -0,0 +1,37 @@
+import { type Slot, type Attributes } from "../core.js";
+import type { SurfaceRole } from "../theme.js";
+/** Options for {@link toast}. */
+export interface ToastOptions {
+    /** Primary message. A string is rendered as rich text. */
+    message: Slot;
+    /** Optional bold title above the message. */
+    title?: Slot;
+    /**
+     * Colour role. Defaults to `"neutral"`.
+     * Use `"success"` / `"danger"` / `"warning"` for semantic feedback.
+     */
+    type?: SurfaceRole;
+    /**
+     * Auto-dismiss delay in milliseconds. Defaults to `4000`.
+     * Pass `0` to make the toast persistent until dismissed manually.
+     */
+    duration?: number;
+    /** Show a close button. Defaults to `true`. */
+    dismissible?: boolean;
+    /** Aberdeen attr/style string applied to the toast element. */
+    attrs?: Attributes;
+}
+/**
+ * Show a toast notification. Returns a `dismiss()` function to remove it
+ * programmatically. Auto-dismisses after `duration` ms (default 4 000).
+ *
+ * @example
+ * ```ts
+ * S.toast({ message: "Saved!", type: "success" });
+ * S.toast({ title: "Error", message: "Upload failed.", type: "danger", duration: 0 });
+ * const off = S.toast({ message: "Uploading…", duration: 0, dismissible: false });
+ * // later:
+ * off();
+ * ```
+ */
+export declare function toast(opts: ToastOptions): () => void;

package/dist/components/toast.js

@@ -0,0 +1,79 @@
+import A from "aberdeen";
+import { grow, shrink } from "aberdeen/transitions";
+import { drawSlot } from "../core.js";
+A.insertGlobalCss({
+    ".s-toasts": "position:fixed bottom:$3 right:$3 z-index:400 " +
+        "display:flex flex-direction:column gap:$2 " +
+        "pointer-events:none max-width:min(90vw,24rem) w:24rem",
+    ".s-toast": {
+        "&": "display:flex align-items:flex-start gap:$2 " +
+            "padding: $3; border: 1px solid $s-border; r:$s-radius box-shadow:$s-shadow " +
+            "pointer-events:auto",
+        ".s-toast-body": "display:flex flex-direction:column gap:$1 flex:1 min-width:0",
+        ".s-toast-title": "font-weight:700 line-height:1.3",
+        ".s-toast-msg": "font-size:0.9em fg:$s-fg-muted line-height:1.4",
+        ".s-toast-close": "cursor:pointer border:0 background:transparent fg:$s-fg-muted font-size:1.1em line-height:1 " +
+            "padding: 0 0.15em; r:4px flex-shrink:0 align-self:flex-start",
+        ".s-toast-close:hover": "fg:$s-fg",
+        ".s-toast-close:focus-visible": "outline:none box-shadow: 0 0 0 3px $s-focus; fg:$s-fg",
+    },
+});
+let toastCount = 0;
+// Keyed by stable ID so A.onEach scopes are per-toast — removing one never re-renders others.
+const toasts = A.proxy({});
+A.mount(document.body, () => {
+    A("div.s-toasts aria-live=polite aria-atomic=false", () => {
+        A.onEach(toasts, (entry) => {
+            const { opts } = entry;
+            const role = opts.type === "danger" || opts.type === "warning" ? "alert" : "status";
+            const surface = opts.type ?? "neutral";
+            A(`div.s-toast.s-s.${surface} role=${role}`, "create=", grow, "destroy=", shrink, opts.attrs, () => {
+                A("div.s-toast-body", () => {
+                    A(() => {
+                        if (opts.title != null)
+                            A("div.s-toast-title", () => drawSlot(opts.title));
+                    });
+                    A("div.s-toast-msg", () => drawSlot(opts.message));
+                });
+                A(() => {
+                    if (opts.dismissible === false)
+                        return;
+                    A("button.s-toast-close type=button aria-label=Dismiss", () => {
+                        A("#×");
+                        A("click=", () => dismiss(entry.id));
+                    });
+                });
+            });
+        });
+    });
+});
+function dismiss(id) {
+    delete toasts[id];
+}
+/**
+ * Show a toast notification. Returns a `dismiss()` function to remove it
+ * programmatically. Auto-dismisses after `duration` ms (default 4 000).
+ *
+ * @example
+ * ```ts
+ * S.toast({ message: "Saved!", type: "success" });
+ * S.toast({ title: "Error", message: "Upload failed.", type: "danger", duration: 0 });
+ * const off = S.toast({ message: "Uploading…", duration: 0, dismissible: false });
+ * // later:
+ * off();
+ * ```
+ */
+export function toast(opts) {
+    const id = ++toastCount;
+    toasts[id] = { id, opts };
+    const duration = opts.duration ?? 4000;
+    let timer;
+    if (duration > 0) {
+        timer = setTimeout(() => dismiss(id), duration);
+    }
+    return () => {
+        if (timer != null)
+            clearTimeout(timer);
+        dismiss(id);
+    };
+}

package/dist/components/tooltip.d.ts

@@ -0,0 +1,32 @@
+import { type Slot, type Attributes } from "../core.js";
+/** Options for {@link addTooltip}. */
+export interface TooltipOptions {
+    /** The tooltip text or draw function. A string is rendered as rich text. */
+    tip: Slot;
+    /**
+     * Which side the tooltip appears on. Defaults to `"top"`.
+     * Automatically flips to the opposite side when there isn't enough room.
+     */
+    placement?: "top" | "bottom" | "left" | "right";
+    /** Aberdeen attr/style string applied to the tip panel. */
+    attrs?: Attributes;
+}
+/**
+ * Attaches a tooltip to the current element: adds hover/focus handlers via
+ * {@link A} so the tip appears when the element is hovered or keyboard-focused.
+ * The tip panel is rendered into `document.body` via a portal, so it is never
+ * clipped by `overflow:hidden` ancestors. Position is computed from the
+ * element's bounding rect and automatically flips when near the viewport edge.
+ *
+ * @example
+ * ```ts
+ * A("button #Save", () => {
+ *   S.addTooltip({ tip: "Saves your work to the cloud" });
+ * });
+ *
+ * A("button #Delete", () => {
+ *   S.addTooltip({ tip: "Dangerous — cannot be undone", placement: "bottom" });
+ * });
+ * ```
+ */
+export declare function addTooltip(opts: TooltipOptions): void;

package/dist/components/tooltip.js

@@ -0,0 +1,130 @@
+import A from "aberdeen";
+import { drawSlot } from "../core.js";
+A.insertGlobalCss({
+    ".s-tt-tip": {
+        "&": "position:fixed z-index:500 " +
+            "max-width:20rem w:max-content " +
+            "bg:$s-raised fg:$s-fg border: 1px solid $s-border-strong; " +
+            "r:$s-radius box-shadow:$s-shadow " +
+            "padding: 0.3em 0.65em; font-size:0.85em line-height:1.4 " +
+            "pointer-events:none",
+    },
+});
+// ─── Global portal state ────────────────────────────────────────────────────
+// At most one tooltip is visible at a time. The anchor is the element the
+// handlers were attached to (its bounding rect drives positioning).
+const $ttActive = A.proxy(undefined);
+let hideTimer = null;
+// Hide tooltip when the page scrolls (anchor has moved).
+if (typeof window !== "undefined") {
+    window.addEventListener("scroll", () => { $ttActive.value = undefined; }, { capture: true, passive: true });
+}
+function computePos(rect, tipW, tipH, placement) {
+    const gap = 7;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let x = 0, y = 0;
+    if (placement === "bottom") {
+        x = rect.left + (rect.width - tipW) / 2;
+        y = rect.bottom + gap;
+        if (y + tipH > vh - 8) {
+            y = rect.top - tipH - gap;
+        }
+    }
+    else if (placement === "left") {
+        x = rect.left - tipW - gap;
+        y = rect.top + (rect.height - tipH) / 2;
+        if (x < 8) {
+            x = rect.right + gap;
+        }
+    }
+    else if (placement === "right") {
+        x = rect.right + gap;
+        y = rect.top + (rect.height - tipH) / 2;
+        if (x + tipW > vw - 8) {
+            x = rect.left - tipW - gap;
+        }
+    }
+    else {
+        // top (default)
+        x = rect.left + (rect.width - tipW) / 2;
+        y = rect.top - tipH - gap;
+        if (y < 8) {
+            y = rect.bottom + gap;
+        }
+    }
+    return {
+        x: Math.max(8, Math.min(x, vw - tipW - 8)),
+        y: Math.max(8, Math.min(y, vh - tipH - 8)),
+    };
+}
+function scheduleHide() {
+    if (hideTimer)
+        clearTimeout(hideTimer);
+    hideTimer = setTimeout(() => {
+        $ttActive.value = undefined;
+        hideTimer = null;
+    }, 100);
+}
+// ─── Portal ──────────────────────────────────────────────────────────────────
+A.mount(document.body, () => {
+    const active = $ttActive.value;
+    if (!active)
+        return;
+    const { opts, anchor } = active;
+    const placement = opts.placement ?? "top";
+    const tipEl = A("div.s-tt-tip role=tooltip visibility:hidden", opts.attrs, () => {
+        A("mouseenter=", () => {
+            if (hideTimer) {
+                clearTimeout(hideTimer);
+                hideTimer = null;
+            }
+        });
+        A("mouseleave=", scheduleHide);
+        drawSlot(opts.tip);
+    });
+    requestAnimationFrame(() => {
+        if (!document.body.contains(tipEl))
+            return;
+        const { x, y } = computePos(anchor.getBoundingClientRect(), tipEl.offsetWidth, tipEl.offsetHeight, placement);
+        tipEl.style.left = x + "px";
+        tipEl.style.top = y + "px";
+        tipEl.style.visibility = "";
+    });
+});
+// ─── Public component ────────────────────────────────────────────────────────
+/**
+ * Attaches a tooltip to the current element: adds hover/focus handlers via
+ * {@link A} so the tip appears when the element is hovered or keyboard-focused.
+ * The tip panel is rendered into `document.body` via a portal, so it is never
+ * clipped by `overflow:hidden` ancestors. Position is computed from the
+ * element's bounding rect and automatically flips when near the viewport edge.
+ *
+ * @example
+ * ```ts
+ * A("button #Save", () => {
+ *   S.addTooltip({ tip: "Saves your work to the cloud" });
+ * });
+ *
+ * A("button #Delete", () => {
+ *   S.addTooltip({ tip: "Dangerous — cannot be undone", placement: "bottom" });
+ * });
+ * ```
+ */
+export function addTooltip(opts) {
+    const show = (e) => {
+        if (hideTimer) {
+            clearTimeout(hideTimer);
+            hideTimer = null;
+        }
+        $ttActive.value = { opts, anchor: e.currentTarget };
+    };
+    A("mouseenter=", show);
+    A("mouseleave=", scheduleHide);
+    A("focusin=", show);
+    A("focusout=", scheduleHide);
+    A.clean(() => {
+        if ($ttActive.value?.opts === opts)
+            $ttActive.value = undefined;
+    });
+}

package/dist/core.d.ts

@@ -1,7 +1,7 @@
 /**
- * Shared building blocks for the Skye component library.
+ * Shared building blocks for the Staffa component library.
  *
- * Every component in Skye is "just an Aberdeen draw function": a plain function
+ * Every component in Staffa is "just an Aberdeen draw function": a plain function
  * that takes a single, strongly typed options object and emits DOM through
  * Aberdeen's {@link A} function. This module defines the option-type hierarchy
  * that all components build on, plus a couple of tiny helpers.
@@ -9,15 +9,19 @@
 /**
  * An Aberdeen attribute/style/class string, e.g. `"display:flex gap:$3 .my-class"`.
  *
+ * Common values are our surface modifier classes:
+ * - for colors: `.panel` `.raised` `.neutral` `.primary` `.secondary` `.gradient` `.danger` `.success` and `.warning`
+ * - for variant: `.filled` `.tonal` and `.outlined`
+ *
  * These strings are passed straight through to {@link A} as positional
  * arguments, so they accept the full Aberdeen shorthand syntax: CSS shortcuts
  * (`p`, `mt`, `bg`, `r`, ...), spacing variables (`$1`..`$12`), CSS custom
- * properties (`$sPrimary`), classes (`.foo`) and attributes (`aria-label=Hi`).
+ * properties (`$s-primary`), classes (`.foo`) and attributes (`aria-label=Hi`).
  *
  * Note: because Aberdeen interprets a leading bare word as an element name, write
  * `display:flex` rather than just `flex`.
  */
-export type Styling = string;
+export type Attributes = string;
 /** A reactive "value box", such as the result of `A.proxy(x)` or `A.ref(obj, key)`. */
 export type Bindable<T> = {
     value: T;
@@ -25,49 +29,32 @@ export type Bindable<T> = {
 /** A content function. It runs inside the relevant element's reactive scope. */
 export type Content = () => void;
 /**
- * Something that renders a small piece of content: either a plain string (drawn
- * as a text node) or a draw function (for icons, badges, custom markup, ...).
- */
-export type Slot = string | Content;
-/**
- * Options shared by *every* Skye component.
+ * Something that renders a small piece of content: either a plain string or a
+ * draw function (for icons, badges, custom markup, ...).
  *
- * The {@link BaseOptions.root | root} string is applied to the outermost element
- * of the widget, letting callers tweak layout, spacing or add classes without
- * forking the component.
+ * A string is drawn as **rich text** (see {@link drawSlot}): Aberdeen's `rich`
+ * markup is applied, so `*italic*`, `**bold**`, `` `code` `` and
+ * `[links](/path)` render as inline elements (text is safely escaped).
+ *
+ * The optional `Args` type parameter lets a slot's draw-function receive
+ * arguments — e.g. a dialog body is a `Slot<[close: () => void]>`.
  */
-export interface BaseOptions {
-    /**
-     * Aberdeen attr/style string applied to the widget's root element.
-     *
-     * It is passed as a positional argument to {@link A}, so a *change* to it on a
-     * proxied options object re-runs the caller's scope (recreating the widget).
-     * That's fine for `root` — it rarely changes at runtime.
-     */
-    root?: Styling;
-}
+export type Slot<Args extends unknown[] = []> = string | ((...args: Args) => void);
 /**
- * Options for components that wrap a single block of caller-provided content.
- *
- * Such components render an *inner* element (the one that actually holds the
- * children) which is given sensible default padding and `gap` in CSS. Override
- * those via {@link ContentOptions.inner | inner}, whose declarations win because
- * they're applied as inline styles.
+ * Options for components that wrap a single block of caller-provided content,
+ * with an `attrs` escape hatch on the outermost element.
  */
-export interface ContentOptions extends BaseOptions {
+export interface ContentOptions {
+    /** Aberdeen attr/style string applied to the widget's outermost element. */
+    attrs?: Attributes;
     /** Draws the children of this component. */
     content?: Content;
-    /**
-     * Aberdeen attr/style string applied to the inner (content-holding) element.
-     * Add `display:flex` here if you want the children laid out as a flex
-     * row/column.
-     */
-    inner?: Styling;
 }
 /** Generates a process-unique id, used to wire `<label for>` to its control. */
 export declare function uniqueId(prefix?: string): string;
 /**
- * Draw a {@link Slot} into the current element: call it if it's a function,
- * otherwise emit it as a text node.
+ * Draw a {@link Slot} into the current element: call it (with any extra `args`)
+ * if it's a function, otherwise emit the string as **rich text** via Aberdeen's
+ * `rich` markup (`*italic*`, `**bold**`, `` `code` ``, `[link](/path)`).
  */
-export declare function drawSlot(slot: Slot | undefined): void;
+export declare function drawSlot<Args extends unknown[] = []>(slot: Slot<Args> | undefined, ...args: Args): void;

package/dist/core.js

@@ -5,14 +5,15 @@ export function uniqueId(prefix = "s") {
     return `${prefix}-${++idCounter}`;
 }
 /**
- * Draw a {@link Slot} into the current element: call it if it's a function,
- * otherwise emit it as a text node.
+ * Draw a {@link Slot} into the current element: call it (with any extra `args`)
+ * if it's a function, otherwise emit the string as **rich text** via Aberdeen's
+ * `rich` markup (`*italic*`, `**bold**`, `` `code` ``, `[link](/path)`).
  */
-export function drawSlot(slot) {
+export function drawSlot(slot, ...args) {
     if (slot == null)
         return;
     if (typeof slot === "function")
-        slot();
+        slot(...args);
     else
-        A("#", slot);
+        A("rich=", slot);
 }

package/dist/icons-helpers.d.ts

@@ -0,0 +1,46 @@
+/** Stroke line-cap, as accepted by SVG's `stroke-linecap`. */
+export type IconCap = "butt" | "round" | "square";
+/** Stroke line-join, as accepted by SVG's `stroke-linejoin`. */
+export type IconJoin = "arcs" | "bevel" | "miter" | "miter-clip" | "round";
+/** Per-call overrides for a drawn icon. Anything omitted falls back to the
+ * module defaults (see {@link setDefaults}). */
+export interface IconOptions {
+    /** Width & height, as a CSS length. A bare number is treated as pixels by
+     * SVG. Pass e.g. `"1em"` to scale the icon with the surrounding font. */
+    size?: number | string;
+    /** Stroke colour. Defaults to `"currentColor"`, so the icon inherits the
+     * current text colour. */
+    color?: string;
+    /** Stroke width in viewBox units (the viewBox is 24×24). */
+    strokeWidth?: number;
+    /** Stroke line-cap. */
+    cap?: IconCap;
+    /** Stroke line-join. */
+    join?: IconJoin;
+    /** Aberdeen attr/style string applied to the `<svg>` element. */
+    attrs?: string;
+}
+/** The resolved, always-present defaults backing {@link IconOptions}. */
+export interface IconDefaults {
+    size: number | string;
+    color: string;
+    strokeWidth: number;
+    cap: IconCap;
+    join: IconJoin;
+}
+/**
+ * Override the module-wide icon defaults. Affects every icon drawn afterwards.
+ *
+ * @example
+ * ```ts
+ * import { setDefaults } from "staffa/icons";
+ * setDefaults({ size: "1.25em", strokeWidth: 1.5 });
+ * ```
+ */
+export declare function setDefaults(opts: Partial<IconDefaults>): void;
+/**
+ * Turn a piece of inner-SVG markup into an icon draw-function. The returned
+ * function emits a freshly-built `<svg>` into the current Aberdeen scope,
+ * applying the {@link IconOptions} (or the module defaults).
+ */
+export declare function mk(inner: string): (opts?: IconOptions) => void;

package/dist/icons-helpers.js

@@ -0,0 +1,44 @@
+import A from "aberdeen";
+const defaults = {
+    size: 24,
+    color: "currentColor",
+    strokeWidth: 2,
+    cap: "round",
+    join: "round",
+};
+/**
+ * Override the module-wide icon defaults. Affects every icon drawn afterwards.
+ *
+ * @example
+ * ```ts
+ * import { setDefaults } from "staffa/icons";
+ * setDefaults({ size: "1.25em", strokeWidth: 1.5 });
+ * ```
+ */
+export function setDefaults(opts) {
+    Object.assign(defaults, opts);
+}
+/**
+ * Draw a single icon: build one `<svg>` through Aberdeen (applying the
+ * {@link IconOptions} or the module defaults) and fill in its inner markup.
+ *
+ * This is the shared body behind every icon. {@link mk} hands it the icon's
+ * `inner` markup, so the per-icon closures stay tiny instead of each carrying
+ * a copy of this logic.
+ */
+function drawIcon(inner, opts) {
+    const size = opts.size ?? defaults.size;
+    const el = A('svg.s-icon aria-hidden=true viewBox="0 0 24 24" fill=none', "width=", size, "height=", size, "stroke=", opts.color ?? defaults.color, "stroke-width=", opts.strokeWidth ?? defaults.strokeWidth, "stroke-linecap=", opts.cap ?? defaults.cap, "stroke-linejoin=", opts.join ?? defaults.join, opts.attrs);
+    // Drop the primitives in via innerHTML: setting it on the `<svg>` itself
+    // makes the parser put the children in the SVG namespace. (Aberdeen's
+    // `html=` builds them in the HTML namespace, leaving them non-rendering.)
+    el.innerHTML = inner;
+}
+/**
+ * Turn a piece of inner-SVG markup into an icon draw-function. The returned
+ * function emits a freshly-built `<svg>` into the current Aberdeen scope,
+ * applying the {@link IconOptions} (or the module defaults).
+ */
+export function mk(inner) {
+    return (opts = {}) => drawIcon(inner, opts);
+}