@g9tm/lynxcontrols 0.0.0-stage → 1.4.0

package/dist/toggle/switch.d.ts

@@ -0,0 +1,52 @@
+import './toggle.css';
+import { type ReactNode } from '@lynx-js/react';
+import { type G9ControlBaseProps } from '../base/control.js';
+/** Props of {@link G9SwitchGroup} (MAUI `G9SwitchGroup`). */
+export interface G9SwitchGroupProps extends G9ControlBaseProps {
+    /** A tap cannot turn off the last active switch of the group (it shakes). Default false. */
+    readonly minOneActive?: boolean;
+    /** Shows `active / total` under the switches (warning colour at ≤ 1 with `minOneActive`). Default false. */
+    readonly showLiveStatus?: boolean;
+    /** Told when the number of active switches changes (MAUI `ActiveSwitchCount`). */
+    readonly onActiveCountChange?: (active: number, total: number) => void;
+    readonly children?: ReactNode;
+}
+/**
+ * A vertical group of switches (MAUI `G9SwitchGroup`): counts its switches (nearest group only, as MAUI's direct
+ * children), optionally keeps one on and shows a live `active / total` status. It does not make switches exclusive:
+ * use `selectionGroup` for radio behaviour.
+ */
+export declare function G9SwitchGroup(props: G9SwitchGroupProps): ReactNode;
+/** Props of {@link G9Switch} (MAUI `G9Switch`). */
+export interface G9SwitchProps extends G9ControlBaseProps {
+    /** Controlled state (MAUI `IsOn`). */
+    readonly checked?: boolean;
+    readonly defaultChecked?: boolean;
+    /**
+     * Once per change made by the switch: a tap, `toggle()`, or being turned off by its selection group (MAUI
+     * `Toggled`). Never for a value the parent pushed in.
+     */
+    readonly onCheckedChange?: (checked: boolean) => void;
+    /** A tap cannot turn it off (it shakes); code still can. Default false. */
+    readonly isRequired?: boolean;
+    /** Radio group name: turning this on turns off the others with the same name under the same provider. */
+    readonly selectionGroup?: string | null;
+    /** Form row: title/description fill the start, switch at the end, padded. Default false. */
+    readonly isInFormRow?: boolean;
+    /** Bold 14 title (form row only); the accessibility name. */
+    readonly title?: string | null;
+    /** 12 px description under the title (form row only). */
+    readonly description?: string | null;
+}
+/** Imperative handle of {@link G9Switch}. */
+export interface G9SwitchHandle {
+    /** Same as a tap. */
+    toggle(): void;
+}
+/**
+ * Switch (MAUI `G9Switch`): 56 × 32 track, 24 px thumb that stretches while travelling, 240 ms spring-like CSS
+ * transition, tick/dot track mark; RTL moves the "on" side to the left. A blocked tap (required, or the last active
+ * switch of a `minOneActive` group) shakes instead of toggling. Disabled: opacity 0.45.
+ */
+export declare const G9Switch: import("react").ForwardRefExoticComponent<G9SwitchProps & import("react").RefAttributes<G9SwitchHandle>>;
+//# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/toggle/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAUtB,OAAO,EAGL,KAAK,SAAS,EAMf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,KAAK,kBAAkB,EAAyC,MAAM,iBAAiB,CAAC;AAuCjG,6DAA6D;AAC7D,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,4FAA4F;IAC5F,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,4GAA4G;IAC5G,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,kFAAkF;IAClF,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvE,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAuDlE;AAID,mDAAmD;AACnD,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD,sCAAsC;IACtC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,2EAA2E;IAC3E,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,yGAAyG;IACzG,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,4FAA4F;IAC5F,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,6DAA6D;IAC7D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,yDAAyD;IACzD,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtC;AAED,6CAA6C;AAC7C,MAAM,WAAW,cAAc;IAC7B,qBAAqB;IACrB,MAAM,IAAI,IAAI,CAAC;CAChB;AAID;;;;GAIG;AACH,eAAO,MAAM,QAAQ,0GAsHnB,CAAC"}

package/dist/toggle/switch.jsx

