drawnui-react 0.1.0-preview.1

package/dist/controls/SkiaLottie.d.ts

@@ -0,0 +1,75 @@
+import type { ManagedSkottieAnimation } from "canvaskit-wasm";
+import type { DrawingContext } from "../core/SkiaControl";
+import { type Color } from "../core/Types";
+import { AnimatedFramesRenderer } from "./AnimatedFramesRenderer";
+/**
+ * Mirrors DrawnUi SkiaLottie on CanvasKit Skottie: `Source` (URL / app path of the Lottie JSON), `AutoPlay`, `Repeat`,
+ * `SpeedRatio`, `DefaultFrame` / `DefaultFrameWhenOn` + `IsOn` (animated toggles), `StopAtCurrentFrame`,
+ * `ColorTint` / `Colors` (replace the animation colors in the JSON like C# ApplyTint), `GoToStart` / `GoToEnd`.
+ * Requires the CanvasKit "full" build (Skottie module).
+ */
+export declare class SkiaLottie extends AnimatedFramesRenderer {
+    /** JSON text per source, so the same file is fetched once (C# CachedAnimations). */
+    static readonly CachedAnimations: Map<string, string>;
+    private static readonly inFlight;
+    /** Stop() / Finished leave the animation where it is instead of seeking to DefaultFrame; Start() resumes from there. */
+    StopAtCurrentFrame: boolean;
+    /** Changing IsOn while stopped seeks to the matching default frame. */
+    ApplyIsOnWhenNotPlaying: boolean;
+    /** Hook to modify the JSON before it is parsed (C# ProcessJson). */
+    ProcessJson?: (json: string) => string;
+    Success?: (sender: SkiaLottie, source: string) => void;
+    Error?: (sender: SkiaLottie, error: Error) => void;
+    private source;
+    private isOn;
+    private defaultFrameWhenOn;
+    private colorTint;
+    private colors;
+    private loadGeneration;
+    private needSeek;
+    private inPoint;
+    private outPoint;
+    /** Current Skottie animation. */
+    Animation?: ManagedSkottieAnimation;
+    constructor();
+    get Source(): string;
+    set Source(v: string);
+    /** Toggle state: when stopped shows DefaultFrameWhenOn instead of DefaultFrame. */
+    get IsOn(): boolean;
+    set IsOn(v: boolean);
+    get DefaultFrameWhenOn(): number;
+    set DefaultFrameWhenOn(v: number);
+    /** Single tint replacing every color of the animation (alpha preserved). */
+    get ColorTint(): Color;
+    set ColorTint(v: Color);
+    /** Per-distinct-color replacements in order of appearance; the last one covers the rest. */
+    get Colors(): Color[];
+    set Colors(v: Color[]);
+    /** Total frames of the loaded animation. */
+    get TotalFrames(): number;
+    Stop(): void;
+    protected OnFinished(): void;
+    SeekToDefaultFrame(): void;
+    protected OnLayoutChanged(): void;
+    protected OnAnimatorSeeking(frame: number): void;
+    protected ApplyDefaultFrame(): void;
+    protected OnAnimatorUpdated(value: number): void;
+    protected ApplySpeed(): void;
+    protected OnAnimatorInitializing(): void;
+    protected CheckCanStartAnimator(): boolean;
+    protected OnAnimatorStarting(): void;
+    GoToStart(): void;
+    GoToEnd(): void;
+    protected RenderFrame(ctx: DrawingContext): void;
+    ReloadSource(): void;
+    private static FetchJson;
+    /** Loads (does not apply) the animation for a source; C# LoadSource. */
+    LoadSource(source: string): Promise<ManagedSkottieAnimation | undefined>;
+    /** Builds a Skottie animation from JSON, with the tint / colors replacement applied (C# CreateAnimation). */
+    CreateAnimation(json: string): ManagedSkottieAnimation | undefined;
+    SetAnimation(animation: ManagedSkottieAnimation, disposePrevious: boolean): void;
+    protected OnDisposing(): void;
+    static ApplyTint(json: string, tints: Color[]): string;
+    private static IsColorArray;
+    private static ToHex;
+}

package/dist/controls/SkiaLottie.js

