@g9tm/lynxcontrols 0.0.0-stage → 1.4.2

package/dist/toggle/checkbox-math.jsx

@@ -0,0 +1,111 @@
+const f = Math.fround;
+const g9CheckFillPhaseEnd = f(0.4);
+const g9CheckMarkPhaseStart = f(0.25);
+function clamp01(value) {
+    if (!(value > 0)) return 0;
+    return value >= 1 ? 1 : f(value);
+}
+function targetProgress(isChecked, isIndeterminate) {
+    return isChecked || isIndeterminate ? 1 : 0;
+}
+function targetMorph(isIndeterminate) {
+    return isIndeterminate ? 1 : 0;
+}
+function nextOnTap(isChecked, isIndeterminate) {
+    return isIndeterminate ? {
+        checked: true,
+        indeterminate: false
+    } : {
+        checked: !isChecked,
+        indeterminate: false
+    };
+}
+function fillAmount(progress) {
+    return clamp01(f(f(progress) / g9CheckFillPhaseEnd));
+}
+function markAmount(progress) {
+    return clamp01(f(f(f(progress) - g9CheckMarkPhaseStart) / f(1 - g9CheckMarkPhaseStart)));
+}
+const geometry = (ax, ay, bx, by, cx, cy)=>Object.freeze({
+        ax: f(ax),
+        ay: f(ay),
+        bx: f(bx),
+        by: f(by),
+        cx: f(cx),
+        cy: f(cy)
+    });
+const g9CheckGeometry = geometry(0.24, 0.52, 0.42, 0.7, 0.77, 0.33);
+const g9DashGeometry = geometry(0.26, 0.5, 0.5, 0.5, 0.74, 0.5);
+const lerp = (from, to, t)=>f(from + f(f(to - from) * t));
+const distance = (x1, y1, x2, y2)=>{
+    const dx = f(x2 - x1);
+    const dy = f(y2 - y1);
+    return f(Math.sqrt(f(f(dx * dx) + f(dy * dy))));
+};
+function resolveCheckMarkGeometry(morph) {
+    const t = clamp01(morph);
+    if (t <= 0) return g9CheckGeometry;
+    if (t >= 1) return g9DashGeometry;
+    const c = g9CheckGeometry;
+    const d = g9DashGeometry;
+    return Object.freeze({
+        ax: lerp(c.ax, d.ax, t),
+        ay: lerp(c.ay, d.ay, t),
+        bx: lerp(c.bx, d.bx, t),
+        by: lerp(c.by, d.by, t),
+        cx: lerp(c.cx, d.cx, t),
+        cy: lerp(c.cy, d.cy, t)
+    });
+}
+function firstArmLength(g) {
+    return distance(g.ax, g.ay, g.bx, g.by);
+}
+function secondArmLength(g) {
+    return distance(g.bx, g.by, g.cx, g.cy);
+}
+const emptyTrim = Object.freeze({
+    isEmpty: true,
+    firstEndX: 0,
+    firstEndY: 0,
+    hasSecond: false,
+    secondEndX: 0,
+    secondEndY: 0
+});
+function trimCheckMark(g, amount) {
+    const t = clamp01(amount);
+    const first = firstArmLength(g);
+    const total = f(first + secondArmLength(g));
+    if (t <= 0 || total <= 0) return emptyTrim;
+    const drawn = f(t * total);
+    if (drawn <= first) {
+        const k = f(drawn / first);
+        return {
+            isEmpty: false,
+            firstEndX: f(g.ax + f(f(g.bx - g.ax) * k)),
+            firstEndY: f(g.ay + f(f(g.by - g.ay) * k)),
+            hasSecond: false,
+            secondEndX: g.bx,
+            secondEndY: g.by
+        };
+    }
+    const s = f(f(drawn - first) / f(total - first));
+    return {
+        isEmpty: false,
+        firstEndX: g.bx,
+        firstEndY: g.by,
+        hasSecond: true,
+        secondEndX: f(g.bx + f(f(g.cx - g.bx) * s)),
+        secondEndY: f(g.by + f(f(g.cy - g.by) * s))
+    };
+}
+function checkMarkPath(progress, morph, size) {
+    const trim = trimCheckMark(resolveCheckMarkGeometry(morph), markAmount(progress));
+    if (trim.isEmpty) return '';
+    const g = resolveCheckMarkGeometry(morph);
+    const p = (x, y)=>`${round(x * size)} ${round(y * size)}`;
+    return trim.hasSecond ? `M${p(g.ax, g.ay)} L${p(trim.firstEndX, trim.firstEndY)} L${p(trim.secondEndX, trim.secondEndY)}` : `M${p(g.ax, g.ay)} L${p(trim.firstEndX, trim.firstEndY)}`;
+}
+const round = (n)=>Math.round(1000 * n) / 1000;
+export { checkMarkPath, clamp01, fillAmount, firstArmLength, g9CheckFillPhaseEnd, g9CheckGeometry, g9CheckMarkPhaseStart, g9DashGeometry, markAmount, nextOnTap, resolveCheckMarkGeometry, secondArmLength, targetMorph, targetProgress, trimCheckMark };
+
+//# sourceMappingURL=checkbox-math.jsx.map

