@sharedex/ui 0.9.0 → 0.10.0

package/dist/forms/controls/shared.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import type { FormEffect } from "../types.js";
+/** The effects as a list, each id once (the last one wins). */
+export declare function effectList(effect: FormEffect | readonly FormEffect[] | undefined): readonly FormEffect[];
+/** `{uid}` in a var's value becomes this control's id prefix (an anchor name, `url(#{uid}-goo)` for a filter). */
+export declare function withUid(vars: Record<string, unknown>, uid: string): Record<string, unknown>;
+/** The node shows something. */
+export declare const filled: (node: ReactNode) => boolean;

package/dist/forms/controls/shared.js

@@ -0,0 +1,18 @@
+// Small pure helpers every form control shares: the effects as a list, `{uid}` in their vars, whether a node shows
+// anything. No React state, no "use client": a plain module.
+/** The effects as a list, each id once (the last one wins). */
+export function effectList(effect) {
+    if (!effect)
+        return [];
+    const list = Array.isArray(effect) ? effect : [effect];
+    return [...new Map(list.map((e) => [e.id, e])).values()];
+}
+/** `{uid}` in a var's value becomes this control's id prefix (an anchor name, `url(#{uid}-goo)` for a filter). */
+export function withUid(vars, uid) {
+    const out = {};
+    for (const [k, value] of Object.entries(vars))
+        out[k] = typeof value === "string" ? value.split("{uid}").join(uid) : value;
+    return out;
+}
+/** The node shows something. */
+export const filled = (node) => node !== undefined && node !== null && node !== false && node !== "";

package/dist/forms/effects/cards.d.ts

@@ -0,0 +1,11 @@
+/** The card's states (they hold under reduced motion) for an effect's root (`choiceOf` or `radiosOf`). */
+export declare function cardState(root: string, id: string): string;
+/** The card's motion: the light fades in, the border turns, and a mouse lifts it a little. */
+export declare function cardMotion(root: string, id: string): string;
+/** The card's layer: the panel, with the light inside it. It shows a state, so it stays under reduced motion. */
+export declare const CARD_LAYER: {
+    readonly slot: "row";
+    readonly part: "card";
+    readonly children: readonly ["tint"];
+    readonly keep: true;
+};

package/dist/forms/effects/cards.js

@@ -0,0 +1,52 @@
+// The card both `checkCard` and `radioCard` turn each option into: a bordered panel holding the box, the words and the
+// help, lit when chosen. The panel is a `row` layer, so the option's real label stays the whole card.
+import { at, inItem, choiceLayer, choiceChild, CHECKED, KEYED, ROW, timed, whenItemHover } from "./kit.js";
+/** The card's states (they hold under reduced motion) for an effect's root (`choiceOf` or `radiosOf`). */
+export function cardState(root, id) {
+    const CARD = choiceLayer(id, "card");
+    const TINT = choiceChild(id, "tint", "card");
+    return `  ${at(`${root} ${ROW}`)} {
+    padding: 0.875rem 1rem;
+  }
+  ${at(inItem(root, "", CARD))} {
+    border: 1px solid var(--color-sx-border, currentColor);
+    border-radius: var(--radius-sx-card, 0.75rem);
+    background: var(--color-sx-secondary, Canvas);
+  }
+  ${at(inItem(root, "", TINT))} {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: color-mix(in oklab, var(--color-sx-primary) 7%, transparent);
+    opacity: 0;
+  }
+  ${at(inItem(root, CHECKED, CARD))} {
+    border-color: var(--color-sx-primary, currentColor);
+    outline: 1px solid var(--color-sx-primary, currentColor);
+    outline-offset: -2px;
+  }
+  ${at(inItem(root, CHECKED, TINT))} {
+    opacity: 1;
+  }
+  ${at(inItem(root, KEYED, CARD))} {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: 2px;
+  }`;
+}
+/** The card's motion: the light fades in, the border turns, and a mouse lifts it a little. */
+export function cardMotion(root, id) {
+    const CARD = choiceLayer(id, "card");
+    const TINT = choiceChild(id, "tint", "card");
+    return `  ${at(inItem(root, "", CARD))} {
+    ${timed(id, "border-color")}
+  }
+  ${at(inItem(root, "", TINT))} {
+    ${timed(id, "opacity")}
+  }
+  ${at(inItem(root, "", ROW))} {
+    ${timed(id, "translate")}
+  }
+${whenItemHover(root, ROW, "translate: 0 -2px;")}`;
+}
+/** The card's layer: the panel, with the light inside it. It shows a state, so it stays under reduced motion. */
+export const CARD_LAYER = { slot: "row", part: "card", children: ["tint"], keep: true };