@@ -0,0 +1,290 @@
+import { Super } from "../core/Super";
+import { Colors } from "../core/Types";
+import { AnimatedFramesRenderer } from "./AnimatedFramesRenderer";
+/**
+ * Mirrors DrawnUi SkiaLottie on CanvasKit Skottie: `Source` (URL / app path of the Lottie JSON), `AutoPlay`, `Repeat`,
+ * `SpeedRatio`, `DefaultFrame` / `DefaultFrameWhenOn` + `IsOn` (animated toggles), `StopAtCurrentFrame`,
+ * `ColorTint` / `Colors` (replace the animation colors in the JSON like C# ApplyTint), `GoToStart` / `GoToEnd`.
+ * Requires the CanvasKit "full" build (Skottie module).
+ */
+export class SkiaLottie extends AnimatedFramesRenderer {
+    /** JSON text per source, so the same file is fetched once (C# CachedAnimations). */
+    static CachedAnimations = new Map();
+    static inFlight = new Map();
+    /** Stop() / Finished leave the animation where it is instead of seeking to DefaultFrame; Start() resumes from there. */
+    StopAtCurrentFrame = false;
+    /** Changing IsOn while stopped seeks to the matching default frame. */
+    ApplyIsOnWhenNotPlaying = true;
+    /** Hook to modify the JSON before it is parsed (C# ProcessJson). */
+    ProcessJson;
+    Success;
+    Error;
+    source = "";
+    isOn = false;
+    defaultFrameWhenOn = 0;
+    colorTint = Colors.Transparent;
+    colors = [];
+    loadGeneration = 0;
+    needSeek = false;
+    inPoint = 0;
+    outPoint = 0;
+    /** Current Skottie animation. */
+    Animation;
+    constructor() {
+        super();
+        this.UseCache = "ImageDoubleBuffered";
+    }
+    get Source() { return this.source; }
+    set Source(v) { if (this.source !== v) {
+        this.source = v;
+        this.ReloadSource();
+    } }
+    /** Toggle state: when stopped shows DefaultFrameWhenOn instead of DefaultFrame. */
+    get IsOn() { return this.isOn; }
+    set IsOn(v) {
+        if (this.isOn === v)
+            return;
+        this.isOn = v;
+        if (!this.Animator)
+            return;
+        if (this.IsPlaying || !v)
+            this.Stop();
+        else if (this.ApplyIsOnWhenNotPlaying)
+            this.SeekToDefaultFrame();
+    }
+    get DefaultFrameWhenOn() { return this.defaultFrameWhenOn; }
+    set DefaultFrameWhenOn(v) { if (this.defaultFrameWhenOn !== v) {
+        this.defaultFrameWhenOn = v;
+        if (!this.IsPlaying && this.Animator && this.isOn)
+            this.Seek(v);
+    } }
+    /** Single tint replacing every color of the animation (alpha preserved). */
+    get ColorTint() { return this.colorTint; }
+    set ColorTint(v) { if (this.colorTint !== v) {
+        this.colorTint = v;
+        this.ReloadSource();
+    } }
+    /** Per-distinct-color replacements in order of appearance; the last one covers the rest. */
+    get Colors() { return this.colors; }
+    set Colors(v) { if (this.colors !== v) {
+        this.colors = v ?? [];
+        this.ReloadSource();
+    } }
+    /** Total frames of the loaded animation. */
+    get TotalFrames() { return this.outPoint - this.inPoint; }
+    // ---- playback ----
+    Stop() {
+        super.Stop();
+        if (!this.StopAtCurrentFrame)
+            this.SeekToDefaultFrame();
+    }
+    OnFinished() {
+        super.OnFinished();
+        if (!this.StopAtCurrentFrame)
+            this.SeekToDefaultFrame();
+    }
+    SeekToDefaultFrame() {
+        if (this.Animator)
+            this.Seek(this.isOn ? this.defaultFrameWhenOn : this.DefaultFrame);
+        else
+            this.needSeek = true;
+    }
+    OnLayoutChanged() {
+        super.OnLayoutChanged();
+        if (this.needSeek) {
+            this.needSeek = false;
+            if (!this.IsPlaying)
+                this.SeekToDefaultFrame();
+        }
+    }
+    OnAnimatorSeeking(frame) {
+        if (this.Animation) {
+            if (frame < 0)
+                frame = this.outPoint;
+            this.Animation.seekFrame(frame);
+            this.InvalidateCache();
+            this.RepaintComposition();
+        }
+    }
+    ApplyDefaultFrame() {
+        if (!this.IsPlaying && this.Animator && !this.isOn)
+            this.Seek(this.DefaultFrame);
+    }
+    OnAnimatorUpdated(value) {
+        if (!this.Animation)
+            return;
+        this.Animation.seekFrame(value);
+        this.InvalidateCache(); // own cache re-records, ancestors composite again; no remeasure (C# Update())
+        this.RepaintComposition();
+    }
+    ApplySpeed() {
+        if (!this.Animation || !this.Animator)
+            return;
+        const durationMs = this.Animation.duration() * 1000;
+        this.Animator.Speed = this.SpeedRatio < 1 ? durationMs * (1 + this.SpeedRatio) : durationMs / this.SpeedRatio;
+    }
+    OnAnimatorInitializing() {
+        if (!this.Animation || !this.Animator)
+            return;
+        this.ApplySpeed();
+        this.Animator.mValue = this.inPoint;
+        this.Animator.mMinValue = this.inPoint;
+        this.Animator.mMaxValue = this.outPoint;
+    }
+    CheckCanStartAnimator() { return !!this.Animation; }
+    OnAnimatorStarting() {
+        if (!this.StopAtCurrentFrame && this.Animator)
+            this.Animator.mValue = this.inPoint;
+    }
+    GoToStart() { if (this.Animation) {
+        this.Animation.seek(0);
+        this.InvalidateCache();
+        this.RepaintComposition();
+    } }
+    GoToEnd() { if (this.Animation) {
+        this.Animation.seek(1);
+        this.InvalidateCache();
+        this.RepaintComposition();
+    } }
+    RenderFrame(ctx) {
+        const a = this.Animation;
+        if (!a)
+            return;
+        const r = ctx.Destination;
+        a.render(ctx.Context.Canvas, Super.CK.LTRBRect(r.Left, r.Top, r.Right, r.Bottom));
+    }
+    // ---- loading ----
+    ReloadSource() {
+        if (!this.source)
+            return;
+        const generation = ++this.loadGeneration;
+        const source = this.source;
+        this.LoadSource(source).then((animation) => { if (generation !== this.loadGeneration)
+            return; if (animation) {
+            this.Success?.(this, source);
+            this.SetAnimation(animation, true);
+        }
+        else
+            this.Error?.(this, new Error(`Failed to load source ${source}`)); }, (e) => { if (generation === this.loadGeneration)
+            this.Error?.(this, e); });
+    }
+    static FetchJson(source) {
+        const cached = SkiaLottie.CachedAnimations.get(source);
+        if (cached)
+            return Promise.resolve(cached);
+        let p = SkiaLottie.inFlight.get(source);
+        if (!p) {
+            p = fetch(source).then(async (r) => { if (!r.ok)
+                throw new Error(`${r.status} ${source}`); const json = await r.text(); SkiaLottie.CachedAnimations.set(source, json); return json; })
+                .finally(() => SkiaLottie.inFlight.delete(source));
+            SkiaLottie.inFlight.set(source, p);
+        }
+        return p;
+    }
+    /** Loads (does not apply) the animation for a source; C# LoadSource. */
+    async LoadSource(source) {
+        if (!source)
+            return undefined;
+        return this.CreateAnimation(await SkiaLottie.FetchJson(source));
+    }
+    /** Builds a Skottie animation from JSON, with the tint / colors replacement applied (C# CreateAnimation). */
+    CreateAnimation(json) {
+        if (!json)
+            return undefined;
+        if (this.colors.length > 0)
+            json = SkiaLottie.ApplyTint(json, this.colors);
+        else if (Super.ParseColor(this.colorTint)[3] > 0)
+            json = SkiaLottie.ApplyTint(json, [this.colorTint]);
+        if (this.ProcessJson)
+            json = this.ProcessJson(json);
+        const make = Super.CK.MakeManagedAnimation;
+        if (!make) {
+            console.error("[SkiaLottie] CanvasKit build has no Skottie (use canvaskit-wasm/bin/full)");
+            return undefined;
+        }
+        try {
+            return make.call(Super.CK, json);
+        }
+        catch (e) {
+            console.error("[SkiaLottie] failed to parse animation", e);
+            return undefined;
+        }
+    }
+    SetAnimation(animation, disposePrevious) {
+        if (!animation || animation === this.Animation)
+            return;
+        const wasPlaying = this.IsPlaying;
+        const kill = this.Animation;
+        if (wasPlaying)
+            this.Stop();
+        this.Animation = animation;
+        this.inPoint = 0;
+        this.outPoint = Math.round(animation.duration() * animation.fps());
+        this.InitializeAnimator(); // AutoPlay applied inside
+        this.OnAnimatorSeeking(this.isOn ? this.defaultFrameWhenOn : this.DefaultFrame);
+        if (wasPlaying && !this.IsPlaying)
+            this.Start();
+        if (kill && disposePrevious)
+            kill.delete();
+        this.Update();
+    }
+    OnDisposing() {
+        this.loadGeneration++;
+        super.OnDisposing();
+        this.Animation?.delete();
+        this.Animation = undefined;
+    }
+    // ---- C# ApplyTint: every distinct color of the JSON maps to the next tint, alpha preserved ----
+    static ApplyTint(json, tints) {
+        const doc = JSON.parse(json);
+        const found = [];
+        const key = (c) => c.slice(0, 3).map((v) => v.toFixed(4)).join(",");
+        const walk = (node) => {
+            if (Array.isArray(node)) {
+                for (const item of node)
+                    walk(item);
+                return;
+            }
+            if (!node || typeof node !== "object")
+                return;
+            const obj = node;
+            for (const name of Object.keys(obj)) {
+                const value = obj[name];
+                if (name === "k" && SkiaLottie.IsColorArray(value)) {
+                    const arr = value;
+                    found.push({ color: [arr[0], arr[1], arr[2], arr.length > 3 ? arr[3] : 1], set: (c) => { obj[name] = arr.length > 3 ? c : c.slice(0, 3); } });
+                }
+                else if ((name === "sc" || name === "fc") && typeof value === "string") {
+                    const c = Super.ParseColor(value);
+                    found.push({ color: [c[0], c[1], c[2], c[3]], set: (nc) => { obj[name] = SkiaLottie.ToHex(nc); } });
+                }
+                walk(value);
+            }
+        };
+        walk(doc);
+        const mapping = new Map();
+        let index = -1;
+        let tint = Super.ParseColor(Colors.Black);
+        for (const f of found) {
+            const k = key(f.color);
+            if (mapping.has(k))
+                continue;
+            index++;
+            if (index < tints.length)
+                tint = Super.ParseColor(tints[index]);
+            mapping.set(k, [tint[0], tint[1], tint[2]]);
+        }
+        for (const f of found) {
+            const m = mapping.get(key(f.color));
+            f.set([m[0], m[1], m[2], f.color[3]]);
+        }
+        return JSON.stringify(doc);
+    }
+    static IsColorArray(v) {
+        return Array.isArray(v) && (v.length === 3 || v.length === 4) && v.every((x) => typeof x === "number" && x >= 0 && x <= 1);
+    }
+    static ToHex(c) {
+        const h = (v) => Math.round(v * 255).toString(16).padStart(2, "0").toUpperCase();
+        return `#${h(c[3])}${h(c[0])}${h(c[1])}${h(c[2])}`;
+    }
+}