@@ -0,0 +1,192 @@
+import "./toggle.css";
+import { G9Metrics, G9StringKey, formatColor, switchOffTrack, switchOnTrack, switchThumbOff, switchThumbOn } from "@g9tm/lynxcontrols-foundation";
+import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState } from "@lynx-js/react";
+import { g9RowStyle, g9TextStart, useG9Control } from "../base/control.jsx";
+import { useG9Press } from "../base/press.jsx";
+import { useControllableState } from "../base/use-controllable-state.jsx";
+import { G9CoreContext } from "../provider/contexts.jsx";
+import { useG9Strings, useG9Theme } from "../provider/hooks.jsx";
+const registries = new WeakMap();
+const globalScope = {};
+function groupSet(scope, group) {
+    let groups = registries.get(scope);
+    if (!groups) {
+        groups = new Map();
+        registries.set(scope, groups);
+    }
+    let set = groups.get(group);
+    if (!set) {
+        set = new Set();
+        groups.set(group, set);
+    }
+    return set;
+}
+const SwitchGroupContext = createContext(null);
+function G9SwitchGroup(props) {
+    const control = useG9Control(props, 'g9-switch-group');
+    const [states, setStates] = useState(()=>new Map());
+    const latest = useRef(states);
+    latest.current = states;
+    const minOneActive = true === props.minOneActive;
+    const minRef = useRef(minOneActive);
+    minRef.current = minOneActive;
+    const value = useRef(null);
+    if (null === value.current) value.current = {
+        get minOneActive () {
+            return minRef.current;
+        },
+        activeCount: ()=>{
+            let n = 0;
+            for (const on of latest.current.values())if (on) n++;
+            return n;
+        },
+        report: (id, on)=>setStates((current)=>{
+                if (null === on ? !current.has(id) : current.get(id) === on) return current;
+                const next = new Map(current);
+                if (null === on) next.delete(id);
+                else next.set(id, on);
+                latest.current = next;
+                return next;
+            })
+    };
+    let active = 0;
+    for (const on of states.values())if (on) active++;
+    const total = states.size;
+    const notify = useRef(props.onActiveCountChange);
+    notify.current = props.onActiveCountChange;
+    useEffect(()=>{
+        var _notify_current;
+        null == (_notify_current = notify.current) || _notify_current.call(notify, active, total);
+    }, [
+        active,
+        total
+    ]);
+    const warn = minOneActive && active <= 1;
+    return <SwitchGroupContext.Provider value={value.current}>
+      <view className={control.className}>
+        {props.children}
+        {props.showLiveStatus ? <text className="g9-switch-group__status" style={{
+        color: warn ? 'var(--g9-warning)' : 'var(--g9-text-tertiary)'
+    }}>
+            {`${active} / ${total}`}
+          </text> : null}
+      </view>
+    </SwitchGroupContext.Provider>;
+}
+let switchIds = 0;
+const switch_G9Switch = forwardRef(function(props, ref) {
+    var _props_defaultChecked, _props_accessibilityLabel, _ref, _props_accessibilityLabel1;
+    const control = useG9Control(props, 'g9-switch');
+    const theme = useG9Theme();
+    const strings = useG9Strings();
+    const core = useContext(G9CoreContext);
+    const group = useContext(SwitchGroupContext);
+    const [checked, setChecked] = useControllableState({
+        value: props.checked,
+        defaultValue: null != (_props_defaultChecked = props.defaultChecked) ? _props_defaultChecked : false,
+        onChange: props.onCheckedChange,
+        name: 'G9Switch.checked'
+    });
+    const [shake, setShake] = useState(0);
+    const id = useRef(0);
+    if (0 === id.current) id.current = ++switchIds;
+    const latestChecked = useRef(checked);
+    latestChecked.current = checked;
+    const setRef = useRef(setChecked);
+    setRef.current = setChecked;
+    useEffect(()=>{
+        null == group || group.report(id.current, checked);
+    }, [
+        group,
+        checked
+    ]);
+    useEffect(()=>()=>null == group ? void 0 : group.report(id.current, null), [
+        group
+    ]);
+    const groupName = props.selectionGroup && '' !== props.selectionGroup.trim() ? props.selectionGroup : null;
+    const scope = null != core ? core : globalScope;
+    const memberRef = useRef(null);
+    useEffect(()=>{
+        if (!groupName) return;
+        const member = {
+            turnOff: ()=>setRef.current(false)
+        };
+        const set = groupSet(scope, groupName);
+        set.add(member);
+        memberRef.current = member;
+        return ()=>{
+            set.delete(member);
+            memberRef.current = null;
+        };
+    }, [
+        groupName,
+        scope
+    ]);
+    useEffect(()=>{
+        if (!checked || !groupName) return;
+        for (const other of groupSet(scope, groupName))if (other !== memberRef.current) other.turnOff();
+    }, [
+        checked,
+        groupName,
+        scope
+    ]);
+    const toggle = ()=>{
+        if (control.disabled) return;
+        const on = latestChecked.current;
+        if (on && (props.isRequired || (null == group ? void 0 : group.minOneActive) && group.activeCount() <= 1)) return void setShake((n)=>n + 1);
+        setChecked(!on);
+    };
+    useImperativeHandle(ref, ()=>({
+            toggle
+        }));
+    const press = useG9Press(toggle, {
+        blocked: control.disabled,
+        source: 'G9Switch',
+        guardMs: 0
+    });
+    const rtl = 'rtl' === control.direction;
+    const width = G9Metrics.SwitchWidth;
+    const thumb = G9Metrics.SwitchThumb;
+    const travel = width - 4 - thumb - 4;
+    const x = (checked ? travel : 0) * (rtl ? -1 : 1);
+    const track = formatColor(checked ? switchOnTrack(theme) : switchOffTrack(theme));
+    const thumbColor = formatColor(checked ? switchThumbOn(theme) : switchThumbOff(theme));
+    const form = true === props.isInFormRow;
+    const title = props.title && '' !== props.title.trim() ? props.title : null;
+    const description = props.description && '' !== props.description.trim() ? props.description : null;
+    return <view className={`${control.className}${form ? ' g9-switch--row' : ''}`} style={g9RowStyle(control.direction)} accessibility-element={true} accessibility-traits="button" {...checked ? {
+        'accessibility-value': strings.get(G9StringKey.Selected)
+    } : {}} {...(null != (_props_accessibilityLabel = props.accessibilityLabel) ? _props_accessibilityLabel : title) ? {
+        'accessibility-label': null != (_ref = null != (_props_accessibilityLabel1 = props.accessibilityLabel) ? _props_accessibilityLabel1 : title) ? _ref : ''
+    } : {}} bindtap={press}>
+      {form ? <view className="g9-switch__text">
+          {title ? <text className="g9-switch__title" style={g9TextStart(control.direction)}>
+              {title}
+            </text> : null}
+          {description ? <text className="g9-switch__description" style={g9TextStart(control.direction)}>
+              {description}
+            </text> : null}
+        </view> : null}
+      <view key={`shake-${shake}`} className={`g9-switch__track${shake > 0 ? ' g9-switch__track--shake' : ''}`} style={{
+        width: `${width}px`,
+        height: `${G9Metrics.SwitchHeight}px`,
+        backgroundColor: track
+    }}>
+        <view className="g9-switch__mark" style={{
+        [rtl ? 'right' : 'left']: checked ? `${width - 15 - 6}px` : '12px'
+    }}>
+          {checked ? <text className="g9-switch__tick">✓</text> : <view className="g9-switch__dot"/>}
+        </view>
+        <view className="g9-switch__thumb" style={{
+        [rtl ? 'right' : 'left']: '4px',
+        width: `${thumb}px`,
+        height: `${thumb}px`,
+        backgroundColor: thumbColor,
+        transform: `translateX(${x}px)`
+    }}/>
+      </view>
+    </view>;
+});
+export { G9SwitchGroup, switch_G9Switch as G9Switch };
+
+//# sourceMappingURL=switch.jsx.map