package/dist/toggle/checkbox-math.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle/checkbox-math.jsx","sources":["../../src/toggle/checkbox-math.ts"],"sourcesContent":["// MAUI `G9CheckBoxMath` / `G9CheckMarkGeometry` (Controls/G9CheckBox/G9CheckBoxMath.cs), in float32 like the C#\n// (`Math.fround` after every operation), so the golden vectors (plan/golden/checkbox.json) match bit for bit.\n\nconst f = Math.fround;\n\n/** Progress at which the box fill is complete. */\nexport const g9CheckFillPhaseEnd = f(0.4);\n/** Progress at which the mark starts drawing. */\nexport const g9CheckMarkPhaseStart = f(0.25);\n\n/** Clamps to [0, 1]; NaN and negatives give 0 (MAUI `Clamp01`). */\nexport function clamp01(value: number): number {\n  if (!(value > 0)) return 0;\n  return value >= 1 ? 1 : f(value);\n}\n\n/** Animation target: 1 when checked or indeterminate. */\nexport function targetProgress(isChecked: boolean, isIndeterminate: boolean): number {\n  return isChecked || isIndeterminate ? 1 : 0;\n}\n\n/** Morph target: 1 (dash) when indeterminate, 0 (tick) otherwise. */\nexport function targetMorph(isIndeterminate: boolean): number {\n  return isIndeterminate ? 1 : 0;\n}\n\n/** Tap transition (ADR-0028): indeterminate → checked; otherwise toggle, never into indeterminate. */\nexport function nextOnTap(isChecked: boolean, isIndeterminate: boolean): { checked: boolean; indeterminate: boolean } {\n  return isIndeterminate ? { checked: true, indeterminate: false } : { checked: !isChecked, indeterminate: false };\n}\n\n/** How much of the box is filled at `progress`. */\nexport function fillAmount(progress: number): number {\n  return clamp01(f(f(progress) / g9CheckFillPhaseEnd));\n}\n\n/** How much of the mark is drawn at `progress`. */\nexport function markAmount(progress: number): number {\n  return clamp01(f(f(f(progress) - g9CheckMarkPhaseStart) / f(1 - g9CheckMarkPhaseStart)));\n}\n\n/** The two-segment mark A→B→C in unit box coordinates. */\nexport interface G9CheckMarkGeometry {\n  readonly ax: number;\n  readonly ay: number;\n  readonly bx: number;\n  readonly by: number;\n  readonly cx: number;\n  readonly cy: number;\n}\n\n/** The visible part of the mark: the end of the first arm, and of the second when it has started. */\nexport interface G9CheckMarkTrim {\n  readonly isEmpty: boolean;\n  readonly firstEndX: number;\n  readonly firstEndY: number;\n  readonly hasSecond: boolean;\n  readonly secondEndX: number;\n  readonly secondEndY: number;\n}\n\nconst geometry = (ax: number, ay: number, bx: number, by: number, cx: number, cy: number): G9CheckMarkGeometry =>\n  Object.freeze({ ax: f(ax), ay: f(ay), bx: f(bx), by: f(by), cx: f(cx), cy: f(cy) });\n\n/** The tick. */\nexport const g9CheckGeometry = geometry(0.24, 0.52, 0.42, 0.7, 0.77, 0.33);\n/** The indeterminate dash. */\nexport const g9DashGeometry = geometry(0.26, 0.5, 0.5, 0.5, 0.74, 0.5);\n\nconst lerp = (from: number, to: number, t: number) => f(from + f(f(to - from) * t));\nconst distance = (x1: number, y1: number, x2: number, y2: number) => {\n  const dx = f(x2 - x1);\n  const dy = f(y2 - y1);\n  return f(Math.sqrt(f(f(dx * dx) + f(dy * dy))));\n};\n\n/** The mark between tick (0) and dash (1). */\nexport function resolveCheckMarkGeometry(morph: number): G9CheckMarkGeometry {\n  const t = clamp01(morph);\n  if (t <= 0) return g9CheckGeometry;\n  if (t >= 1) return g9DashGeometry;\n  const c = g9CheckGeometry;\n  const d = g9DashGeometry;\n  return Object.freeze({\n    ax: lerp(c.ax, d.ax, t),\n    ay: lerp(c.ay, d.ay, t),\n    bx: lerp(c.bx, d.bx, t),\n    by: lerp(c.by, d.by, t),\n    cx: lerp(c.cx, d.cx, t),\n    cy: lerp(c.cy, d.cy, t),\n  });\n}\n\n/** Length of the first arm A→B. */\nexport function firstArmLength(g: G9CheckMarkGeometry): number {\n  return distance(g.ax, g.ay, g.bx, g.by);\n}\n\n/** Length of the second arm B→C. */\nexport function secondArmLength(g: G9CheckMarkGeometry): number {\n  return distance(g.bx, g.by, g.cx, g.cy);\n}\n\nconst emptyTrim: G9CheckMarkTrim = Object.freeze({\n  isEmpty: true,\n  firstEndX: 0,\n  firstEndY: 0,\n  hasSecond: false,\n  secondEndX: 0,\n  secondEndY: 0,\n});\n\n/** The visible part of the mark when `amount` of its length is drawn (MAUI `Trim`). */\nexport function trimCheckMark(g: G9CheckMarkGeometry, amount: number): G9CheckMarkTrim {\n  const t = clamp01(amount);\n  const first = firstArmLength(g);\n  const total = f(first + secondArmLength(g));\n  if (t <= 0 || total <= 0) return emptyTrim;\n  const drawn = f(t * total);\n  if (drawn <= first) {\n    const k = f(drawn / first);\n    return {\n      isEmpty: false,\n      firstEndX: f(g.ax + f(f(g.bx - g.ax) * k)),\n      firstEndY: f(g.ay + f(f(g.by - g.ay) * k)),\n      hasSecond: false,\n      secondEndX: g.bx,\n      secondEndY: g.by,\n    };\n  }\n  const s = f(f(drawn - first) / f(total - first));\n  return {\n    isEmpty: false,\n    firstEndX: g.bx,\n    firstEndY: g.by,\n    hasSecond: true,\n    secondEndX: f(g.bx + f(f(g.cx - g.bx) * s)),\n    secondEndY: f(g.by + f(f(g.cy - g.by) * s)),\n  };\n}\n\n/** SVG path (in a `size` box) of the mark drawn at `progress` and `morph` (tick → dash). */\nexport function checkMarkPath(progress: number, morph: number, size: number): string {\n  const trim = trimCheckMark(resolveCheckMarkGeometry(morph), markAmount(progress));\n  if (trim.isEmpty) return '';\n  const g = resolveCheckMarkGeometry(morph);\n  const p = (x: number, y: number) => `${round(x * size)} ${round(y * size)}`;\n  return trim.hasSecond\n    ? `M${p(g.ax, g.ay)} L${p(trim.firstEndX, trim.firstEndY)} L${p(trim.secondEndX, trim.secondEndY)}`\n    : `M${p(g.ax, g.ay)} L${p(trim.firstEndX, trim.firstEndY)}`;\n}\n\nconst round = (n: number) => Math.round(n * 1000) / 1000;\n"],"names":["f","Math","g9CheckFillPhaseEnd","g9CheckMarkPhaseStart","clamp01","value","targetProgress","isChecked","isIndeterminate","targetMorph","nextOnTap","fillAmount","progress","markAmount","geometry","ax","ay","bx","by","cx","cy","Object","g9CheckGeometry","g9DashGeometry","lerp","from","to","t","distance","x1","y1","x2","y2","dx","dy","resolveCheckMarkGeometry","morph","c","d","firstArmLength","g","secondArmLength","emptyTrim","trimCheckMark","amount","first","total","drawn","k","s","checkMarkPath","size","trim","p","x","y","round","n"],"mappings":"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"}

package/dist/toggle/checkbox.d.ts

@@ -0,0 +1,56 @@
+import './toggle.css';
+import { type G9PaletteValues } from '@g9tm/lynxcontrols-foundation';
+import { type G9ControlBaseProps } from '../base/control.js';
+/** Box size, corner and stroke (MAUI `G9Metrics` check-box values, ADR-0028). */
+export declare const g9CheckBoxMetrics: Readonly<{
+    box: 20;
+    corner: 6;
+    stroke: 2;
+    touchTarget: 48;
+    progressMs: 200;
+    morphMs: 150;
+}>;
+/** Colours the box is drawn with. */
+export interface G9CheckBoxColors {
+    readonly outline: string;
+    readonly fill: string;
+    readonly mark: string;
+}
+/** The palette colours of a check box (outline, fill, mark; disabled variants). */
+export declare function checkBoxColors(palette: G9PaletteValues, disabled: boolean): G9CheckBoxColors;
+/**
+ * The SVG of the box at an animation state (MAUI `G9CheckBoxDrawable`): the outline fades with `1 − fill`
+ * (× 0.55 disabled), the fill grows from 78 % to 100 % with its alpha, the mark (tick → dash by `morph`) is trimmed by
+ * the golden phase functions. Never mirrored in RTL.
+ */
+export declare function checkBoxSvg(progress: number, morph: number, colors: G9CheckBoxColors, disabled: boolean): string;
+/** Props of {@link G9CheckBox} (MAUI `G9CheckBox`). */
+export interface G9CheckBoxProps extends G9ControlBaseProps {
+    /** Controlled checked state (MAUI `IsChecked`). */
+    readonly checked?: boolean;
+    readonly defaultChecked?: boolean;
+    /** Once per change of `checked` caused by the control (MAUI `CheckedChanged`); never for pushed values. */
+    readonly onCheckedChange?: (checked: boolean) => void;
+    /** Controlled third state (MAUI `IsIndeterminate`); a tap clears it. */
+    readonly indeterminate?: boolean;
+    readonly defaultIndeterminate?: boolean;
+    readonly onIndeterminateChange?: (indeterminate: boolean) => void;
+    /** Label at the end side; also the accessibility name. */
+    readonly text?: string | null;
+    /** After every user toggle, with the new state (MAUI `Command`). */
+    readonly onPress?: (checked: boolean) => void;
+    /** 48 px touch slot with the box at the top; false: a 20 px slot, box centred. Default true. */
+    readonly reserveTouchTarget?: boolean;
+}
+/** Imperative handle of {@link G9CheckBox}. */
+export interface G9CheckBoxHandle {
+    /** Same as a tap (MAUI `Toggle`); ignored while disabled. */
+    toggle(): void;
+}
+/**
+ * Tri-state check box (MAUI `G9CheckBox`, ADR-0028): tap toggles, indeterminate → checked, never into
+ * indeterminate. The box animates (200 ms fill/tick, 150 ms tick↔dash) by updating the SVG attribute directly
+ * (`setNativeProps`), never by re-rendering per frame; the first render does not animate.
+ */
+export declare const G9CheckBox: import("react").ForwardRefExoticComponent<G9CheckBoxProps & import("react").RefAttributes<G9CheckBoxHandle>>;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/toggle/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/toggle/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAe,KAAK,eAAe,EAA0B,MAAM,+BAA+B,CAAC;AAG1G,OAAO,EAAE,KAAK,kBAAkB,EAAyC,MAAM,iBAAiB,CAAC;AAOjG,iFAAiF;AACjF,eAAO,MAAM,iBAAiB;;;;;;;EAO5B,CAAC;AAEH,qCAAqC;AACrC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,mFAAmF;AACnF,wBAAgB,cAAc,CAAC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,GAAG,gBAAgB,CAM5F;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,CA6BhH;AAED,uDAAuD;AACvD,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD,mDAAmD;IACnD,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,2GAA2G;IAC3G,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,wEAAwE;IACxE,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IACxC,QAAQ,CAAC,qBAAqB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAC;IAClE,0DAA0D;IAC1D,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,oEAAoE;IACpE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,gGAAgG;IAChG,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CACvC;AAED,+CAA+C;AAC/C,MAAM,WAAW,gBAAgB;IAC/B,6DAA6D;IAC7D,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU,8GAwHrB,CAAC"}