package/dist/controls/SkiaProgress.d.ts

@@ -0,0 +1,40 @@
+import { type DrawingContext, SkiaControl } from "../core/SkiaControl";
+import { type PrebuiltControlStyle, type ResolvedControlStyle } from "../core/ControlStyle";
+import { type Color, ScaledSize } from "../core/Types";
+/**
+ * Mirrors DrawnUi SkiaProgress (SkiaRangeBase): a horizontal track with a progress trail, per-style track height and
+ * palette (Material3 adds the gap + stop dot). Painted directly instead of child shapes; same geometry as the C# builders.
+ */
+export declare class SkiaProgress extends SkiaControl {
+    static DefaultAccessibilityRole?: string;
+    ControlStyle: PrebuiltControlStyle;
+    private value;
+    private min;
+    private max;
+    private trackColor?;
+    private progressColor?;
+    constructor();
+    get UsingControlStyle(): ResolvedControlStyle;
+    get Value(): number;
+    set Value(v: number);
+    get Min(): number;
+    set Min(v: number);
+    get Max(): number;
+    set Max(v: number);
+    /** Unset = per-style palette. */
+    get TrackColor(): Color;
+    set TrackColor(v: Color);
+    get ProgressColor(): Color;
+    set ProgressColor(v: Color);
+    /** C# ResolvedTrackColor / ResolvedProgressColor / track heights per style. */
+    static Palette(s: ResolvedControlStyle): {
+        track: Color;
+        progress: Color;
+        height: number;
+        radius: number;
+    };
+    get Ratio(): number;
+    protected MeasureAbsolute(w: number, _h: number, scale: number): ScaledSize;
+    protected Paint(ctx: DrawingContext): void;
+    protected DefaultAccessibilityLabel(): string | undefined;
+}