package/dist/toggle/switch.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle/switch.jsx","sources":["../../src/toggle/switch.tsx"],"sourcesContent":["import './toggle.css';\nimport {\n  formatColor,\n  G9Metrics,\n  G9StringKey,\n  switchOffTrack,\n  switchOnTrack,\n  switchThumbOff,\n  switchThumbOn,\n} from '@g9tm/lynxcontrols-foundation';\nimport {\n  createContext,\n  forwardRef,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from '@lynx-js/react';\nimport { type G9ControlBaseProps, g9RowStyle, g9TextStart, useG9Control } from '../base/control';\nimport { useG9Press } from '../base/press';\nimport { useControllableState } from '../base/use-controllable-state';\nimport { G9CoreContext } from '../provider/contexts';\nimport { useG9Strings, useG9Theme } from '../provider/hooks';\n\n// ---- selection groups (MAUI `SelectionGroup`: radio-style, scoped to the provider) -------------------------------\n\ninterface GroupMember {\n  turnOff(): void;\n}\n\nconst registries = new WeakMap<object, Map<string, Set<GroupMember>>>();\nconst globalScope = {};\n\nfunction groupSet(scope: object, group: string): Set<GroupMember> {\n  let groups = registries.get(scope);\n  if (!groups) {\n    groups = new Map();\n    registries.set(scope, groups);\n  }\n  let set = groups.get(group);\n  if (!set) {\n    set = new Set();\n    groups.set(group, set);\n  }\n  return set;\n}\n\n// ---- G9SwitchGroup ---------------------------------------------------------------------------------------------\n\ninterface SwitchGroupContextValue {\n  readonly minOneActive: boolean;\n  activeCount(): number;\n  report(id: number, on: boolean | null): void;\n}\n\nconst SwitchGroupContext = createContext<SwitchGroupContextValue | null>(null);\n\n/** Props of {@link G9SwitchGroup} (MAUI `G9SwitchGroup`). */\nexport interface G9SwitchGroupProps extends G9ControlBaseProps {\n  /** A tap cannot turn off the last active switch of the group (it shakes). Default false. */\n  readonly minOneActive?: boolean;\n  /** Shows `active / total` under the switches (warning colour at ≤ 1 with `minOneActive`). Default false. */\n  readonly showLiveStatus?: boolean;\n  /** Told when the number of active switches changes (MAUI `ActiveSwitchCount`). */\n  readonly onActiveCountChange?: (active: number, total: number) => void;\n  readonly children?: ReactNode;\n}\n\n/**\n * A vertical group of switches (MAUI `G9SwitchGroup`): counts its switches (nearest group only, as MAUI's direct\n * children), optionally keeps one on and shows a live `active / total` status. It does not make switches exclusive:\n * use `selectionGroup` for radio behaviour.\n */\nexport function G9SwitchGroup(props: G9SwitchGroupProps): ReactNode {\n  const control = useG9Control(props, 'g9-switch-group');\n  const [states, setStates] = useState<ReadonlyMap<number, boolean>>(() => new Map());\n  const latest = useRef(states);\n  latest.current = states;\n  const minOneActive = props.minOneActive === true;\n  const minRef = useRef(minOneActive);\n  minRef.current = minOneActive;\n  // One context object for the group's life: switches key their effects on it.\n  const value = useRef<SwitchGroupContextValue | null>(null);\n  if (value.current === null) {\n    value.current = {\n      get minOneActive() {\n        return minRef.current;\n      },\n      activeCount: () => {\n        let n = 0;\n        for (const on of latest.current.values()) if (on) n++;\n        return n;\n      },\n      report: (id, on) =>\n        setStates((current) => {\n          if (on === null ? !current.has(id) : current.get(id) === on) return current;\n          const next = new Map(current);\n          if (on === null) next.delete(id);\n          else next.set(id, on);\n          latest.current = next;\n          return next;\n        }),\n    };\n  }\n  let active = 0;\n  for (const on of states.values()) if (on) active++;\n  const total = states.size;\n  const notify = useRef(props.onActiveCountChange);\n  notify.current = props.onActiveCountChange;\n  useEffect(() => {\n    notify.current?.(active, total);\n  }, [active, total]);\n  const warn = minOneActive && active <= 1;\n  return (\n    <SwitchGroupContext.Provider value={value.current}>\n      <view className={control.className}>\n        {props.children}\n        {props.showLiveStatus ? (\n          <text\n            className=\"g9-switch-group__status\"\n            style={{ color: warn ? 'var(--g9-warning)' : 'var(--g9-text-tertiary)' }}\n          >\n            {`${active} / ${total}`}\n          </text>\n        ) : null}\n      </view>\n    </SwitchGroupContext.Provider>\n  );\n}\n\n// ---- G9Switch ----------------------------------------------------------------------------------------------------\n\n/** Props of {@link G9Switch} (MAUI `G9Switch`). */\nexport interface G9SwitchProps extends G9ControlBaseProps {\n  /** Controlled state (MAUI `IsOn`). */\n  readonly checked?: boolean;\n  readonly defaultChecked?: boolean;\n  /**\n   * Once per change made by the switch: a tap, `toggle()`, or being turned off by its selection group (MAUI\n   * `Toggled`). Never for a value the parent pushed in.\n   */\n  readonly onCheckedChange?: (checked: boolean) => void;\n  /** A tap cannot turn it off (it shakes); code still can. Default false. */\n  readonly isRequired?: boolean;\n  /** Radio group name: turning this on turns off the others with the same name under the same provider. */\n  readonly selectionGroup?: string | null;\n  /** Form row: title/description fill the start, switch at the end, padded. Default false. */\n  readonly isInFormRow?: boolean;\n  /** Bold 14 title (form row only); the accessibility name. */\n  readonly title?: string | null;\n  /** 12 px description under the title (form row only). */\n  readonly description?: string | null;\n}\n\n/** Imperative handle of {@link G9Switch}. */\nexport interface G9SwitchHandle {\n  /** Same as a tap. */\n  toggle(): void;\n}\n\nlet switchIds = 0;\n\n/**\n * Switch (MAUI `G9Switch`): 56 × 32 track, 24 px thumb that stretches while travelling, 240 ms spring-like CSS\n * transition, tick/dot track mark; RTL moves the \"on\" side to the left. A blocked tap (required, or the last active\n * switch of a `minOneActive` group) shakes instead of toggling. Disabled: opacity 0.45.\n */\nexport const G9Switch = forwardRef<G9SwitchHandle, G9SwitchProps>(function G9Switch(props, ref): ReactNode {\n  const control = useG9Control(props, 'g9-switch');\n  const theme = useG9Theme();\n  const strings = useG9Strings();\n  const core = useContext(G9CoreContext);\n  const group = useContext(SwitchGroupContext);\n  const [checked, setChecked] = useControllableState<boolean>({\n    value: props.checked,\n    defaultValue: props.defaultChecked ?? false,\n    onChange: props.onCheckedChange,\n    name: 'G9Switch.checked',\n  });\n  const [shake, setShake] = useState(0);\n  const id = useRef(0);\n  if (id.current === 0) id.current = ++switchIds;\n  const latestChecked = useRef(checked);\n  latestChecked.current = checked;\n  const setRef = useRef(setChecked);\n  setRef.current = setChecked;\n\n  // Report to the group.\n  useEffect(() => {\n    group?.report(id.current, checked);\n  }, [group, checked]);\n  useEffect(() => () => group?.report(id.current, null), [group]);\n\n  // Selection group registration (while mounted and named).\n  const groupName = props.selectionGroup && props.selectionGroup.trim() !== '' ? props.selectionGroup : null;\n  const scope: object = core ?? globalScope;\n  const memberRef = useRef<GroupMember | null>(null);\n  useEffect(() => {\n    if (!groupName) return;\n    const member: GroupMember = { turnOff: () => setRef.current(false) };\n    const set = groupSet(scope, groupName);\n    set.add(member);\n    memberRef.current = member;\n    return () => {\n      set.delete(member);\n      memberRef.current = null;\n    };\n  }, [groupName, scope]);\n  useEffect(() => {\n    if (!checked || !groupName) return;\n    for (const other of groupSet(scope, groupName)) if (other !== memberRef.current) other.turnOff();\n  }, [checked, groupName, scope]);\n\n  const toggle = () => {\n    if (control.disabled) return;\n    const on = latestChecked.current;\n    if (on && (props.isRequired || (group?.minOneActive && group.activeCount() <= 1))) {\n      setShake((n) => n + 1);\n      return;\n    }\n    setChecked(!on);\n  };\n  useImperativeHandle(ref, () => ({ toggle }));\n  const press = useG9Press(toggle, { blocked: control.disabled, source: 'G9Switch', guardMs: 0 });\n\n  const rtl = control.direction === 'rtl';\n  const width = G9Metrics.SwitchWidth;\n  const thumb = G9Metrics.SwitchThumb;\n  const travel = width - 4 - thumb - 4;\n  const x = (checked ? travel : 0) * (rtl ? -1 : 1);\n  const track = formatColor(checked ? switchOnTrack(theme) : switchOffTrack(theme));\n  const thumbColor = formatColor(checked ? switchThumbOn(theme) : switchThumbOff(theme));\n  const form = props.isInFormRow === true;\n  const title = props.title && props.title.trim() !== '' ? props.title : null;\n  const description = props.description && props.description.trim() !== '' ? props.description : null;\n  return (\n    <view\n      className={`${control.className}${form ? ' g9-switch--row' : ''}`}\n      style={g9RowStyle(control.direction)}\n      accessibility-element={true}\n      accessibility-traits=\"button\"\n      {...(checked ? { 'accessibility-value': strings.get(G9StringKey.Selected) } : {})}\n      {...((props.accessibilityLabel ?? title)\n        ? { 'accessibility-label': props.accessibilityLabel ?? title ?? '' }\n        : {})}\n      bindtap={press}\n    >\n      {form ? (\n        <view className=\"g9-switch__text\">\n          {title ? (\n            <text className=\"g9-switch__title\" style={g9TextStart(control.direction)}>\n              {title}\n            </text>\n          ) : null}\n          {description ? (\n            <text className=\"g9-switch__description\" style={g9TextStart(control.direction)}>\n              {description}\n            </text>\n          ) : null}\n        </view>\n      ) : null}\n      <view\n        key={`shake-${shake}`}\n        className={`g9-switch__track${shake > 0 ? ' g9-switch__track--shake' : ''}`}\n        style={{ width: `${width}px`, height: `${G9Metrics.SwitchHeight}px`, backgroundColor: track }}\n      >\n        <view\n          className=\"g9-switch__mark\"\n          style={{ [rtl ? 'right' : 'left']: checked ? `${width - 15 - 6}px` : '12px' }}\n        >\n          {checked ? <text className=\"g9-switch__tick\">✓</text> : <view className=\"g9-switch__dot\" />}\n        </view>\n        <view\n          className=\"g9-switch__thumb\"\n          style={{\n            [rtl ? 'right' : 'left']: '4px',\n            width: `${thumb}px`,\n            height: `${thumb}px`,\n            backgroundColor: thumbColor,\n            transform: `translateX(${x}px)`,\n          }}\n        />\n      </view>\n    </view>\n  );\n});\n"],"names":["registries","WeakMap","globalScope","groupSet","scope","group","groups","Map","set","Set","SwitchGroupContext","createContext","G9SwitchGroup","props","control","useG9Control","states","setStates","useState","latest","useRef","minOneActive","minRef","value","n","on","id","current","next","active","total","notify","useEffect","warn","view","text","switchIds","G9Switch","forwardRef","ref","_props_defaultChecked","_props_accessibilityLabel","_ref","theme","useG9Theme","strings","useG9Strings","core","useContext","G9CoreContext","checked","setChecked","useControllableState","shake","setShake","latestChecked","setRef","groupName","memberRef","member","other","toggle","useImperativeHandle","press","useG9Press","rtl","width","G9Metrics","thumb","travel","x","track","formatColor","switchOnTrack","switchOffTrack","thumbColor","switchThumbOn","switchThumbOff","form","title","description","g9RowStyle","G9StringKey","g9TextStart"],"mappings":"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"}

package/dist/toggle/toggle.css

@@ -0,0 +1,189 @@
+.g9-checkbox {
+  flex-direction: row;
+  align-self: flex-start;
+  align-items: flex-start;
+  display: flex;
+}
+
+.g9-checkbox--labelled {
+  align-self: stretch;
+  column-gap: 2px;
+}
+
+.g9-checkbox__slot {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.g9-checkbox__slot--reserve {
+  justify-content: flex-start;
+  height: 48px;
+  padding-top: 14px;
+}
+
+.g9-checkbox__box {
+  width: 20px;
+  height: 20px;
+}
+
+.g9-checkbox__text {
+  flex: 1;
+  font-size: 14px;
+}
+
+.g9-switch {
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.g9-switch--row {
+  justify-content: space-between;
+  align-self: stretch;
+  column-gap: 12px;
+  padding: 12px 16px;
+}
+
+.g9-switch__text {
+  flex-direction: column;
+  flex: 1;
+  row-gap: 2px;
+  display: flex;
+}
+
+.g9-switch__title {
+  color: var(--g9-text-primary);
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.g9-switch__description {
+  color: var(--g9-text-tertiary);
+  font-size: 12px;
+}
+
+.g9-switch__track {
+  border-radius: 16px;
+  transition: background-color .24s ease-out;
+  position: relative;
+}
+
+.g9-switch__track--shake {
+  animation: .31s ease-in-out g9-switch-shake;
+}
+
+@keyframes g9-switch-shake {
+  0% {
+    transform: translateX(0);
+  }
+
+  19% {
+    transform: translateX(-4px);
+  }
+
+  39% {
+    transform: translateX(4px);
+  }
+
+  58% {
+    transform: translateX(-3px);
+  }
+
+  77% {
+    transform: translateX(3px);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.g9-switch__thumb {
+  border-radius: 12px;
+  transition: transform .24s cubic-bezier(.34, 1.56, .64, 1), background-color .24s ease-out;
+  position: absolute;
+  top: 4px;
+}
+
+.g9-switch__mark {
+  position: absolute;
+  top: 9px;
+}
+
+.g9-switch__tick {
+  color: #ffffffbf;
+  font-size: 12px;
+}
+
+.g9-switch__dot {
+  background-color: #00000038;
+  border-radius: 3px;
+  width: 6px;
+  height: 6px;
+  margin-top: 4px;
+}
+
+.g9-disabled {
+  opacity: .45;
+}
+
+.g9-switch-group {
+  flex-direction: column;
+  display: flex;
+}
+
+.g9-switch-group__status {
+  margin: 6px 2px 0;
+  font-size: 11px;
+}
+
+.g9-chip-group--wrap {
+  flex-flow: wrap;
+  justify-content: center;
+  display: flex;
+}
+
+.g9-chip-group__line {
+  flex-direction: row;
+  display: flex;
+}
+
+.g9-chip {
+  border-style: solid;
+  border-width: 1.5px;
+  flex-direction: row;
+  align-items: center;
+  column-gap: 6px;
+  padding: 0 14px;
+  transition: background-color .14s ease-in-out, border-color .14s ease-in-out;
+  display: flex;
+}
+
+.g9-chip--disabled {
+  opacity: .45;
+}
+
+.g9-chip__text {
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: bold;
+}
+
+.g9-chip__check {
+  opacity: 0;
+  width: 0;
+  transition: width .12s ease-in-out, opacity .12s ease-in-out, transform .12s ease-in-out;
+  overflow: hidden;
+  transform: scale(.5);
+}
+
+.g9-chip__check--on {
+  opacity: 1;
+  width: 16px;
+  transform: scale(1);
+}
+
+
+/*# sourceMappingURL=toggle.css.map */

package/dist/toggle/toggle.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./src/toggle/toggle.css"],"names":[],"mappings":"AACA;EAAE,mBAAmB;EACnB,sBAAsB;EACtB,uBAAuB;EACvB,aAAa;AACf;;AAGA;EAAE,mBAAmB;EACnB,eAAe;AACjB;;AAGA;EAAE,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;AACf;;AAGA;EAAE,2BAA2B;EAC3B,YAAY;EACZ,iBAAiB;AACnB;;AAGA;EAAE,WAAW;EACX,YAAY;AACd;;AAGA;EAAE,OAAO;EACP,eAAe;AACjB;;AAGA;EAAE,mBAAmB;EACnB,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;AACf;;AAGA;EAAE,8BAA8B;EAC9B,mBAAmB;EACnB,gBAAgB;EAChB,kBAAkB;AACpB;;AAGA;EAAE,sBAAsB;EACtB,OAAO;EACP,YAAY;EACZ,aAAa;AACf;;AAGA;EAAE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;AACnB;;AAGA;EAAE,8BAA8B;EAC9B,eAAe;AACjB;;AAGA;EAAE,mBAAmB;EACnB,0CAA0C;EAC1C,kBAAkB;AACpB;;AAGA;EAAE,2CAA2C;AAC7C;;AAGA;EAAE;IACE,wBAAwB;EAC1B;;EAEA;IACE,2BAA2B;EAC7B;;EAEA;IACE,0BAA0B;EAC5B;;EAEA;IACE,2BAA2B;EAC7B;;EAEA;IACE,0BAA0B;EAC5B;;EAEA;IACE,wBAAwB;EAC1B;AACF;;AAFA;EAKE,mBAAmB;EACnB,0FAA0F;EAC1F,kBAAkB;EAClB,QAAQ;AACV;;AAAA;EAGE,kBAAkB;EAClB,QAAQ;AACV;;AAAA;EAGE,gBAAgB;EAChB,eAAe;AACjB;;AAAA;EAGE,2BAA2B;EAC3B,kBAAkB;EAClB,UAAU;EACV,WAAW;EACX,eAAe;AACjB;;AAAA;EAGE,YAAY;AACd;;AAAA;EAGE,sBAAsB;EACtB,aAAa;AACf;;AAAA;EAGE,iBAAiB;EACjB,eAAe;AACjB;;AAAA;EAGE,eAAe;EACf,uBAAuB;EACvB,aAAa;AACf;;AACA;EAEE,mBAAmB;EACnB,aAAa;AACf;;AACA;EAEE,mBAAmB;EACnB,mBAAmB;EACnB,mBAAmB;EACnB,mBAAmB;EACnB,eAAe;EACf,eAAe;EACf,4EAA4E;EAC5E,aAAa;AACf;;AAGA;EAAE,YAAY;AACd;;AAGA;EAAE,mBAAmB;EACnB,eAAe;EACf,iBAAiB;AACnB;;AAGA;EAAE,UAAU;EACV,QAAQ;EACR,wFAAwF;EACxF,gBAAgB;EAChB,oBAAoB;AACtB;;AAMA;EAHE,UAAU;EACV,WAAW;EACX,mBAAmB;AACrB","sourcesContent":["/* Toggles (MAUI G9CheckBox, G9Switch, G9SwitchGroup, G9ChipGroup). */\n.g9-checkbox {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  align-self: flex-start;\n}\n\n.g9-checkbox--labelled {\n  align-self: stretch;\n  column-gap: 2px;\n}\n\n.g9-checkbox__slot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.g9-checkbox__slot--reserve {\n  height: 48px;\n  justify-content: flex-start;\n  padding-top: 14px;\n}\n\n.g9-checkbox__box {\n  width: 20px;\n  height: 20px;\n}\n\n.g9-checkbox__text {\n  flex: 1;\n  font-size: 14px;\n}\n\n.g9-switch {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n\n.g9-switch--row {\n  justify-content: space-between;\n  column-gap: 12px;\n  padding: 12px 16px;\n  align-self: stretch;\n}\n\n.g9-switch__text {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  row-gap: 2px;\n}\n\n.g9-switch__title {\n  font-size: 14px;\n  font-weight: bold;\n  color: var(--g9-text-primary);\n}\n\n.g9-switch__description {\n  font-size: 12px;\n  color: var(--g9-text-tertiary);\n}\n\n.g9-switch__track {\n  position: relative;\n  border-radius: 16px;\n  transition: background-color 240ms ease-out;\n}\n\n.g9-switch__track--shake {\n  animation: g9-switch-shake 310ms ease-in-out;\n}\n\n@keyframes g9-switch-shake {\n  0% {\n    transform: translateX(0px);\n  }\n  19% {\n    transform: translateX(-4px);\n  }\n  39% {\n    transform: translateX(4px);\n  }\n  58% {\n    transform: translateX(-3px);\n  }\n  77% {\n    transform: translateX(3px);\n  }\n  100% {\n    transform: translateX(0px);\n  }\n}\n\n.g9-switch__thumb {\n  position: absolute;\n  top: 4px;\n  border-radius: 12px;\n  transition:\n    transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1),\n    background-color 240ms ease-out;\n}\n\n.g9-switch__mark {\n  position: absolute;\n  top: 9px;\n}\n\n.g9-switch__tick {\n  font-size: 12px;\n  color: rgba(255, 255, 255, 0.75);\n}\n\n.g9-switch__dot {\n  width: 6px;\n  height: 6px;\n  margin-top: 4px;\n  border-radius: 3px;\n  background-color: rgba(0, 0, 0, 0.22);\n}\n\n.g9-disabled {\n  opacity: 0.45;\n}\n\n.g9-switch-group {\n  display: flex;\n  flex-direction: column;\n}\n\n.g9-switch-group__status {\n  font-size: 11px;\n  margin: 6px 2px 0px 2px;\n}\n\n.g9-chip-group--wrap {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n.g9-chip-group__line {\n  display: flex;\n  flex-direction: row;\n}\n\n.g9-chip {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 6px;\n  padding: 0px 14px;\n  border-style: solid;\n  border-width: 1.5px;\n  transition:\n    background-color 140ms ease-in-out,\n    border-color 140ms ease-in-out;\n}\n\n.g9-chip--disabled {\n  opacity: 0.45;\n}\n\n.g9-chip__text {\n  font-size: 13px;\n  font-weight: bold;\n  white-space: nowrap;\n}\n\n.g9-chip__check {\n  width: 0px;\n  opacity: 0;\n  transform: scale(0.5);\n  overflow: hidden;\n  transition:\n    width 120ms ease-in-out,\n    opacity 120ms ease-in-out,\n    transform 120ms ease-in-out;\n}\n\n.g9-chip__check--on {\n  width: 16px;\n  opacity: 1;\n  transform: scale(1);\n}\n"],"sourceRoot":""}

package/package.json

@@ -1,6 +1,157 @@
 {
   "name": "@g9tm/lynxcontrols",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.4.0",
+  "description": "ReactLynx controls and overlay infrastructure: provider/host, sheets, popups, toasts, fields, buttons, pickers, tab view, tab bar, edge panel, swipe rows.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.jsx"
+    },
+    "./base": {
+      "source": "./src/base/index.ts",
+      "types": "./dist/base/index.d.ts",
+      "default": "./dist/base/index.jsx"
+    },
+    "./provider": {
+      "source": "./src/provider/index.ts",
+      "types": "./dist/provider/index.d.ts",
+      "default": "./dist/provider/index.jsx"
+    },
+    "./host": {
+      "source": "./src/host/index.ts",
+      "types": "./dist/host/index.d.ts",
+      "default": "./dist/host/index.jsx"
+    },
+    "./deferred": {
+      "source": "./src/deferred/index.ts",
+      "types": "./dist/deferred/index.d.ts",
+      "default": "./dist/deferred/index.jsx"
+    },
+    "./icon": {
+      "source": "./src/icon/index.ts",
+      "types": "./dist/icon/index.d.ts",
+      "default": "./dist/icon/index.jsx"
+    },
+    "./fields": {
+      "source": "./src/fields/index.ts",
+      "types": "./dist/fields/index.d.ts",
+      "default": "./dist/fields/index.jsx"
+    },
+    "./button": {
+      "source": "./src/button/index.ts",
+      "types": "./dist/button/index.d.ts",
+      "default": "./dist/button/index.jsx"
+    },
+    "./display": {
+      "source": "./src/display/index.ts",
+      "types": "./dist/display/index.d.ts",
+      "default": "./dist/display/index.jsx"
+    },
+    "./toggle": {
+      "source": "./src/toggle/index.ts",
+      "types": "./dist/toggle/index.d.ts",
+      "default": "./dist/toggle/index.jsx"
+    },
+    "./expander": {
+      "source": "./src/expander/index.ts",
+      "types": "./dist/expander/index.d.ts",
+      "default": "./dist/expander/index.jsx"
+    },
+    "./sheet": {
+      "source": "./src/sheet/index.ts",
+      "types": "./dist/sheet/index.d.ts",
+      "default": "./dist/sheet/index.jsx"
+    },
+    "./selection": {
+      "source": "./src/selection/index.ts",
+      "types": "./dist/selection/index.d.ts",
+      "default": "./dist/selection/index.jsx"
+    },
+    "./pickers": {
+      "source": "./src/pickers/index.ts",
+      "types": "./dist/pickers/index.d.ts",
+      "default": "./dist/pickers/index.jsx"
+    },
+    "./range-slider": {
+      "source": "./src/range-slider/index.ts",
+      "types": "./dist/range-slider/index.d.ts",
+      "default": "./dist/range-slider/index.jsx"
+    },
+    "./cascade": {
+      "source": "./src/cascade/index.ts",
+      "types": "./dist/cascade/index.d.ts",
+      "default": "./dist/cascade/index.jsx"
+    },
+    "./popup": {
+      "source": "./src/popup/index.ts",
+      "types": "./dist/popup/index.d.ts",
+      "default": "./dist/popup/index.jsx"
+    },
+    "./toast": {
+      "source": "./src/toast/index.ts",
+      "types": "./dist/toast/index.d.ts",
+      "default": "./dist/toast/index.jsx"
+    },
+    "./tabs": {
+      "source": "./src/tabs/index.ts",
+      "types": "./dist/tabs/index.d.ts",
+      "default": "./dist/tabs/index.jsx"
+    },
+    "./tab-bar": {
+      "source": "./src/tab-bar/index.ts",
+      "types": "./dist/tab-bar/index.d.ts",
+      "default": "./dist/tab-bar/index.jsx"
+    },
+    "./plus-button": {
+      "source": "./src/plus-button/index.ts",
+      "types": "./dist/plus-button/index.d.ts",
+      "default": "./dist/plus-button/index.jsx"
+    },
+    "./edge-panel": {
+      "source": "./src/edge-panel/index.ts",
+      "types": "./dist/edge-panel/index.d.ts",
+      "default": "./dist/edge-panel/index.jsx"
+    },
+    "./swipe": {
+      "source": "./src/swipe/index.ts",
+      "types": "./dist/swipe/index.d.ts",
+      "default": "./dist/swipe/index.jsx"
+    },
+    "./rspeedy": {
+      "types": "./rspeedy/index.d.ts",
+      "default": "./rspeedy/index.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "rspeedy"
+  ],
+  "scripts": {
+    "build": "rslib build"
+  },
+  "dependencies": {
+    "@g9tm/lynxcontrols-foundation": "1.4.0",
+    "@lynx-js/lynx-ui-common": "3.139.0",
+    "@lynx-js/lynx-ui-deferred-component": "3.139.0",
+    "@lynx-js/lynx-ui-draggable": "3.139.0",
+    "@lynx-js/lynx-ui-input": "3.139.0",
+    "@lynx-js/lynx-ui-input-otp": "3.139.0",
+    "@lynx-js/lynx-ui-lazy-component": "3.139.0",
+    "@lynx-js/lynx-ui-list": "3.139.0",
+    "@lynx-js/lynx-ui-overlay": "3.139.0",
+    "@lynx-js/lynx-ui-presence": "3.139.0",
+    "@lynx-js/lynx-ui-sheet": "3.139.0",
+    "@lynx-js/lynx-ui-slider": "3.139.0",
+    "@lynx-js/lynx-ui-view-pager": "3.139.0"
+  },
+  "peerDependencies": {
+    "@lynx-js/react": ">=0.126.2 <0.127.0"
+  }
+}

package/rspeedy/index.d.ts

@@ -0,0 +1,21 @@
+/** The page-config flags G9 needs (`enableCSSInlineVariables`: inline `--g9-*` and `var()` work on every engine). */
+export declare const g9PageConfig: Readonly<{ enableCSSInlineVariables: true }>;
+
+/** Loads the `LynxTemplatePlugin` class the app's ReactLynx build uses, resolved from `context` (the app root). */
+export declare function loadTemplatePlugin(context: string): Promise<unknown>;
+
+/** The rspack plugin that sets the page config through the template plugin's `beforeEncode` hook. */
+export declare class G9PageConfigPlugin {
+  constructor(templatePlugin: unknown, pageConfig?: Readonly<Record<string, unknown>>);
+  apply(compiler: unknown): void;
+}
+
+/**
+ * The rspeedy / Rsbuild plugin every app that renders G9 controls adds:
+ * `plugins: [pluginReactLynx(), pluginG9Lynx()]`. Without it, colours written as `var(--g9-*)` in inline styles do not
+ * resolve (the Lynx engine ignores inline CSS variables unless `enableCSSInlineVariables` is on).
+ */
+export declare function pluginG9Lynx(): {
+  readonly name: string;
+  setup(api: unknown): Promise<void>;
+};