package/dist/forms/effects/check/checkCard.d.ts

@@ -0,0 +1,10 @@
+import type { FormEffect } from "../../types.js";
+export interface CheckCardOptions {
+    /** Seconds each change takes. Default `0.2`. */
+    readonly duration?: number;
+}
+/**
+ * The option becomes a card holding the box, the words and the help: lit and outlined when checked, lifted a little
+ * under the mouse. The whole card is the label, so a click anywhere on it toggles it.
+ */
+export declare function checkCard(options?: CheckCardOptions): FormEffect;

package/dist/forms/effects/check/checkCard.js

@@ -0,0 +1,15 @@
+import { CARD_LAYER, cardMotion, cardState } from "../cards.js";
+import { choiceOf, defineForm, varName } from "../kit.js";
+const ID = "checkCard";
+/**
+ * The option becomes a card holding the box, the words and the help: lit and outlined when checked, lifted a little
+ * under the mouse. The whole card is the label, so a click anywhere on it toggles it.
+ */
+export function checkCard(options = {}) {
+    return defineForm(ID, cardMotion(choiceOf(ID), ID), {
+        fits: ["checkbox"],
+        state: cardState(choiceOf(ID), ID),
+        vars: { [varName(ID, "time")]: `${options.duration ?? 0.2}s` },
+        layers: [CARD_LAYER],
+    });
+}

package/dist/forms/effects/check/checkCard.schema.d.ts

@@ -0,0 +1 @@
+export declare const CHECK_CARD_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/check/checkCard.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CHECK_CARD_SCHEMA = defineSchema()({
+    id: "checkCard",
+    family: "form",
+    factory: "checkCard",
+    fields: {
+        duration: { kind: "number", label: "Duration", min: 0.05, max: 0.6, step: 0.05, unit: "s", default: 0.2 },
+    },
+});

package/dist/forms/effects/check/checkConfetti.d.ts

@@ -0,0 +1,18 @@
+import type { FormEffect } from "../../types.js";
+export interface CheckConfettiOptions {
+    /** Picked at random for each piece. Default `["var(--color-sx-accent)", "var(--color-sx-primary)", "var(--color-sx-success)"]`. */
+    readonly colors?: readonly string[];
+    /** How many pieces, at most 30. Default `24`. */
+    readonly count?: number;
+    /** Degrees either side of straight up. Default `60`. */
+    readonly spread?: number;
+    /** A piece's width, px. Default `8`. */
+    readonly size?: number;
+    /** Seconds they fall. Default `1.6`. */
+    readonly duration?: number;
+}
+/**
+ * Confetti bursts from the box each time it is checked by hand, on the page's one burst canvas (shared with `Button`'s
+ * particles; gone when the last piece lands). Nothing under reduced motion. It runs code: the page needs `"use client"`.
+ */
+export declare function checkConfetti(options?: CheckConfettiOptions): FormEffect;

package/dist/forms/effects/check/checkConfetti.js