package/dist/controls/SkiaProgress.js

@@ -0,0 +1,80 @@
+import { SkiaControl } from "../core/SkiaControl";
+import { Super } from "../core/Super";
+import { ResolveControlStyle } from "../core/ControlStyle";
+import { ScaledSize } from "../core/Types";
+/**
+ * Mirrors DrawnUi SkiaProgress (SkiaRangeBase): a horizontal track with a progress trail, per-style track height and
+ * palette (Material3 adds the gap + stop dot). Painted directly instead of child shapes; same geometry as the C# builders.
+ */
+export class SkiaProgress extends SkiaControl {
+    static DefaultAccessibilityRole = "progressbar";
+    ControlStyle = "Unset";
+    value = 0;
+    min = 0;
+    max = 100;
+    trackColor;
+    progressColor;
+    constructor() {
+        super();
+        this.HorizontalOptions = "Fill";
+        this.MinimumWidthRequest = 100;
+        this.UseCache = "ImageDoubleBuffered";
+    }
+    get UsingControlStyle() { return ResolveControlStyle(this.ControlStyle); }
+    get Value() { return this.value; }
+    set Value(v) { if (this.value !== v) {
+        this.value = v;
+        this.Update();
+        this.NotifyAccessibility();
+    } }
+    get Min() { return this.min; }
+    set Min(v) { this.min = v; this.Update(); }
+    get Max() { return this.max; }
+    set Max(v) { this.max = v; this.Update(); }
+    /** Unset = per-style palette. */
+    get TrackColor() { return this.trackColor ?? SkiaProgress.Palette(this.UsingControlStyle).track; }
+    set TrackColor(v) { this.trackColor = v; this.Update(); }
+    get ProgressColor() { return this.progressColor ?? SkiaProgress.Palette(this.UsingControlStyle).progress; }
+    set ProgressColor(v) { this.progressColor = v; this.Update(); }
+    /** C# ResolvedTrackColor / ResolvedProgressColor / track heights per style. */
+    static Palette(s) {
+        switch (s) {
+            case "Cupertino": return { track: "#E5E5EA", progress: "#007AFF", height: 4, radius: 2 };
+            case "Material": return { track: "#E8EAED", progress: "#2196F3", height: 4, radius: 2 };
+            case "Material3": return { track: "#E6E0E9", progress: "#6750A4", height: 4, radius: 2 };
+            case "Windows": return { track: "#F3F2F1", progress: "#0078D4", height: 6, radius: 3 };
+            default: return { track: "#D7DBE0", progress: "#DC143C", height: 8, radius: 4 };
+        }
+    }
+    get Ratio() { return this.max > this.min ? Math.max(0, Math.min(1, (this.value - this.min) / (this.max - this.min))) : 0; }
+    MeasureAbsolute(w, _h, scale) {
+        const p = SkiaProgress.Palette(this.UsingControlStyle);
+        return ScaledSize.FromPixels(isFinite(w) ? w : 200 * scale, p.height * scale, scale);
+    }
+    Paint(ctx) {
+        const CK = Super.CK;
+        const p = SkiaProgress.Palette(this.UsingControlStyle);
+        const scale = ctx.Scale;
+        const d = ctx.Destination;
+        const h = p.height * scale, r = p.radius * scale;
+        const top = d.Top + (d.Height - h) / 2;
+        const progressW = d.Width * this.Ratio;
+        const paint = new CK.Paint();
+        paint.setAntiAlias(true);
+        const m3 = this.UsingControlStyle === "Material3";
+        // background track (Material3: starts after the trail + 4pt gap)
+        paint.setColor(Super.ParseColor(this.TrackColor));
+        const bgLeft = m3 && progressW > 0 ? Math.min(d.Right, d.Left + progressW + 4 * scale) : d.Left;
+        if (d.Right - bgLeft > 0)
+            ctx.Context.Canvas.drawRRect(CK.RRectXY(CK.LTRBRect(bgLeft, top, d.Right, top + h), r, r), paint);
+        paint.setColor(Super.ParseColor(this.ProgressColor));
+        if (progressW > 0)
+            ctx.Context.Canvas.drawRRect(CK.RRectXY(CK.LTRBRect(d.Left, top, d.Left + progressW, top + h), r, r), paint);
+        if (m3) {
+            const dot = 4 * scale;
+            ctx.Context.Canvas.drawCircle(d.Right - dot / 2, top + h / 2, dot / 2, paint);
+        }
+        paint.delete();
+    }
+    DefaultAccessibilityLabel() { return `${Math.round(this.Ratio * 100)}%`; }
+}