package/dist/toggle/checkbox.jsx

@@ -0,0 +1,152 @@
+import "./toggle.css";
+import { G9StringKey, formatColor, withAlpha } from "@g9tm/lynxcontrols-foundation";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "@lynx-js/react";
+import { g9RowStyle, g9TextStart, useG9Control } from "../base/control.jsx";
+import { useG9Press } from "../base/press.jsx";
+import { startTimer, stopTimer } from "../base/timers.jsx";
+import { useControllableState } from "../base/use-controllable-state.jsx";
+import { useG9Strings, useG9Theme } from "../provider/hooks.jsx";
+import { checkMarkPath, fillAmount, nextOnTap, targetMorph, targetProgress } from "./checkbox-math.jsx";
+const g9CheckBoxMetrics = Object.freeze({
+    box: 20,
+    corner: 6,
+    stroke: 2,
+    touchTarget: 48,
+    progressMs: 200,
+    morphMs: 150
+});
+function checkBoxColors(palette, disabled) {
+    return {
+        outline: palette.Outline,
+        fill: disabled ? palette.TextDisabled : palette.Primary,
+        mark: disabled ? palette.Surface : palette.OnPrimary
+    };
+}
+function checkBoxSvg(progress, morph, colors, disabled) {
+    const m = g9CheckBoxMetrics;
+    const fill = fillAmount(progress);
+    const outlineAlpha = (1 - fill) * (disabled ? 0.55 : 1);
+    const scale = 0.78 + 0.22 * fill;
+    const side = m.box * scale;
+    const offset = (m.box - side) / 2;
+    const r = (n)=>Math.round(1000 * n) / 1000;
+    const parts = [
+        `<svg xmlns="http://www.w3.org/2000/svg" width="${m.box}" height="${m.box}" viewBox="0 0 ${m.box} ${m.box}">`
+    ];
+    if (outlineAlpha > 0.001) parts.push(`<rect x="1" y="1" width="${m.box - 2}" height="${m.box - 2}" rx="${m.corner - 1}" fill="none" stroke="${formatColor(withAlpha(colors.outline, outlineAlpha))}" stroke-width="${m.stroke}"/>`);
+    if (fill > 0.001) parts.push(`<rect x="${r(offset)}" y="${r(offset)}" width="${r(side)}" height="${r(side)}" rx="${r(m.corner * scale)}" fill="${formatColor(withAlpha(colors.fill, fill))}"/>`);
+    const path = checkMarkPath(progress, morph, m.box);
+    if (path) parts.push(`<path d="${path}" fill="none" stroke="${formatColor(colors.mark)}" stroke-width="${m.stroke}" stroke-linecap="round" stroke-linejoin="round"/>`);
+    parts.push('</svg>');
+    return parts.join('');
+}
+const checkbox_G9CheckBox = forwardRef(function(props, ref) {
+    var _props_defaultChecked, _props_defaultIndeterminate, _props_accessibilityLabel, _ref, _props_accessibilityLabel1;
+    const control = useG9Control(props, 'g9-checkbox');
+    const palette = useG9Theme().palette;
+    const strings = useG9Strings();
+    const [checked, setChecked] = useControllableState({
+        value: props.checked,
+        defaultValue: null != (_props_defaultChecked = props.defaultChecked) ? _props_defaultChecked : false,
+        onChange: props.onCheckedChange,
+        name: 'G9CheckBox.checked'
+    });
+    const [indeterminate, setIndeterminate] = useControllableState({
+        value: props.indeterminate,
+        defaultValue: null != (_props_defaultIndeterminate = props.defaultIndeterminate) ? _props_defaultIndeterminate : false,
+        onChange: props.onIndeterminateChange,
+        name: 'G9CheckBox.indeterminate'
+    });
+    const colors = checkBoxColors(palette, control.disabled);
+    const progressTarget = targetProgress(checked, indeterminate);
+    const morphTarget = targetMorph(indeterminate);
+    const svgRef = useRef(null);
+    const drawn = useRef({
+        progress: progressTarget,
+        morph: morphTarget
+    });
+    const frame = useRef(null);
+    const latest = useRef({
+        colors,
+        disabled: control.disabled
+    });
+    latest.current = {
+        colors,
+        disabled: control.disabled
+    };
+    useEffect(()=>{
+        const from = {
+            ...drawn.current
+        };
+        if (from.progress === progressTarget && from.morph === morphTarget) return;
+        const morphFrom = from.progress < 0.01 ? morphTarget : from.morph;
+        const morphTo = 0 === progressTarget ? morphFrom : morphTarget;
+        const started = Date.now();
+        const step = ()=>{
+            const t = Date.now() - started;
+            const p = Math.min(1, t / g9CheckBoxMetrics.progressMs);
+            const q = Math.min(1, t / g9CheckBoxMetrics.morphMs);
+            const easeOut = 1 - (1 - p) ** 3;
+            const easeInOut = q < 0.5 ? 4 * q * q * q : 1 - (-2 * q + 2) ** 3 / 2;
+            drawn.current = {
+                progress: from.progress + (progressTarget - from.progress) * easeOut,
+                morph: morphFrom + (morphTo - morphFrom) * easeInOut
+            };
+            try {
+                var _svgRef_current;
+                null == (_svgRef_current = svgRef.current) || _svgRef_current.setNativeProps({
+                    content: checkBoxSvg(drawn.current.progress, drawn.current.morph, latest.current.colors, latest.current.disabled)
+                }).exec();
+            } catch  {}
+            frame.current = p < 1 || q < 1 ? startTimer(step, 16) : null;
+        };
+        if (null !== frame.current) stopTimer(frame.current);
+        step();
+        return ()=>{
+            if (null !== frame.current) stopTimer(frame.current);
+            frame.current = null;
+        };
+    }, [
+        progressTarget,
+        morphTarget
+    ]);
+    const toggle = ()=>{
+        var _props_onPress;
+        if (control.disabled) return;
+        const next = nextOnTap(checked, indeterminate);
+        setIndeterminate(next.indeterminate);
+        setChecked(next.checked);
+        null == (_props_onPress = props.onPress) || _props_onPress.call(props, next.checked);
+    };
+    useImperativeHandle(ref, ()=>({
+            toggle
+        }));
+    const press = useG9Press(toggle, {
+        blocked: control.disabled,
+        source: 'G9CheckBox',
+        guardMs: 0
+    });
+    const reserve = false !== props.reserveTouchTarget;
+    const text1 = props.text && '' !== props.text.trim() ? props.text : null;
+    const state = indeterminate ? strings.get(G9StringKey.PartiallyChecked) : checked ? strings.get(G9StringKey.Checked) : strings.get(G9StringKey.NotChecked);
+    return <view className={`${control.className}${text1 ? ' g9-checkbox--labelled' : ''}`} {...control.idProps} style={g9RowStyle(control.direction)} accessibility-element={true} accessibility-traits="button" accessibility-value={state} {...(null != (_props_accessibilityLabel = props.accessibilityLabel) ? _props_accessibilityLabel : text1) ? {
+        'accessibility-label': null != (_ref = null != (_props_accessibilityLabel1 = props.accessibilityLabel) ? _props_accessibilityLabel1 : text1) ? _ref : ''
+    } : {}} bindtap={press}>
+      <view className={`g9-checkbox__slot${reserve ? ' g9-checkbox__slot--reserve' : ''}`} style={{
+        width: `${reserve ? g9CheckBoxMetrics.touchTarget : g9CheckBoxMetrics.box}px`
+    }}>
+        <svg ref={svgRef} className="g9-checkbox__box" content={checkBoxSvg(drawn.current.progress, drawn.current.morph, colors, control.disabled)}/>
+      </view>
+      {text1 ? <text className="g9-checkbox__text" style={{
+        ...g9TextStart(control.direction),
+        color: control.disabled ? 'var(--g9-text-disabled)' : 'var(--g9-text-primary)',
+        paddingTop: reserve ? '12px' : '0px',
+        paddingBottom: reserve ? '12px' : '0px'
+    }}>
+          {text1}
+        </text> : null}
+    </view>;
+});
+export { checkBoxColors, checkBoxSvg, checkbox_G9CheckBox as G9CheckBox, g9CheckBoxMetrics };
+
+//# sourceMappingURL=checkbox.jsx.map