@@ -0,0 +1,38 @@
+import { emit } from "../../../buttons/runtime/burst.js";
+import { CONFETTI } from "../../../buttons/runtime/particles.js";
+import { stillMotion } from "../../../buttons/runtime/press.js";
+import { canvasColors } from "../../../buttons/effects/press/throw.js";
+import { defineForm } from "../kit.js";
+/**
+ * Confetti bursts from the box each time it is checked by hand, on the page's one burst canvas (shared with `Button`'s
+ * particles; gone when the last piece lands). Nothing under reduced motion. It runs code: the page needs `"use client"`.
+ */
+export function checkConfetti(options = {}) {
+    const colors = options.colors ?? ["var(--color-sx-accent)", "var(--color-sx-primary)", "var(--color-sx-success)"];
+    const count = options.count ?? 24;
+    const spread = options.spread ?? 60;
+    const size = options.size ?? 8;
+    const life = options.duration ?? 1.6;
+    return defineForm("checkConfetti", "", {
+        fits: ["checkbox"],
+        program: {
+            signature: JSON.stringify({ colors, count, spread, size, life }),
+            attach: (root) => {
+                const fire = (event) => {
+                    const input = event.target;
+                    if (!input || input.type !== "checkbox" || !input.checked || stillMotion())
+                        return;
+                    const box = (input.parentElement?.querySelector("[data-sx-choice-box]") ?? input).getBoundingClientRect();
+                    emit(CONFETTI, box.left + box.width / 2, box.top + box.height / 2, count, {
+                        colors: canvasColors(root, colors),
+                        size,
+                        life,
+                        spread: (spread * Math.PI) / 180,
+                    });
+                };
+                root.addEventListener("change", fire);
+                return () => root.removeEventListener("change", fire);
+            },
+        },
+    });
+}

package/dist/forms/effects/check/checkConfetti.schema.d.ts

@@ -0,0 +1 @@
+export declare const CHECK_CONFETTI_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/check/checkConfetti.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CHECK_CONFETTI_SCHEMA = defineSchema()({
+    id: "checkConfetti",
+    family: "form",
+    factory: "checkConfetti",
+    fields: {
+        colors: { kind: "colors", label: "Colours", min: 1, max: 6, default: ["var(--color-sx-accent)", "var(--color-sx-primary)", "var(--color-sx-success)"] },
+        count: { kind: "integer", label: "Pieces", min: 4, max: 30, default: 24 },
+        spread: { kind: "number", label: "Spread", min: 10, max: 120, step: 5, unit: "°", default: 60 },
+        size: { kind: "number", label: "Piece size", min: 4, max: 14, step: 1, unit: "px", default: 8 },
+        duration: { kind: "number", label: "Falls for", min: 0.6, max: 3, step: 0.05, unit: "s", default: 1.6 },
+    },
+});

package/dist/forms/effects/check/checkDraw.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface CheckDrawOptions {
+    /** Seconds the tick takes to draw. Default `0.25`. */
+    readonly duration?: number;
+}
+/** The tick draws itself into the box, stroke by stroke, a moment after the box fills. */
+export declare function checkDraw(options?: CheckDrawOptions): FormEffect;

package/dist/forms/effects/check/checkDraw.js

@@ -0,0 +1,12 @@
+import { at, choiceOf, defineForm, v, varName } from "../kit.js";
+const ID = "checkDraw";
+const MARKS = `${choiceOf(ID)} [data-sx-mark]`;
+// The tick (and the mixed dash) are the box's own paths with a dash: on, the dash runs from 1 to 0 and the line draws
+// itself from its start. Without this the mark just appears. It starts a moment after the box fills.
+const CSS = `  ${at(MARKS)} {
+    transition: stroke-dashoffset ${v(ID, "time")} ease-out calc(${v(ID, "time")} * 0.2);
+  }`;
+/** The tick draws itself into the box, stroke by stroke, a moment after the box fills. */
+export function checkDraw(options = {}) {
+    return defineForm(ID, CSS, { fits: ["checkbox"], vars: { [varName(ID, "time")]: `${options.duration ?? 0.25}s` } });
+}

package/dist/forms/effects/check/checkDraw.schema.d.ts