package/dist/controls/SkiaRadioButton.d.ts

@@ -0,0 +1,32 @@
+import type { SkiaControl } from "../core/SkiaControl";
+import type { GestureEventProcessingInfo, SkiaGesturesParameters } from "../core/Gestures";
+import { type Color } from "../core/Types";
+import { SkiaLabel } from "./SkiaLabel";
+import { SkiaShape } from "./SkiaShape";
+import { SkiaToggle } from "./SkiaToggle";
+/** Mirrors DrawnUi SkiaRadioButton: circle indicator + text, exclusive inside its group; tapping an untoggled one toggles it. */
+export declare class SkiaRadioButton extends SkiaToggle {
+    static DefaultAccessibilityRole?: string;
+    private text;
+    private groupName;
+    private groupKey?;
+    ViewOn: SkiaShape;
+    ViewText: SkiaLabel;
+    private static readonly DefaultAccent;
+    private static readonly DefaultOutline;
+    constructor(text?: string);
+    get Text(): string;
+    set Text(v: string);
+    /** Buttons sharing a GroupName are exclusive; without one, siblings under the same parent are. */
+    get GroupName(): string;
+    set GroupName(v: string);
+    protected StyleDefault(name: "ColorThumbOn" | "ColorFrameOn" | "ColorThumbOff" | "ColorFrameOff"): Color | undefined;
+    protected CreateDefaultContent(): void;
+    private offRing?;
+    private dot?;
+    ApplyProperties(): void;
+    protected DefaultAccessibilityLabel(): string | undefined;
+    private UpdateGroup;
+    protected OnToggledChanged(): void;
+    ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
+}