package/dist/toggle/checkbox.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle/checkbox.jsx","sources":["../../src/toggle/checkbox.tsx"],"sourcesContent":["import './toggle.css';\nimport { formatColor, type G9PaletteValues, G9StringKey, withAlpha } from '@g9tm/lynxcontrols-foundation';\nimport { forwardRef, type ReactNode, useEffect, useImperativeHandle, useRef } from '@lynx-js/react';\nimport type { NodesRef } from '@lynx-js/types';\nimport { type G9ControlBaseProps, g9RowStyle, g9TextStart, useG9Control } from '../base/control';\nimport { useG9Press } from '../base/press';\nimport { type G9TimerHandle, startTimer, stopTimer } from '../base/timers';\nimport { useControllableState } from '../base/use-controllable-state';\nimport { useG9Strings, useG9Theme } from '../provider/hooks';\nimport { checkMarkPath, fillAmount, nextOnTap, targetMorph, targetProgress } from './checkbox-math';\n\n/** Box size, corner and stroke (MAUI `G9Metrics` check-box values, ADR-0028). */\nexport const g9CheckBoxMetrics = Object.freeze({\n  box: 20,\n  corner: 6,\n  stroke: 2,\n  touchTarget: 48,\n  progressMs: 200,\n  morphMs: 150,\n});\n\n/** Colours the box is drawn with. */\nexport interface G9CheckBoxColors {\n  readonly outline: string;\n  readonly fill: string;\n  readonly mark: string;\n}\n\n/** The palette colours of a check box (outline, fill, mark; disabled variants). */\nexport function checkBoxColors(palette: G9PaletteValues, disabled: boolean): G9CheckBoxColors {\n  return {\n    outline: palette.Outline,\n    fill: disabled ? palette.TextDisabled : palette.Primary,\n    mark: disabled ? palette.Surface : palette.OnPrimary,\n  };\n}\n\n/**\n * The SVG of the box at an animation state (MAUI `G9CheckBoxDrawable`): the outline fades with `1 − fill`\n * (× 0.55 disabled), the fill grows from 78 % to 100 % with its alpha, the mark (tick → dash by `morph`) is trimmed by\n * the golden phase functions. Never mirrored in RTL.\n */\nexport function checkBoxSvg(progress: number, morph: number, colors: G9CheckBoxColors, disabled: boolean): string {\n  const m = g9CheckBoxMetrics;\n  const fill = fillAmount(progress);\n  const outlineAlpha = (1 - fill) * (disabled ? 0.55 : 1);\n  const scale = 0.78 + 0.22 * fill;\n  const side = m.box * scale;\n  const offset = (m.box - side) / 2;\n  const r = (n: number) => Math.round(n * 1000) / 1000;\n  const parts = [\n    `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${m.box}\" height=\"${m.box}\" viewBox=\"0 0 ${m.box} ${m.box}\">`,\n  ];\n  if (outlineAlpha > 0.001) {\n    parts.push(\n      `<rect x=\"1\" y=\"1\" width=\"${m.box - 2}\" height=\"${m.box - 2}\" rx=\"${m.corner - 1}\" fill=\"none\" stroke=\"${formatColor(withAlpha(colors.outline, outlineAlpha))}\" stroke-width=\"${m.stroke}\"/>`,\n    );\n  }\n  if (fill > 0.001) {\n    parts.push(\n      `<rect x=\"${r(offset)}\" y=\"${r(offset)}\" width=\"${r(side)}\" height=\"${r(side)}\" rx=\"${r(m.corner * scale)}\" fill=\"${formatColor(withAlpha(colors.fill, fill))}\"/>`,\n    );\n  }\n  const path = checkMarkPath(progress, morph, m.box);\n  if (path) {\n    parts.push(\n      `<path d=\"${path}\" fill=\"none\" stroke=\"${formatColor(colors.mark)}\" stroke-width=\"${m.stroke}\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>`,\n    );\n  }\n  parts.push('</svg>');\n  return parts.join('');\n}\n\n/** Props of {@link G9CheckBox} (MAUI `G9CheckBox`). */\nexport interface G9CheckBoxProps extends G9ControlBaseProps {\n  /** Controlled checked state (MAUI `IsChecked`). */\n  readonly checked?: boolean;\n  readonly defaultChecked?: boolean;\n  /** Once per change of `checked` caused by the control (MAUI `CheckedChanged`); never for pushed values. */\n  readonly onCheckedChange?: (checked: boolean) => void;\n  /** Controlled third state (MAUI `IsIndeterminate`); a tap clears it. */\n  readonly indeterminate?: boolean;\n  readonly defaultIndeterminate?: boolean;\n  readonly onIndeterminateChange?: (indeterminate: boolean) => void;\n  /** Label at the end side; also the accessibility name. */\n  readonly text?: string | null;\n  /** After every user toggle, with the new state (MAUI `Command`). */\n  readonly onPress?: (checked: boolean) => void;\n  /** 48 px touch slot with the box at the top; false: a 20 px slot, box centred. Default true. */\n  readonly reserveTouchTarget?: boolean;\n}\n\n/** Imperative handle of {@link G9CheckBox}. */\nexport interface G9CheckBoxHandle {\n  /** Same as a tap (MAUI `Toggle`); ignored while disabled. */\n  toggle(): void;\n}\n\n/**\n * Tri-state check box (MAUI `G9CheckBox`, ADR-0028): tap toggles, indeterminate → checked, never into\n * indeterminate. The box animates (200 ms fill/tick, 150 ms tick↔dash) by updating the SVG attribute directly\n * (`setNativeProps`), never by re-rendering per frame; the first render does not animate.\n */\nexport const G9CheckBox = forwardRef<G9CheckBoxHandle, G9CheckBoxProps>(function G9CheckBox(props, ref): ReactNode {\n  const control = useG9Control(props, 'g9-checkbox');\n  const palette = useG9Theme().palette;\n  const strings = useG9Strings();\n  const [checked, setChecked] = useControllableState<boolean>({\n    value: props.checked,\n    defaultValue: props.defaultChecked ?? false,\n    onChange: props.onCheckedChange,\n    name: 'G9CheckBox.checked',\n  });\n  const [indeterminate, setIndeterminate] = useControllableState<boolean>({\n    value: props.indeterminate,\n    defaultValue: props.defaultIndeterminate ?? false,\n    onChange: props.onIndeterminateChange,\n    name: 'G9CheckBox.indeterminate',\n  });\n  const colors = checkBoxColors(palette, control.disabled);\n  const progressTarget = targetProgress(checked, indeterminate);\n  const morphTarget = targetMorph(indeterminate);\n\n  // Animation state lives outside React: the drawn progress/morph and the frame timer.\n  const svgRef = useRef<NodesRef | null>(null);\n  const drawn = useRef({ progress: progressTarget, morph: morphTarget });\n  const frame = useRef<G9TimerHandle | null>(null);\n  const latest = useRef({ colors, disabled: control.disabled });\n  latest.current = { colors, disabled: control.disabled };\n  useEffect(() => {\n    const from = { ...drawn.current };\n    if (from.progress === progressTarget && from.morph === morphTarget) return;\n    // Unchecked → indeterminate draws the dash directly; a fade-out keeps the current mark shape.\n    const morphFrom = from.progress < 0.01 ? morphTarget : from.morph;\n    const morphTo = progressTarget === 0 ? morphFrom : morphTarget;\n    const started = Date.now();\n    const step = () => {\n      const t = Date.now() - started;\n      const p = Math.min(1, t / g9CheckBoxMetrics.progressMs);\n      const q = Math.min(1, t / g9CheckBoxMetrics.morphMs);\n      const easeOut = 1 - (1 - p) ** 3;\n      const easeInOut = q < 0.5 ? 4 * q * q * q : 1 - (-2 * q + 2) ** 3 / 2;\n      drawn.current = {\n        progress: from.progress + (progressTarget - from.progress) * easeOut,\n        morph: morphFrom + (morphTo - morphFrom) * easeInOut,\n      };\n      try {\n        svgRef.current\n          ?.setNativeProps({\n            content: checkBoxSvg(\n              drawn.current.progress,\n              drawn.current.morph,\n              latest.current.colors,\n              latest.current.disabled,\n            ),\n          })\n          .exec();\n      } catch {\n        // Unmounted between frames.\n      }\n      frame.current = p < 1 || q < 1 ? startTimer(step, 16) : null;\n    };\n    if (frame.current !== null) stopTimer(frame.current);\n    step();\n    return () => {\n      if (frame.current !== null) stopTimer(frame.current);\n      frame.current = null;\n    };\n  }, [progressTarget, morphTarget]);\n\n  const toggle = () => {\n    if (control.disabled) return;\n    const next = nextOnTap(checked, indeterminate);\n    setIndeterminate(next.indeterminate);\n    setChecked(next.checked);\n    props.onPress?.(next.checked);\n  };\n  useImperativeHandle(ref, () => ({ toggle }));\n  const press = useG9Press(toggle, { blocked: control.disabled, source: 'G9CheckBox', guardMs: 0 });\n\n  const reserve = props.reserveTouchTarget !== false;\n  const text = props.text && props.text.trim() !== '' ? props.text : null;\n  const state = indeterminate\n    ? strings.get(G9StringKey.PartiallyChecked)\n    : checked\n      ? strings.get(G9StringKey.Checked)\n      : strings.get(G9StringKey.NotChecked);\n  return (\n    <view\n      className={`${control.className}${text ? ' g9-checkbox--labelled' : ''}`}\n      {...control.idProps}\n      style={g9RowStyle(control.direction)}\n      accessibility-element={true}\n      accessibility-traits=\"button\"\n      accessibility-value={state}\n      {...((props.accessibilityLabel ?? text) ? { 'accessibility-label': props.accessibilityLabel ?? text ?? '' } : {})}\n      bindtap={press}\n    >\n      <view\n        className={`g9-checkbox__slot${reserve ? ' g9-checkbox__slot--reserve' : ''}`}\n        style={{ width: `${reserve ? g9CheckBoxMetrics.touchTarget : g9CheckBoxMetrics.box}px` }}\n      >\n        <svg\n          ref={svgRef}\n          className=\"g9-checkbox__box\"\n          content={checkBoxSvg(drawn.current.progress, drawn.current.morph, colors, control.disabled)}\n        />\n      </view>\n      {text ? (\n        <text\n          className=\"g9-checkbox__text\"\n          style={{\n            ...g9TextStart(control.direction),\n            color: control.disabled ? 'var(--g9-text-disabled)' : 'var(--g9-text-primary)',\n            paddingTop: reserve ? '12px' : '0px',\n            paddingBottom: reserve ? '12px' : '0px',\n          }}\n        >\n          {text}\n        </text>\n      ) : null}\n    </view>\n  );\n});\n"],"names":["g9CheckBoxMetrics","Object","checkBoxColors","palette","disabled","checkBoxSvg","progress","morph","colors","m","fill","fillAmount","outlineAlpha","scale","side","offset","r","n","Math","parts","formatColor","withAlpha","path","checkMarkPath","G9CheckBox","forwardRef","props","ref","_props_defaultChecked","_props_defaultIndeterminate","_props_accessibilityLabel","_ref","control","useG9Control","useG9Theme","strings","useG9Strings","checked","setChecked","useControllableState","indeterminate","setIndeterminate","progressTarget","targetProgress","morphTarget","targetMorph","svgRef","useRef","drawn","frame","latest","useEffect","from","morphFrom","morphTo","started","Date","step","t","p","q","easeOut","easeInOut","_svgRef_current","startTimer","stopTimer","toggle","next","nextOnTap","useImperativeHandle","press","useG9Press","reserve","text1","state","G9StringKey","view","g9RowStyle","svg","text","g9TextStart"],"mappings":"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"}

package/dist/toggle/chip-group.d.ts

@@ -0,0 +1,50 @@
+import './toggle.css';
+import { type G9ChipGroupLayoutMode, type G9ChipGroupSelectionMode } from '@g9tm/lynxcontrols-foundation';
+import type { ReactNode } from '@lynx-js/react';
+import { type G9ControlBaseProps } from '../base/control.js';
+import { type G9SelectionItem } from '../base/selection-item.js';
+/** Props of {@link G9ChipGroup} (MAUI `G9ChipGroup`). */
+export interface G9ChipGroupProps extends G9ControlBaseProps {
+    /** One chip per item (MAUI `ItemsSource`). Selection is by `selectionKey(item)`, so replaced objects keep it. */
+    readonly items: ReadonlyArray<G9SelectionItem>;
+    /** Default `'multiSelection'`. */
+    readonly selectionMode?: G9ChipGroupSelectionMode;
+    /** Multi mode: controlled selected keys (MAUI `SelectedItems`). */
+    readonly selectedKeys?: ReadonlyArray<string>;
+    readonly defaultSelectedKeys?: ReadonlyArray<string>;
+    readonly onSelectedKeysChange?: (keys: ReadonlyArray<string>) => void;
+    /** Single mode: controlled selected key (MAUI `SelectedItem`); `null` = none. */
+    readonly selectedKey?: string | null;
+    readonly defaultSelectedKey?: string | null;
+    readonly onSelectedKeyChange?: (key: string | null, item: G9SelectionItem | null) => void;
+    /** Single mode: tapping the selected chip clears the selection. Default false. */
+    readonly allowNullSelection?: boolean;
+    /** Gap between chips. Default 6. */
+    readonly itemSpacing?: number;
+    /** Default 36. */
+    readonly chipHeight?: number;
+    /** Leading icon size. Default 16. */
+    readonly iconSize?: number;
+    /** Group-wide selected fill (an item's `selectedColor` wins). Default primary. */
+    readonly selectedBackground?: string | null;
+    /** Group-wide selected text colour. Default on-primary. */
+    readonly selectedTextColor?: string | null;
+    /** `'wrap'` (default) or one horizontally scrolling line. */
+    readonly layoutMode?: G9ChipGroupLayoutMode;
+    /** Default 9 (`G9LayoutMetrics.ControlCornerRadius`). */
+    readonly chipCornerRadius?: number;
+    /** Check mark at the trailing edge of selected chips. Default true. */
+    readonly showSelectionCheckmark?: boolean;
+    /**
+     * After every user tap (MAUI `SelectionChanged`): single mode `[item]` or `[]` (also when the tap changed nothing),
+     * multi mode the selected items.
+     */
+    readonly onSelectionChange?: (items: ReadonlyArray<G9SelectionItem>) => void;
+}
+/**
+ * Chip group (MAUI `G9ChipGroup`): single or multi selection by item identity, wrap or single-line scroll, colour
+ * transition (140 ms) and check mark (120 ms) in CSS, press pulse 0.94 on the main thread. Disabled items are dimmed
+ * and ignore taps.
+ */
+export declare function G9ChipGroup(props: G9ChipGroupProps): ReactNode;
+//# sourceMappingURL=chip-group.d.ts.map

package/dist/toggle/chip-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-group.d.ts","sourceRoot":"","sources":["../../src/toggle/chip-group.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,EAIL,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAI9B,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,KAAK,kBAAkB,EAAkD,MAAM,iBAAiB,CAAC;AAE1G,OAAO,EAAE,KAAK,eAAe,EAAgB,MAAM,wBAAwB,CAAC;AAK5E,yDAAyD;AACzD,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,iHAAiH;IACjH,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC/C,kCAAkC;IAClC,QAAQ,CAAC,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAClD,mEAAmE;IACnE,QAAQ,CAAC,YAAY,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC9C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACrD,QAAQ,CAAC,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACtE,iFAAiF;IACjF,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1F,kFAAkF;IAClF,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IACtC,oCAAoC;IACpC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB;IAClB,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,qCAAqC;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,kFAAkF;IAClF,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5C,2DAA2D;IAC3D,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,6DAA6D;IAC7D,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC;IAC5C,yDAAyD;IACzD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACnC,uEAAuE;IACvE,QAAQ,CAAC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;CAC9E;AAID;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAyF9D"}

package/dist/toggle/chip-group.jsx

@@ -0,0 +1,107 @@
+import "./toggle.css";
+import { G9Metrics, G9StringKey, buildSolidOrGradient, fillToCss, formatColor, tryParseColor } from "@g9tm/lynxcontrols-foundation";
+import { g9ChildId, g9IdProps, g9RowStyle, useG9Control } from "../base/control.jsx";
+import { useG9Press } from "../base/press.jsx";
+import { selectionKey } from "../base/selection-item.jsx";
+import { useControllableState } from "../base/use-controllable-state.jsx";
+import { G9IconSlot } from "../icon/slot.jsx";
+import { useG9Settings, useG9Strings, useG9Theme } from "../provider/hooks.jsx";
+const EMPTY = [];
+function G9ChipGroup(props) {
+    var _props_defaultSelectedKeys, _props_defaultSelectedKey, _props_chipHeight, _props_itemSpacing, _props_iconSize, _props_chipCornerRadius;
+    const control = useG9Control(props, 'g9-chip-group');
+    const palette = useG9Theme().palette;
+    const glyphs = useG9Settings().glyphs;
+    const strings = useG9Strings();
+    const single = 'singleSelection' === props.selectionMode;
+    const [keys, setKeys] = useControllableState({
+        value: props.selectedKeys,
+        defaultValue: null != (_props_defaultSelectedKeys = props.defaultSelectedKeys) ? _props_defaultSelectedKeys : EMPTY,
+        onChange: props.onSelectedKeysChange,
+        name: 'G9ChipGroup.selectedKeys'
+    });
+    const [key, setKey] = useControllableState({
+        value: props.selectedKey,
+        defaultValue: null != (_props_defaultSelectedKey = props.defaultSelectedKey) ? _props_defaultSelectedKey : null,
+        onChange: props.onSelectedKeyChange,
+        name: 'G9ChipGroup.selectedKey'
+    });
+    const isSelected = (item)=>single ? key === selectionKey(item) : keys.includes(selectionKey(item));
+    const tap = (item)=>{
+        var _props_onSelectionChange;
+        if (control.disabled || false === item.isEnabled) return;
+        const k = selectionKey(item);
+        if (single) {
+            var _props_onSelectionChange1;
+            const next = key === k ? props.allowNullSelection ? null : k : k;
+            setKey(next, null === next ? null : item);
+            null == (_props_onSelectionChange1 = props.onSelectionChange) || _props_onSelectionChange1.call(props, null === next ? [] : [
+                item
+            ]);
+            return;
+        }
+        const next = keys.includes(k) ? keys.filter((x)=>x !== k) : [
+            ...keys,
+            k
+        ];
+        setKeys(next);
+        null == (_props_onSelectionChange = props.onSelectionChange) || _props_onSelectionChange.call(props, props.items.filter((i)=>next.includes(selectionKey(i))));
+    };
+    const height = null != (_props_chipHeight = props.chipHeight) ? _props_chipHeight : G9Metrics.ChipHeight;
+    const spacing = null != (_props_itemSpacing = props.itemSpacing) ? _props_itemSpacing : G9Metrics.ChipSpacing;
+    const iconSize = null != (_props_iconSize = props.iconSize) ? _props_iconSize : G9Metrics.ChipIconSize;
+    const radius = null != (_props_chipCornerRadius = props.chipCornerRadius) ? _props_chipCornerRadius : 9;
+    const checkmark = false !== props.showSelectionCheckmark;
+    const chips = props.items.map((item)=>{
+        var _ref, _item_selectedColor, _ref1, _item_selectedTextColor;
+        const selected = isSelected(item);
+        const bg = null != (_ref = null != (_item_selectedColor = item.selectedColor) ? _item_selectedColor : props.selectedBackground) ? _ref : palette.Primary;
+        const fg = null != (_ref1 = null != (_item_selectedTextColor = item.selectedTextColor) ? _item_selectedTextColor : props.selectedTextColor) ? _ref1 : palette.OnPrimary;
+        const parsed = tryParseColor(bg);
+        const background = selected ? parsed ? fillToCss(buildSolidOrGradient(parsed, true)) : bg : palette.Surface;
+        const color = selected ? fg : palette.TextSecondary;
+        return <Chip key={selectionKey(item)} direction={control.direction} item={item} selected={selected} background={background} stroke={selected ? parsed ? formatColor(parsed) : bg : palette.OutlineVariant} color={color} height={height} spacing={spacing} iconSize={iconSize} radius={radius} checkmark={checkmark} checkIcon={glyphs.check} groupDisabled={control.disabled} selectedLabel={strings.get(G9StringKey.Selected)} onTap={tap} id={g9ChildId(props.id, selectionKey(item))}/>;
+    });
+    const scroll = 'singleLineScroll' === props.layoutMode;
+    return scroll ? <scroll-view className={`${control.className} g9-chip-group--scroll`} {...control.idProps} scroll-orientation="horizontal">
+      <view className="g9-chip-group__line" style={g9RowStyle(control.direction)}>
+        {chips}
+      </view>
+    </scroll-view> : <view className={`${control.className} g9-chip-group--wrap`} {...control.idProps} style={g9RowStyle(control.direction)}>
+      {chips}
+    </view>;
+}
+function Chip(props) {
+    const { item } = props;
+    const disabled = props.groupDisabled || false === item.isEnabled;
+    const press = useG9Press(()=>props.onTap(item), {
+        blocked: disabled,
+        source: 'G9ChipGroup',
+        guardMs: 0
+    });
+    return <view className={`g9-chip${props.selected ? ' g9-chip--selected' : ''}${false === item.isEnabled ? ' g9-chip--disabled' : ''}`} {...g9IdProps(props.id)} style={{
+        ...g9RowStyle(props.direction),
+        height: `${props.height}px`,
+        minHeight: `${props.height}px`,
+        ['rtl' === props.direction ? 'marginLeft' : 'marginRight']: `${props.spacing}px`,
+        marginBottom: `${props.spacing}px`,
+        borderRadius: `${props.radius}px`,
+        background: props.background,
+        borderColor: props.stroke
+    }} accessibility-element={true} accessibility-traits="button" accessibility-label={item.text} {...props.selected ? {
+        'accessibility-value': props.selectedLabel
+    } : {}} bindtap={press}>
+      <G9IconSlot emoji={item.emoji} icon={item.icon} imagePath={item.iconPath} image={item.iconImage} size={props.iconSize} color={props.color}/>
+      <text className="g9-chip__text" style={{
+        color: props.color
+    }}>
+        {item.text}
+      </text>
+      {props.checkmark ? <view className={`g9-chip__check${props.selected ? ' g9-chip__check--on' : ''}`}>
+          <G9IconSlot icon={props.checkIcon} size={G9Metrics.ChipIconSize} color={props.color}/>
+        </view> : null}
+    </view>;
+}
+export { G9ChipGroup };
+
+//# sourceMappingURL=chip-group.jsx.map

package/dist/toggle/chip-group.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle/chip-group.jsx","sources":["../../src/toggle/chip-group.tsx"],"sourcesContent":["import './toggle.css';\nimport {\n  buildSolidOrGradient,\n  fillToCss,\n  formatColor,\n  type G9ChipGroupLayoutMode,\n  type G9ChipGroupSelectionMode,\n  G9Metrics,\n  G9StringKey,\n  tryParseColor,\n} from '@g9tm/lynxcontrols-foundation';\nimport type { ReactNode } from '@lynx-js/react';\nimport { type G9ControlBaseProps, g9ChildId, g9IdProps, g9RowStyle, useG9Control } from '../base/control';\nimport { useG9Press } from '../base/press';\nimport { type G9SelectionItem, selectionKey } from '../base/selection-item';\nimport { useControllableState } from '../base/use-controllable-state';\nimport { G9IconSlot } from '../icon/slot';\nimport { useG9Settings, useG9Strings, useG9Theme } from '../provider/hooks';\n\n/** Props of {@link G9ChipGroup} (MAUI `G9ChipGroup`). */\nexport interface G9ChipGroupProps extends G9ControlBaseProps {\n  /** One chip per item (MAUI `ItemsSource`). Selection is by `selectionKey(item)`, so replaced objects keep it. */\n  readonly items: ReadonlyArray<G9SelectionItem>;\n  /** Default `'multiSelection'`. */\n  readonly selectionMode?: G9ChipGroupSelectionMode;\n  /** Multi mode: controlled selected keys (MAUI `SelectedItems`). */\n  readonly selectedKeys?: ReadonlyArray<string>;\n  readonly defaultSelectedKeys?: ReadonlyArray<string>;\n  readonly onSelectedKeysChange?: (keys: ReadonlyArray<string>) => void;\n  /** Single mode: controlled selected key (MAUI `SelectedItem`); `null` = none. */\n  readonly selectedKey?: string | null;\n  readonly defaultSelectedKey?: string | null;\n  readonly onSelectedKeyChange?: (key: string | null, item: G9SelectionItem | null) => void;\n  /** Single mode: tapping the selected chip clears the selection. Default false. */\n  readonly allowNullSelection?: boolean;\n  /** Gap between chips. Default 6. */\n  readonly itemSpacing?: number;\n  /** Default 36. */\n  readonly chipHeight?: number;\n  /** Leading icon size. Default 16. */\n  readonly iconSize?: number;\n  /** Group-wide selected fill (an item's `selectedColor` wins). Default primary. */\n  readonly selectedBackground?: string | null;\n  /** Group-wide selected text colour. Default on-primary. */\n  readonly selectedTextColor?: string | null;\n  /** `'wrap'` (default) or one horizontally scrolling line. */\n  readonly layoutMode?: G9ChipGroupLayoutMode;\n  /** Default 9 (`G9LayoutMetrics.ControlCornerRadius`). */\n  readonly chipCornerRadius?: number;\n  /** Check mark at the trailing edge of selected chips. Default true. */\n  readonly showSelectionCheckmark?: boolean;\n  /**\n   * After every user tap (MAUI `SelectionChanged`): single mode `[item]` or `[]` (also when the tap changed nothing),\n   * multi mode the selected items.\n   */\n  readonly onSelectionChange?: (items: ReadonlyArray<G9SelectionItem>) => void;\n}\n\nconst EMPTY: ReadonlyArray<string> = [];\n\n/**\n * Chip group (MAUI `G9ChipGroup`): single or multi selection by item identity, wrap or single-line scroll, colour\n * transition (140 ms) and check mark (120 ms) in CSS, press pulse 0.94 on the main thread. Disabled items are dimmed\n * and ignore taps.\n */\nexport function G9ChipGroup(props: G9ChipGroupProps): ReactNode {\n  const control = useG9Control(props, 'g9-chip-group');\n  const palette = useG9Theme().palette;\n  const glyphs = useG9Settings().glyphs;\n  const strings = useG9Strings();\n  const single = props.selectionMode === 'singleSelection';\n  const [keys, setKeys] = useControllableState<ReadonlyArray<string>>({\n    value: props.selectedKeys,\n    defaultValue: props.defaultSelectedKeys ?? EMPTY,\n    onChange: props.onSelectedKeysChange,\n    name: 'G9ChipGroup.selectedKeys',\n  });\n  const [key, setKey] = useControllableState<string | null, [G9SelectionItem | null]>({\n    value: props.selectedKey,\n    defaultValue: props.defaultSelectedKey ?? null,\n    onChange: props.onSelectedKeyChange,\n    name: 'G9ChipGroup.selectedKey',\n  });\n  const isSelected = (item: G9SelectionItem) =>\n    single ? key === selectionKey(item) : keys.includes(selectionKey(item));\n\n  const tap = (item: G9SelectionItem) => {\n    if (control.disabled || item.isEnabled === false) return;\n    const k = selectionKey(item);\n    if (single) {\n      const next = key === k ? (props.allowNullSelection ? null : k) : k;\n      setKey(next, next === null ? null : item);\n      props.onSelectionChange?.(next === null ? [] : [item]);\n      return;\n    }\n    const next = keys.includes(k) ? keys.filter((x) => x !== k) : [...keys, k];\n    setKeys(next);\n    props.onSelectionChange?.(props.items.filter((i) => next.includes(selectionKey(i))));\n  };\n\n  const height = props.chipHeight ?? G9Metrics.ChipHeight;\n  const spacing = props.itemSpacing ?? G9Metrics.ChipSpacing;\n  const iconSize = props.iconSize ?? G9Metrics.ChipIconSize;\n  const radius = props.chipCornerRadius ?? 9;\n  const checkmark = props.showSelectionCheckmark !== false;\n  const chips = props.items.map((item) => {\n    const selected = isSelected(item);\n    const bg = item.selectedColor ?? props.selectedBackground ?? palette.Primary;\n    const fg = item.selectedTextColor ?? props.selectedTextColor ?? palette.OnPrimary;\n    const parsed = tryParseColor(bg);\n    const background = selected ? (parsed ? fillToCss(buildSolidOrGradient(parsed, true)) : bg) : palette.Surface;\n    const color = selected ? fg : palette.TextSecondary;\n    return (\n      <Chip\n        key={selectionKey(item)}\n        direction={control.direction}\n        item={item}\n        selected={selected}\n        background={background}\n        stroke={selected ? (parsed ? formatColor(parsed) : bg) : palette.OutlineVariant}\n        color={color}\n        height={height}\n        spacing={spacing}\n        iconSize={iconSize}\n        radius={radius}\n        checkmark={checkmark}\n        checkIcon={glyphs.check}\n        groupDisabled={control.disabled}\n        selectedLabel={strings.get(G9StringKey.Selected)}\n        onTap={tap}\n        id={g9ChildId(props.id, selectionKey(item))}\n      />\n    );\n  });\n  const scroll = props.layoutMode === 'singleLineScroll';\n  return scroll ? (\n    <scroll-view\n      className={`${control.className} g9-chip-group--scroll`}\n      {...control.idProps}\n      scroll-orientation=\"horizontal\"\n    >\n      <view className=\"g9-chip-group__line\" style={g9RowStyle(control.direction)}>\n        {chips}\n      </view>\n    </scroll-view>\n  ) : (\n    <view\n      className={`${control.className} g9-chip-group--wrap`}\n      {...control.idProps}\n      style={g9RowStyle(control.direction)}\n    >\n      {chips}\n    </view>\n  );\n}\n\ninterface ChipProps {\n  readonly item: G9SelectionItem;\n  readonly selected: boolean;\n  readonly background: string;\n  readonly stroke: string;\n  readonly color: string;\n  readonly height: number;\n  readonly spacing: number;\n  readonly iconSize: number;\n  readonly radius: number;\n  readonly checkmark: boolean;\n  readonly checkIcon: Parameters<typeof G9IconSlot>[0]['icon'];\n  readonly groupDisabled: boolean;\n  readonly selectedLabel: string;\n  readonly onTap: (item: G9SelectionItem) => void;\n  readonly direction: 'ltr' | 'rtl';\n  /** The chip's automation id (`${groupId}_${key}`). */\n  readonly id: string | undefined;\n}\n\nfunction Chip(props: ChipProps): ReactNode {\n  const { item } = props;\n  const disabled = props.groupDisabled || item.isEnabled === false;\n  const press = useG9Press(() => props.onTap(item), { blocked: disabled, source: 'G9ChipGroup', guardMs: 0 });\n  return (\n    <view\n      className={`g9-chip${props.selected ? ' g9-chip--selected' : ''}${item.isEnabled === false ? ' g9-chip--disabled' : ''}`}\n      {...g9IdProps(props.id)}\n      style={{\n        ...g9RowStyle(props.direction),\n        height: `${props.height}px`,\n        minHeight: `${props.height}px`,\n        [props.direction === 'rtl' ? 'marginLeft' : 'marginRight']: `${props.spacing}px`,\n        marginBottom: `${props.spacing}px`,\n        borderRadius: `${props.radius}px`,\n        background: props.background,\n        borderColor: props.stroke,\n      }}\n      accessibility-element={true}\n      accessibility-traits=\"button\"\n      accessibility-label={item.text}\n      {...(props.selected ? { 'accessibility-value': props.selectedLabel } : {})}\n      bindtap={press}\n    >\n      <G9IconSlot\n        emoji={item.emoji}\n        icon={item.icon}\n        imagePath={item.iconPath}\n        image={item.iconImage}\n        size={props.iconSize}\n        color={props.color}\n      />\n      <text className=\"g9-chip__text\" style={{ color: props.color }}>\n        {item.text}\n      </text>\n      {props.checkmark ? (\n        <view className={`g9-chip__check${props.selected ? ' g9-chip__check--on' : ''}`}>\n          <G9IconSlot icon={props.checkIcon} size={G9Metrics.ChipIconSize} color={props.color} />\n        </view>\n      ) : null}\n    </view>\n  );\n}\n"],"names":["EMPTY","G9ChipGroup","props","_props_defaultSelectedKeys","_props_defaultSelectedKey","_props_chipHeight","_props_itemSpacing","_props_iconSize","_props_chipCornerRadius","control","useG9Control","palette","useG9Theme","glyphs","useG9Settings","strings","useG9Strings","single","keys","setKeys","useControllableState","key","setKey","isSelected","item","selectionKey","tap","k","next","x","i","height","G9Metrics","spacing","iconSize","radius","checkmark","chips","_ref","_ref1","selected","bg","fg","parsed","tryParseColor","background","fillToCss","buildSolidOrGradient","color","Chip","formatColor","G9StringKey","g9ChildId","scroll","scroll-view","view","g9RowStyle","disabled","press","useG9Press","g9IdProps","G9IconSlot","text"],"mappings":"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"}

package/dist/toggle/index.d.ts

@@ -0,0 +1,5 @@
+export { checkBoxColors, checkBoxSvg, G9CheckBox, type G9CheckBoxColors, type G9CheckBoxHandle, type G9CheckBoxProps, g9CheckBoxMetrics, } from './checkbox.js';
+export { checkMarkPath, clamp01, fillAmount, firstArmLength, type G9CheckMarkGeometry, type G9CheckMarkTrim, g9CheckFillPhaseEnd, g9CheckGeometry, g9CheckMarkPhaseStart, g9DashGeometry, markAmount, nextOnTap, resolveCheckMarkGeometry, secondArmLength, targetMorph, targetProgress, trimCheckMark, } from './checkbox-math.js';
+export { G9ChipGroup, type G9ChipGroupProps } from './chip-group.js';
+export { G9Switch, G9SwitchGroup, type G9SwitchGroupProps, type G9SwitchHandle, type G9SwitchProps, } from './switch.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toggle/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,WAAW,EACX,UAAU,EACV,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,iBAAiB,GAClB,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,aAAa,EACb,OAAO,EACP,UAAU,EACV,cAAc,EACd,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,mBAAmB,EACnB,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,UAAU,EACV,SAAS,EACT,wBAAwB,EACxB,eAAe,EACf,WAAW,EACX,cAAc,EACd,aAAa,GACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EACL,QAAQ,EACR,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,aAAa,GACnB,MAAM,UAAU,CAAC"}

package/dist/toggle/index.jsx

@@ -0,0 +1,4 @@
+export { G9CheckBox, checkBoxColors, checkBoxSvg, g9CheckBoxMetrics } from "./checkbox.jsx";
+export { checkMarkPath, clamp01, fillAmount, firstArmLength, g9CheckFillPhaseEnd, g9CheckGeometry, g9CheckMarkPhaseStart, g9DashGeometry, markAmount, nextOnTap, resolveCheckMarkGeometry, secondArmLength, targetMorph, targetProgress, trimCheckMark } from "./checkbox-math.jsx";
+export { G9ChipGroup } from "./chip-group.jsx";
+export { G9Switch, G9SwitchGroup } from "./switch.jsx";