@@ -0,0 +1 @@
+export declare const CHECK_DRAW_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/check/checkDraw.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CHECK_DRAW_SCHEMA = defineSchema()({
+    id: "checkDraw",
+    family: "form",
+    factory: "checkDraw",
+    fields: {
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.8, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

package/dist/forms/effects/check/checkHeart.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface CheckHeartOptions {
+    /** The heart's colour once liked. Default `var(--color-sx-danger)`. */
+    readonly color?: string;
+    /** Seconds the pop and the burst take. Default `0.45`. */
+    readonly duration?: number;
+}
+/** The box is a heart: liked, it fills, pops and throws a ring of dots (a "like" button that is a real checkbox). */
+export declare function checkHeart(options?: CheckHeartOptions): FormEffect;

package/dist/forms/effects/check/checkHeart.js

@@ -0,0 +1,84 @@
+import { CHANGED, CHECKED, MARK, SPRING, at, choiceLayer, choiceOf, defineForm, inItem, v, varName } from "../kit.js";
+const ID = "checkHeart";
+const ROOT = choiceOf(ID);
+const HEART = `${choiceLayer(ID, "heart")} [data-sx-choice-svg="heart"]`;
+const SPARKS = choiceLayer(ID, "burst");
+const SPARK = `${SPARKS} > [data-sx-choice-part]`;
+const ANGLES = [0, 45, 90, 135, 180, 225, 270, 315];
+// The box becomes a heart: an outline, filled once liked (a state: it holds under reduced motion). Liked by hand, it
+// pops and throws eight dots out in a ring, which fade as they fly.
+const STATE = `  ${at(ROOT)} {
+    --sx-choice-edge: transparent;
+    --sx-choice-bg: transparent;
+    --sx-choice-fill: transparent;
+  }
+  ${at(`${ROOT} ${MARK}`)} {
+    display: none;
+  }
+  ${at(HEART)} {
+    fill: transparent;
+    stroke: var(--sx-choice-line, currentColor);
+    stroke-width: 2;
+    stroke-linejoin: round;
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+  ${at(inItem(ROOT, CHECKED, HEART))} {
+    fill: ${v(ID, "color")};
+    stroke: ${v(ID, "color")};
+  }`;
+const CSS = `  ${at(HEART)} {
+    transition: fill ${v(ID, "time")}, stroke ${v(ID, "time")};
+  }
+  ${at(inItem(ROOT, `${CHECKED}${CHANGED}`, HEART))} {
+    animation: sx-form-checkHeart ${v(ID, "time")} ${SPRING};
+  }
+  ${at(SPARK)} {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: 0.25em;
+    block-size: 0.25em;
+    margin: -0.125em;
+    border-radius: 50%;
+    background: ${v(ID, "color")};
+    opacity: 0;
+  }
+${ANGLES.map((a, i) => `  ${at(`${SPARKS} > [data-sx-choice-part="s${i + 1}"]`)} { --sx-form-checkHeart-a: ${a}deg; }`).join("\n")}
+  ${at(inItem(ROOT, `${CHECKED}${CHANGED}`, SPARK))} {
+    animation: sx-form-checkHeart-burst ${v(ID, "time")} ease-out;
+  }
+  @keyframes sx-form-checkHeart {
+    0% { scale: 0.6; }
+    60% { scale: 1.25; }
+    100% { scale: 1; }
+  }
+  @keyframes sx-form-checkHeart-burst {
+    0% { translate: 0 0; scale: 1; opacity: 1; }
+    100% {
+      translate: calc(cos(var(--sx-form-checkHeart-a)) * 1.5em) calc(sin(var(--sx-form-checkHeart-a)) * 1.5em);
+      scale: 0.3;
+      opacity: 0;
+    }
+  }`;
+/** The box is a heart: liked, it fills, pops and throws a ring of dots (a "like" button that is a real checkbox). */
+export function checkHeart(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["checkbox"],
+        state: STATE,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-danger)", [varName(ID, "time")]: `${options.duration ?? 0.45}s` },
+        layers: [
+            {
+                slot: "box",
+                part: "heart",
+                keep: true,
+                svg: {
+                    viewBox: "0 0 24 24",
+                    children: [{ tag: "path", part: "heart", attrs: { d: "M12 20.5s-7.6-4.6-9.3-9.3C1.5 7.7 3.7 4.5 7.1 4.5c2 0 3.6 1.1 4.9 3 1.3-1.9 2.9-3 4.9-3 3.4 0 5.6 3.2 4.4 6.7-1.7 4.7-9.3 9.3-9.3 9.3Z" } }],
+                },
+            },
+            { slot: "halo", part: "burst", children: ANGLES.map((_, i) => `s${i + 1}`) },
+        ],
+        claims: ["mark"],
+    });
+}