package/dist/controls/SkiaRadioButton.js

@@ -0,0 +1,157 @@
+import { Colors, Thickness } from "../core/Types";
+import { SkiaLayout } from "./SkiaLayout";
+import { SkiaLabel } from "./SkiaLabel";
+import { SkiaShape } from "./SkiaShape";
+import { SkiaToggle } from "./SkiaToggle";
+/** DrawnUi RadioButtons manager: one toggled button per group (GroupName, else the parent). */
+const groups = new Map();
+/** Mirrors DrawnUi SkiaRadioButton: circle indicator + text, exclusive inside its group; tapping an untoggled one toggles it. */
+export class SkiaRadioButton extends SkiaToggle {
+    static DefaultAccessibilityRole = "radio";
+    text = "";
+    groupName = "";
+    groupKey;
+    ViewOn;
+    ViewText;
+    static DefaultAccent = "#DC143C";
+    static DefaultOutline = "#8E959D";
+    constructor(text = "") {
+        super();
+        this.text = text;
+        this.Type = "Absolute";
+        this.UseCache = "Image";
+    }
+    get Text() { return this.text; }
+    set Text(v) { this.text = v; this.ApplyProperties(); }
+    /** Buttons sharing a GroupName are exclusive; without one, siblings under the same parent are. */
+    get GroupName() { return this.groupName; }
+    set GroupName(v) { this.groupName = v; this.UpdateGroup(); }
+    StyleDefault(name) {
+        const table = {
+            Unset: { ColorThumbOff: SkiaRadioButton.DefaultOutline, ColorThumbOn: SkiaRadioButton.DefaultAccent },
+            Cupertino: { ColorThumbOff: "#BFBFBF", ColorThumbOn: "#007AFF" },
+            Material: { ColorThumbOff: "#757575", ColorThumbOn: "#2196F3" },
+            Material3: { ColorThumbOff: "#49454F", ColorThumbOn: "#6750A4" },
+            Windows: { ColorThumbOff: "#767676", ColorThumbOn: "#0078D7" },
+        };
+        return table[this.UsingControlStyle]?.[name];
+    }
+    CreateDefaultContent() {
+        if (this.MinimumHeightRequest < 0)
+            this.MinimumHeightRequest = 24;
+        const s = this.usingStyle;
+        const size = s === "Unset" ? 18 : 20;
+        const box = new SkiaLayout();
+        box.Type = "Absolute";
+        box.HeightRequest = size;
+        box.LockRatio = 1;
+        box.VerticalOptions = "Center";
+        const off = new SkiaShape();
+        off.Type = "Circle";
+        off.HorizontalOptions = "Fill";
+        off.VerticalOptions = "Fill";
+        const on = new SkiaShape();
+        on.Tag = "On";
+        on.Type = "Circle";
+        on.HorizontalOptions = "Fill";
+        on.VerticalOptions = "Fill";
+        const dot = new SkiaShape();
+        dot.Type = "Circle";
+        dot.HorizontalOptions = "Fill";
+        dot.VerticalOptions = "Fill";
+        switch (s) {
+            case "Cupertino":
+                off.StrokeWidth = 1.5;
+                dot.Margin = new Thickness(6.5);
+                dot.BackgroundColor = Colors.White;
+                on.AddSubView(dot);
+                break;
+            case "Windows":
+                off.StrokeWidth = 1;
+                on.StrokeWidth = 5;
+                break;
+            case "Material":
+            case "Material3":
+                off.StrokeWidth = 2;
+                on.StrokeWidth = 2;
+                dot.Margin = new Thickness(5);
+                on.AddSubView(dot);
+                break;
+            default:
+                off.StrokeWidth = 2;
+                on.StrokeWidth = 2;
+                dot.Margin = new Thickness(4);
+                on.AddSubView(dot);
+                break;
+        }
+        box.AddSubView(off);
+        box.AddSubView(on);
+        const label = new SkiaLabel();
+        label.Tag = "Text";
+        label.Margin = new Thickness(s === "Unset" ? 26 : 28, 0, 0, 0);
+        label.FontSize = 14;
+        label.MaxLines = 2;
+        label.TextColor = Colors.Black;
+        label.VerticalOptions = "Center";
+        label.AccessibilityRole = "presentation";
+        this.ViewOn = on;
+        this.ViewText = label;
+        this.offRing = off;
+        this.dot = dot;
+        this.AddSubView(box);
+        this.AddSubView(label);
+        this.UpdateGroup();
+    }
+    offRing;
+    dot;
+    ApplyProperties() {
+        if (!this.contentCreated)
+            return;
+        const s = this.usingStyle;
+        this.offRing.StrokeColor = this.ColorThumbOff;
+        if (s === "Cupertino")
+            this.ViewOn.BackgroundColor = this.ColorThumbOn;
+        else
+            this.ViewOn.StrokeColor = this.ColorThumbOn;
+        if (this.dot && s !== "Cupertino")
+            this.dot.BackgroundColor = this.ColorThumbOn;
+        this.ViewOn.IsVisible = this.IsToggled;
+        this.ViewText.Text = this.text;
+        this.Update();
+    }
+    DefaultAccessibilityLabel() { return this.text || undefined; }
+    // ---- group (C# RadioButtons.All) ----
+    UpdateGroup() {
+        if (this.groupKey)
+            groups.get(this.groupKey)?.delete(this);
+        this.groupKey = this.groupName || this.Parent;
+        if (!this.groupKey)
+            return;
+        let set = groups.get(this.groupKey);
+        if (!set) {
+            set = new Set();
+            groups.set(this.groupKey, set);
+        }
+        set.add(this);
+    }
+    OnToggledChanged() {
+        if (this.IsToggled) {
+            if (!this.groupKey || this.groupKey !== (this.groupName || this.Parent))
+                this.UpdateGroup();
+            for (const other of groups.get(this.groupKey) ?? [])
+                if (other !== this && other.IsToggled)
+                    other.IsToggled = false;
+        }
+        super.OnToggledChanged();
+    }
+    ProcessGestures(args, apply) {
+        if (args.Type === "Tapped") {
+            if (!this.IsToggled && this.RespondsToGestures) {
+                this.IsToggled = true;
+                return this;
+            }
+            return null;
+        }
+        return super.ProcessGestures(args, apply);
+    }
+}