package/dist/forms/effects/check/checkHeart.schema.d.ts

@@ -0,0 +1 @@
+export declare const CHECK_HEART_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/check/checkHeart.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CHECK_HEART_SCHEMA = defineSchema()({
+    id: "checkHeart",
+    family: "form",
+    factory: "checkHeart",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-danger)" },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 1, step: 0.05, unit: "s", default: 0.45 },
+    },
+});

package/dist/forms/effects/check/checkJelly.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface CheckJellyOptions {
+    /** How far it squashes, 0.1 to 0.4. Default `0.25`. */
+    readonly squash?: number;
+    /** Seconds it wobbles. Default `0.5`. */
+    readonly duration?: number;
+}
+/** The box wobbles like jelly when checked: squashed, stretched, settling. */
+export declare function checkJelly(options?: CheckJellyOptions): FormEffect;

package/dist/forms/effects/check/checkJelly.js

@@ -0,0 +1,23 @@
+import { BOX, CHANGED, CHECKED, at, choiceOf, defineForm, inItem, v, varName } from "../kit.js";
+const ID = "checkJelly";
+const SQ = v(ID, "squash");
+// Plays when the user checks it (CHANGED), never for a box that loads checked: wide and flat, tall and thin, smaller
+// and smaller wobbles, then still.
+const CSS = `  ${at(inItem(choiceOf(ID), `${CHECKED}${CHANGED}`, BOX))} {
+    animation: sx-form-checkJelly ${v(ID, "time")} ease-out;
+  }
+  @keyframes sx-form-checkJelly {
+    0%, 100% { scale: 1 1; }
+    30% { scale: calc(1 + ${SQ}) calc(1 - ${SQ}); }
+    45% { scale: calc(1 - ${SQ}) calc(1 + ${SQ}); }
+    60% { scale: calc(1 + ${SQ} * 0.5) calc(1 - ${SQ} * 0.5); }
+    75% { scale: calc(1 - ${SQ} * 0.2) calc(1 + ${SQ} * 0.2); }
+  }`;
+/** The box wobbles like jelly when checked: squashed, stretched, settling. */
+export function checkJelly(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["checkbox"],
+        vars: { [varName(ID, "squash")]: options.squash ?? 0.25, [varName(ID, "time")]: `${options.duration ?? 0.5}s` },
+        claims: ["box"],
+    });
+}

package/dist/forms/effects/check/checkJelly.schema.d.ts

@@ -0,0 +1 @@
+export declare const CHECK_JELLY_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/check/checkJelly.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CHECK_JELLY_SCHEMA = defineSchema()({
+    id: "checkJelly",
+    family: "form",
+    factory: "checkJelly",
+    fields: {
+        squash: { kind: "number", label: "Squash", min: 0.1, max: 0.4, step: 0.01, default: 0.25 },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 1, step: 0.05, unit: "s", default: 0.5 },
+    },
+});

package/dist/forms/effects/check/checkMerge.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface CheckMergeOptions {
+    /** The pill's colour, mixed light. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Seconds it takes. Default `0.2`. */
+    readonly duration?: number;
+}
+/** Checked neighbours merge: their highlights join into one block, corners squaring where they meet. */
+export declare function checkMerge(options?: CheckMergeOptions): FormEffect;

package/dist/forms/effects/check/checkMerge.js

@@ -0,0 +1,37 @@
+import { CHECKED, CHOICE, ITEM, at, choiceLayer, choiceOf, defineForm, inItem, v, varName } from "../kit.js";
+const ID = "checkMerge";
+const ROOT = choiceOf(ID);
+const PILL = choiceLayer(ID, "pill");
+const NEXT_ON = `:has(+ ${ITEM} ${CHOICE}:checked)`;
+// Each checked option sits on a pill. Pills reach half the gap past their option, so two checked neighbours touch,
+// and their facing corners square off: a run of checked options reads as one block (in a CheckGroup, or any stack of
+// checkboxes with the group's 0.5rem gap). The pills are the state; only how they appear moves.
+const STATE = `  ${at(PILL)} {
+    inset: -0.25rem -0.5rem;
+    border-radius: 0.625rem;
+    background: color-mix(in oklab, ${v(ID, "color")} 14%, transparent);
+    opacity: 0;
+  }
+  ${at(inItem(ROOT, CHECKED, PILL))} {
+    opacity: 1;
+  }
+  ${at(inItem(ROOT, `${CHECKED}${NEXT_ON}`, PILL))} {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+  ${at(`${ITEM}:has(${CHOICE}:checked) + ${ROOT}${CHECKED} ${PILL}`)} {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }`;
+const CSS = `  ${at(PILL)} {
+    transition: opacity ${v(ID, "time")} ease-out, border-radius ${v(ID, "time")} ease-out;
+  }`;
+/** Checked neighbours merge: their highlights join into one block, corners squaring where they meet. */
+export function checkMerge(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["checkbox"],
+        state: STATE,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)", [varName(ID, "time")]: `${options.duration ?? 0.2}s` },
+        layers: [{ slot: "row", part: "pill", keep: true }],
+    });
+}

package/dist/forms/effects/check/checkMerge.schema.d.ts

@@ -0,0 +1 @@
+export declare const CHECK_MERGE_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/check/checkMerge.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CHECK_MERGE_SCHEMA = defineSchema()({
+    id: "checkMerge",
+    family: "form",
+    factory: "checkMerge",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-primary)" },
+        duration: { kind: "number", label: "Duration", min: 0.05, max: 0.5, step: 0.05, unit: "s", default: 0.2 },
+    },
+});

package/dist/forms/effects/check/checkMixed.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface CheckMixedOptions {
+    /** Seconds each change takes. Default `0.25`. */
+    readonly duration?: number;
+}
+/** The mixed dash grows out from the middle, and gives way to the tick when every item is on. */
+export declare function checkMixed(options?: CheckMixedOptions): FormEffect;

package/dist/forms/effects/check/checkMixed.js

@@ -0,0 +1,25 @@
+import { MIXED, SPRING, at, choiceOf, defineForm, inItem, v, varName } from "../kit.js";
+const ID = "checkMixed";
+const ROOT = choiceOf(ID);
+const DASH = '[data-sx-mark="dash"]';
+const TICK = '[data-sx-mark="tick"]';
+// The mixed state (`indeterminate`, a "select all" box when some are on) shows a dash. Here it grows out from the
+// middle instead of drawing from one end, and on the way to fully on it shrinks away while the tick draws in after it.
+// Under reduced motion the box's own dash simply shows.
+const CSS = `  ${at(`${ROOT} ${DASH}`)} {
+    stroke-dashoffset: 0;
+    scale: 0 1;
+    opacity: 0;
+    transition: scale ${v(ID, "time")} ${SPRING}, opacity ${v(ID, "time")};
+  }
+  ${at(inItem(ROOT, MIXED, DASH))} {
+    scale: 1 1;
+    opacity: 1;
+  }
+  ${at(`${ROOT} ${TICK}`)} {
+    transition: stroke-dashoffset ${v(ID, "time")} ease-out calc(${v(ID, "time")} * 0.5);
+  }`;
+/** The mixed dash grows out from the middle, and gives way to the tick when every item is on. */
+export function checkMixed(options = {}) {
+    return defineForm(ID, CSS, { fits: ["checkbox"], vars: { [varName(ID, "time")]: `${options.duration ?? 0.25}s` } });
+}

package/dist/forms/effects/check/checkMixed.schema.d.ts

@@ -0,0 +1 @@
+export declare const CHECK_MIXED_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/check/checkMixed.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CHECK_MIXED_SCHEMA = defineSchema()({
+    id: "checkMixed",
+    family: "form",
+    factory: "checkMixed",
+    fields: {
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.6, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

package/dist/forms/effects/check/checkMorph.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface CheckMorphOptions {
+    /** The tick's colour. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Seconds the line takes to run from the box into the tick. Default `0.45`. */
+    readonly duration?: number;
+}
+/** The box's outline runs off and folds into the tick: one line becomes the other. */
+export declare function checkMorph(options?: CheckMorphOptions): FormEffect;

package/dist/forms/effects/check/checkMorph.js

@@ -0,0 +1,53 @@
+import { CHECKED, EASE, MARK, at, choiceLayer, choiceOf, defineForm, inItem, v, varName } from "../kit.js";
+const ID = "checkMorph";
+const ROOT = choiceOf(ID);
+const LINE = `${choiceLayer(ID)} [data-sx-choice-svg="line"]`;
+// One path: the box's outline (80% of its length), then the tick (20%). A dash shows the outline at rest; on, the dash
+// shrinks to the tick's length and slides along the path, so the line seems to leave the box and become the tick.
+// The look's own box and tick step aside; the mixed dash stays, in the tick's colour.
+const STATE = `  ${at(ROOT)} {
+    --sx-choice-edge: transparent;
+    --sx-choice-bg: transparent;
+    --sx-choice-fill: transparent;
+    --sx-choice-ink: ${v(ID, "color")};
+  }
+  ${at(`${ROOT} ${MARK} [data-sx-mark="tick"]`)} {
+    display: none;
+  }
+  ${at(LINE)} {
+    fill: none;
+    stroke: var(--sx-choice-line, currentColor);
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: 0.8 1;
+    stroke-dashoffset: 0;
+  }
+  ${at(inItem(ROOT, CHECKED, LINE))} {
+    stroke: ${v(ID, "color")};
+    stroke-width: 3;
+    stroke-dasharray: 0.2 1;
+    stroke-dashoffset: -0.8;
+  }`;
+const CSS = `  ${at(LINE)} {
+    transition: stroke-dasharray ${v(ID, "time")} ${EASE}, stroke-dashoffset ${v(ID, "time")} ${EASE}, stroke ${v(ID, "time")}, stroke-width ${v(ID, "time")};
+  }`;
+/** The box's outline runs off and folds into the tick: one line becomes the other. */
+export function checkMorph(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["checkbox"],
+        state: STATE,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)", [varName(ID, "time")]: `${options.duration ?? 0.45}s` },
+        layers: [
+            {
+                slot: "box",
+                keep: true,
+                svg: {
+                    viewBox: "0 0 24 24",
+                    children: [{ tag: "path", part: "line", attrs: { pathLength: 1, d: "M7 3h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4zM6.5 12.5l3.75 3.75L18 8.5" } }],
+                },
+            },
+        ],
+        claims: ["mark"],
+    });
+}

package/dist/forms/effects/check/checkMorph.schema.d.ts

@@ -0,0 +1 @@
+export declare const CHECK_MORPH_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/check/checkMorph.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CHECK_MORPH_SCHEMA = defineSchema()({
+    id: "checkMorph",
+    family: "form",
+    factory: "checkMorph",
+    fields: {
+        color: { kind: "color", label: "Tick colour", default: "var(--color-sx-primary)" },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 1, step: 0.05, unit: "s", default: 0.45 },
+    },
+});

package/dist/forms/effects/check/checkPop.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface CheckPopOptions {
+    /** How small the box gets while pressed, 0.7 to 1. Default `0.85`. */
+    readonly press?: number;
+    /** Seconds the spring back takes. Default `0.3`. */
+    readonly duration?: number;
+}
+/** The box squeezes while pressed and springs back past its size; the tick grows in. */
+export declare function checkPop(options?: CheckPopOptions): FormEffect;