@g9tm/lynxcontrols 0.0.0-stage → 1.4.0

package/dist/pickers/wheel-column.d.ts

@@ -0,0 +1,32 @@
+import './pickers.css';
+import { type ReactNode } from '@lynx-js/react';
+import type { G9WheelItem } from './date-time.js';
+/** Row height of a wheel (MAUI `G9Metrics.DrumRowHeight`). */
+export declare const g9WheelRowHeight = 40;
+/** Rows a wheel shows (the selected row is the middle one). */
+export declare const g9WheelVisibleRows = 5;
+/** The row a scroll offset rests on: the nearest row, clamped to the list. */
+export declare function wheelIndexAt(scrollTop: number, rowHeight: number, count: number): number;
+/** Props of {@link G9WheelColumn}. */
+export interface G9WheelColumnProps<V extends string | number> {
+    readonly items: ReadonlyArray<G9WheelItem<V>>;
+    readonly value: V;
+    /** The user brought another row to rest in the band (after the snap). */
+    readonly onValueChange: (value: V) => void;
+    /** Caption above the column (Day, Month, …). */
+    readonly label?: string;
+    readonly rowHeight?: number;
+    readonly visibleRows?: number;
+    /** The resting row is within two rows of an end (the year window grows there). */
+    readonly onNearEdge?: (edge: 'start' | 'end') => void;
+    readonly accessibilityLabel?: string;
+}
+/**
+ * One drum of the date/time and duration pickers (MAUI `G9DrumColumn`): a vertical `scroll-view` of fixed-height
+ * rows behind a selection band. The highlighted row follows the scroll live; when the scroll ends (finger lifted and
+ * the fling done — Lynx reports it, so MAUI's 16 ms settle polling is not needed) the column glides to the nearest
+ * row and reports its value. A tap on a row selects it. A new `value` from the parent rolls the column to it
+ * (animated once mounted); the column never echoes a value it reported itself.
+ */
+export declare function G9WheelColumn<V extends string | number>(props: G9WheelColumnProps<V>): ReactNode;
+//# sourceMappingURL=wheel-column.d.ts.map

package/dist/pickers/wheel-column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wheel-column.d.ts","sourceRoot":"","sources":["../../src/pickers/wheel-column.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,gBAAgB,CAAC;AAG7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,8DAA8D;AAC9D,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,+DAA+D;AAC/D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,8EAA8E;AAC9E,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGxF;AAED,sCAAsC;AACtC,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC3D,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9C,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;IAClB,yEAAyE;IACzE,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3C,gDAAgD;IAChD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,kFAAkF;IAClF,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CACtC;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,SAAS,CAmGhG"}

package/dist/pickers/wheel-column.jsx

@@ -0,0 +1,99 @@
+import "./pickers.css";
+import { useEffect, useRef, useState } from "@lynx-js/react";
+import { invokeNodeWhenReady } from "../fields/use-text-input.jsx";
+const g9WheelRowHeight = 40;
+const g9WheelVisibleRows = 5;
+function wheelIndexAt(scrollTop, rowHeight, count) {
+    if (count <= 0) return 0;
+    return Math.min(count - 1, Math.max(0, Math.round(scrollTop / rowHeight)));
+}
+function G9WheelColumn(props) {
+    var _props_rowHeight, _props_visibleRows, _ref, _props_accessibilityLabel;
+    const rowHeight = null != (_props_rowHeight = props.rowHeight) ? _props_rowHeight : g9WheelRowHeight;
+    const visible = null != (_props_visibleRows = props.visibleRows) ? _props_visibleRows : g9WheelVisibleRows;
+    const pad = rowHeight * Math.floor(visible / 2);
+    const count = props.items.length;
+    const valueIndex = Math.max(0, props.items.findIndex((i)=>i.value === props.value));
+    const [live, setLive] = useState(valueIndex);
+    const node = useRef(null);
+    const scrollTop = useRef(valueIndex * rowHeight);
+    const reported = useRef(null);
+    const mounted = useRef(false);
+    const latest = useRef(props);
+    latest.current = props;
+    const scrollToIndex = (index, smooth)=>{
+        scrollTop.current = index * rowHeight;
+        invokeNodeWhenReady(node, 'scrollTo', {
+            offset: index * rowHeight,
+            smooth
+        });
+    };
+    useEffect(()=>{
+        if (null !== reported.current && reported.current === props.value) {
+            reported.current = null;
+            return;
+        }
+        reported.current = null;
+        setLive(valueIndex);
+        scrollToIndex(valueIndex, mounted.current);
+        mounted.current = true;
+    }, [
+        props.value,
+        count
+    ]);
+    const settle = (index)=>{
+        var _latest_current_onNearEdge, _latest_current, _latest_current_onNearEdge1, _latest_current1;
+        const item = latest.current.items[index];
+        scrollToIndex(index, true);
+        setLive(index);
+        if (index <= 2) null == (_latest_current_onNearEdge = (_latest_current = latest.current).onNearEdge) || _latest_current_onNearEdge.call(_latest_current, 'start');
+        if (index >= latest.current.items.length - 3) null == (_latest_current_onNearEdge1 = (_latest_current1 = latest.current).onNearEdge) || _latest_current_onNearEdge1.call(_latest_current1, 'end');
+        if (!item || item.value === latest.current.value) return;
+        reported.current = item.value;
+        latest.current.onValueChange(item.value);
+    };
+    const onScroll = (e)=>{
+        var _e_detail;
+        const top = null == (_e_detail = e.detail) ? void 0 : _e_detail.scrollTop;
+        if ('number' != typeof top) return;
+        scrollTop.current = top;
+        const index = wheelIndexAt(top, rowHeight, latest.current.items.length);
+        setLive((prev)=>prev === index ? prev : index);
+    };
+    const onScrollEnd = ()=>settle(wheelIndexAt(scrollTop.current, rowHeight, latest.current.items.length));
+    return <view className="g9-wheel" accessibility-label={null != (_ref = null != (_props_accessibilityLabel = props.accessibilityLabel) ? _props_accessibilityLabel : props.label) ? _ref : ''}>
+      {props.label ? <text className="g9-wheel__label" text-maxline="1">
+          {props.label}
+        </text> : null}
+      <view className="g9-wheel__viewport" style={{
+        height: `${rowHeight * visible}px`
+    }}>
+        <view className="g9-wheel__band" user-interaction-enabled={false} style={{
+        top: `${pad}px`,
+        height: `${rowHeight}px`
+    }}/>
+        <scroll-view ref={(n)=>{
+        node.current = n;
+    }} className="g9-wheel__scroll" scroll-orientation="vertical" style={{
+        height: `${rowHeight * visible}px`
+    }} bindscroll={onScroll} bindscrollend={onScrollEnd}>
+          <view style={{
+        height: `${pad}px`
+    }}/>
+          {props.items.map((item, i)=><view key={String(item.value)} className={`g9-wheel__row${i === live ? ' g9-wheel__row--selected' : ''}`} style={{
+            height: `${rowHeight}px`
+        }} accessibility-element={true} accessibility-traits="button" accessibility-value={i === live ? 'selected' : ''} accessibility-label={item.text} bindtap={()=>settle(i)}>
+              <text className="g9-wheel__text" text-maxline="1">
+                {item.text}
+              </text>
+            </view>)}
+          <view style={{
+        height: `${pad}px`
+    }}/>
+        </scroll-view>
+      </view>
+    </view>;
+}
+export { G9WheelColumn, g9WheelRowHeight, g9WheelVisibleRows, wheelIndexAt };
+
+//# sourceMappingURL=wheel-column.jsx.map

package/dist/pickers/wheel-column.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"pickers/wheel-column.jsx","sources":["../../src/pickers/wheel-column.tsx"],"sourcesContent":["import './pickers.css';\nimport { type ReactNode, useEffect, useRef, useState } from '@lynx-js/react';\nimport type { NodesRef } from '@lynx-js/types';\nimport { invokeNodeWhenReady } from '../fields/use-text-input';\nimport type { G9WheelItem } from './date-time';\n\n/** Row height of a wheel (MAUI `G9Metrics.DrumRowHeight`). */\nexport const g9WheelRowHeight = 40;\n/** Rows a wheel shows (the selected row is the middle one). */\nexport const g9WheelVisibleRows = 5;\n\n/** The row a scroll offset rests on: the nearest row, clamped to the list. */\nexport function wheelIndexAt(scrollTop: number, rowHeight: number, count: number): number {\n  if (count <= 0) return 0;\n  return Math.min(count - 1, Math.max(0, Math.round(scrollTop / rowHeight)));\n}\n\n/** Props of {@link G9WheelColumn}. */\nexport interface G9WheelColumnProps<V extends string | number> {\n  readonly items: ReadonlyArray<G9WheelItem<V>>;\n  readonly value: V;\n  /** The user brought another row to rest in the band (after the snap). */\n  readonly onValueChange: (value: V) => void;\n  /** Caption above the column (Day, Month, …). */\n  readonly label?: string;\n  readonly rowHeight?: number;\n  readonly visibleRows?: number;\n  /** The resting row is within two rows of an end (the year window grows there). */\n  readonly onNearEdge?: (edge: 'start' | 'end') => void;\n  readonly accessibilityLabel?: string;\n}\n\n/**\n * One drum of the date/time and duration pickers (MAUI `G9DrumColumn`): a vertical `scroll-view` of fixed-height\n * rows behind a selection band. The highlighted row follows the scroll live; when the scroll ends (finger lifted and\n * the fling done — Lynx reports it, so MAUI's 16 ms settle polling is not needed) the column glides to the nearest\n * row and reports its value. A tap on a row selects it. A new `value` from the parent rolls the column to it\n * (animated once mounted); the column never echoes a value it reported itself.\n */\nexport function G9WheelColumn<V extends string | number>(props: G9WheelColumnProps<V>): ReactNode {\n  const rowHeight = props.rowHeight ?? g9WheelRowHeight;\n  const visible = props.visibleRows ?? g9WheelVisibleRows;\n  const pad = rowHeight * Math.floor(visible / 2);\n  const count = props.items.length;\n  const valueIndex = Math.max(\n    0,\n    props.items.findIndex((i) => i.value === props.value),\n  );\n  const [live, setLive] = useState(valueIndex);\n  const node = useRef<NodesRef | null>(null);\n  const scrollTop = useRef(valueIndex * rowHeight);\n  const reported = useRef<V | null>(null);\n  const mounted = useRef(false);\n  const latest = useRef(props);\n  latest.current = props;\n\n  const scrollToIndex = (index: number, smooth: boolean) => {\n    scrollTop.current = index * rowHeight;\n    invokeNodeWhenReady(node, 'scrollTo', { offset: index * rowHeight, smooth });\n  };\n\n  // Follow the parent's value (and item changes) unless it is the one this column just reported.\n  useEffect(() => {\n    if (reported.current !== null && reported.current === props.value) {\n      reported.current = null;\n      return;\n    }\n    reported.current = null;\n    setLive(valueIndex);\n    scrollToIndex(valueIndex, mounted.current);\n    mounted.current = true;\n  }, [props.value, count]);\n\n  const settle = (index: number) => {\n    const item = latest.current.items[index];\n    scrollToIndex(index, true);\n    setLive(index);\n    if (index <= 2) latest.current.onNearEdge?.('start');\n    if (index >= latest.current.items.length - 3) latest.current.onNearEdge?.('end');\n    if (!item || item.value === latest.current.value) return;\n    reported.current = item.value;\n    latest.current.onValueChange(item.value);\n  };\n\n  const onScroll = (e: { detail?: { scrollTop?: number } }) => {\n    const top = e.detail?.scrollTop;\n    if (typeof top !== 'number') return;\n    scrollTop.current = top;\n    const index = wheelIndexAt(top, rowHeight, latest.current.items.length);\n    setLive((prev) => (prev === index ? prev : index));\n  };\n  const onScrollEnd = () => settle(wheelIndexAt(scrollTop.current, rowHeight, latest.current.items.length));\n\n  return (\n    <view className=\"g9-wheel\" accessibility-label={props.accessibilityLabel ?? props.label ?? ''}>\n      {props.label ? (\n        <text className=\"g9-wheel__label\" text-maxline=\"1\">\n          {props.label}\n        </text>\n      ) : null}\n      <view className=\"g9-wheel__viewport\" style={{ height: `${rowHeight * visible}px` }}>\n        <view\n          className=\"g9-wheel__band\"\n          user-interaction-enabled={false}\n          style={{ top: `${pad}px`, height: `${rowHeight}px` }}\n        />\n        <scroll-view\n          ref={(n: NodesRef | null) => {\n            node.current = n;\n          }}\n          className=\"g9-wheel__scroll\"\n          scroll-orientation=\"vertical\"\n          style={{ height: `${rowHeight * visible}px` }}\n          bindscroll={onScroll}\n          bindscrollend={onScrollEnd}\n        >\n          <view style={{ height: `${pad}px` }} />\n          {props.items.map((item, i) => (\n            <view\n              key={String(item.value)}\n              className={`g9-wheel__row${i === live ? ' g9-wheel__row--selected' : ''}`}\n              style={{ height: `${rowHeight}px` }}\n              accessibility-element={true}\n              accessibility-traits=\"button\"\n              accessibility-value={i === live ? 'selected' : ''}\n              accessibility-label={item.text}\n              bindtap={() => settle(i)}\n            >\n              <text className=\"g9-wheel__text\" text-maxline=\"1\">\n                {item.text}\n              </text>\n            </view>\n          ))}\n          <view style={{ height: `${pad}px` }} />\n        </scroll-view>\n      </view>\n    </view>\n  );\n}\n"],"names":["g9WheelRowHeight","g9WheelVisibleRows","wheelIndexAt","scrollTop","rowHeight","count","Math","G9WheelColumn","props","_props_rowHeight","_props_visibleRows","_ref","visible","pad","valueIndex","i","live","setLive","useState","node","useRef","reported","mounted","latest","scrollToIndex","index","smooth","invokeNodeWhenReady","useEffect","settle","_latest_current","_latest_current1","item","onScroll","e","_e_detail","top","prev","onScrollEnd","view","text","scroll-view","n","String"],"mappings":"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"}

package/dist/plus-button/index.d.ts

@@ -0,0 +1,3 @@
+export { type G9PlusButtonItem, type G9PlusButtonItemSchedule, type G9PlusButtonSchedule, type G9PlusButtonTiming, g9PlusButtonDefaults, plusButtonHitHeight, plusButtonSchedule, } from './model.js';
+export { createPlusButtonController, G9PlusButton, type G9PlusButtonController, type G9PlusButtonProps, usePlusButton, } from './plus-button.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/plus-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/plus-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,wBAAwB,EAC7B,KAAK,oBAAoB,EACzB,KAAK,kBAAkB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,0BAA0B,EAC1B,YAAY,EACZ,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,aAAa,GACd,MAAM,eAAe,CAAC"}

package/dist/plus-button/index.jsx

@@ -0,0 +1,2 @@
+export { g9PlusButtonDefaults, plusButtonHitHeight, plusButtonSchedule } from "./model.jsx";
+export { G9PlusButton, createPlusButtonController, usePlusButton } from "./plus-button.jsx";

package/dist/plus-button/model.d.ts

@@ -0,0 +1,65 @@
+import type { G9IconInput } from '../icon/icon.js';
+/** One menu entry of a {@link G9PlusButton} (MAUI `G9PlusButtonItem`). */
+export interface G9PlusButtonItem {
+    readonly icon: G9IconInput;
+    readonly text: string;
+    /** Close the menu after `onSelected` settles. Default true. */
+    readonly closeMenuOnSelect?: boolean;
+    /** Runs through the provider's safe executor (errors show the error popup, MAUI `ShowErrorG9Popup`). */
+    readonly onSelected: (item: G9PlusButtonItem) => void | Promise<void>;
+}
+/** Sizes and timings of the expand / collapse choreography (MAUI `G9PlusButton` properties and their defaults). */
+export interface G9PlusButtonTiming {
+    readonly mainSizeCollapsed: number;
+    readonly mainSizeExpanded: number;
+    readonly itemVerticalOffset: number;
+    readonly textBorderTargetWidth: number;
+    readonly itemsStartDelayMs: number;
+    readonly itemStaggerMs: number;
+    readonly phase1AnimationDurationMs: number;
+    readonly phase2DelayDurationMs: number;
+    readonly phase2AnimationDurationMs: number;
+    readonly phase3DelayDurationMs: number;
+    readonly phase3AnimationDurationMs: number;
+    readonly mainAnimationDurationMs: number;
+    readonly mainIconRotationExpanded: number;
+}
+/** The MAUI `G9PlusButton` sizes and timings (px, ms) every plus button starts from. */
+export declare const g9PlusButtonDefaults: G9PlusButtonTiming;
+/** When each part of one item moves (ms from the toggle). */
+export interface G9PlusButtonItemSchedule {
+    /** Phase 1: the item slides to / from its row (translateY). */
+    readonly slide: {
+        readonly delay: number;
+        readonly duration: number;
+    };
+    /** Phase 2: the label pill grows / shrinks (width). */
+    readonly pill: {
+        readonly delay: number;
+        readonly duration: number;
+    };
+    /** Phase 3: the label fades (opacity). */
+    readonly label: {
+        readonly delay: number;
+        readonly duration: number;
+    };
+}
+/** When each part of the expand/collapse sequence starts and how long it runs (ms): the main button, then each item. */
+export interface G9PlusButtonSchedule {
+    readonly main: {
+        readonly delay: number;
+        readonly duration: number;
+    };
+    readonly items: readonly G9PlusButtonItemSchedule[];
+    /** When the whole sequence has settled. */
+    readonly totalMs: number;
+}
+/**
+ * The MAUI choreography as start times. Expand: the main button shrinks and turns, then after `itemsStartDelayMs`
+ * each item (staggered by `itemStaggerMs`, first item first) slides up, then its pill grows, then its label fades in.
+ * Collapse runs the phases backwards, last item first, and the main button returns last.
+ */
+export declare function plusButtonSchedule(timing: G9PlusButtonTiming, count: number, expand: boolean): G9PlusButtonSchedule;
+/** Hit-area height: the main button plus, while expanded, the item rows above it. */
+export declare function plusButtonHitHeight(timing: G9PlusButtonTiming, count: number, expanded: boolean): number;
+//# sourceMappingURL=model.d.ts.map

package/dist/plus-button/model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../src/plus-button/model.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,0EAA0E;AAC1E,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,+DAA+D;IAC/D,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IACrC,wGAAwG;IACxG,QAAQ,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvE;AAED,mHAAmH;AACnH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;IACnC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACpC,QAAQ,CAAC,qBAAqB,EAAE,MAAM,CAAC;IACvC,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;IACnC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,yBAAyB,EAAE,MAAM,CAAC;IAC3C,QAAQ,CAAC,qBAAqB,EAAE,MAAM,CAAC;IACvC,QAAQ,CAAC,yBAAyB,EAAE,MAAM,CAAC;IAC3C,QAAQ,CAAC,qBAAqB,EAAE,MAAM,CAAC;IACvC,QAAQ,CAAC,yBAAyB,EAAE,MAAM,CAAC;IAC3C,QAAQ,CAAC,uBAAuB,EAAE,MAAM,CAAC;IACzC,QAAQ,CAAC,wBAAwB,EAAE,MAAM,CAAC;CAC3C;AAED,wFAAwF;AACxF,eAAO,MAAM,oBAAoB,EAAE,kBAcjC,CAAC;AAEH,6DAA6D;AAC7D,MAAM,WAAW,wBAAwB;IACvC,+DAA+D;IAC/D,QAAQ,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACtE,uDAAuD;IACvD,QAAQ,CAAC,IAAI,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACrE,0CAA0C;IAC1C,QAAQ,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CACvE;AAED,wHAAwH;AACxH,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,IAAI,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACrE,QAAQ,CAAC,KAAK,EAAE,SAAS,wBAAwB,EAAE,CAAC;IACpD,2CAA2C;IAC3C,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,oBAAoB,CAwCnH;AAED,qFAAqF;AACrF,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,CAExG"}

package/dist/plus-button/model.jsx

@@ -0,0 +1,86 @@
+const g9PlusButtonDefaults = Object.freeze({
+    mainSizeCollapsed: 69,
+    mainSizeExpanded: 49,
+    itemVerticalOffset: 55,
+    textBorderTargetWidth: 139,
+    itemsStartDelayMs: 50,
+    itemStaggerMs: 40,
+    phase1AnimationDurationMs: 200,
+    phase2DelayDurationMs: 30,
+    phase2AnimationDurationMs: 180,
+    phase3DelayDurationMs: 20,
+    phase3AnimationDurationMs: 150,
+    mainAnimationDurationMs: 180,
+    mainIconRotationExpanded: 45
+});
+function plusButtonSchedule(timing, count, expand) {
+    const t = timing;
+    const items = [];
+    let end = 0;
+    if (expand) {
+        const base = t.mainAnimationDurationMs + t.itemsStartDelayMs;
+        for(let i = 0; i < count; i++){
+            const start = base + i * t.itemStaggerMs;
+            const pill = start + t.phase1AnimationDurationMs + t.phase2DelayDurationMs;
+            const label = pill + t.phase2AnimationDurationMs + t.phase3DelayDurationMs;
+            items.push({
+                slide: {
+                    delay: start,
+                    duration: t.phase1AnimationDurationMs
+                },
+                pill: {
+                    delay: pill,
+                    duration: t.phase2AnimationDurationMs
+                },
+                label: {
+                    delay: label,
+                    duration: t.phase3AnimationDurationMs
+                }
+            });
+            end = Math.max(end, label + t.phase3AnimationDurationMs);
+        }
+        return {
+            main: {
+                delay: 0,
+                duration: t.mainAnimationDurationMs
+            },
+            items,
+            totalMs: Math.max(end, t.mainAnimationDurationMs)
+        };
+    }
+    for(let i = 0; i < count; i++){
+        const start = (count - 1 - i) * t.itemStaggerMs;
+        const pill = start + t.phase3AnimationDurationMs + t.phase3DelayDurationMs;
+        const slide = pill + t.phase2AnimationDurationMs + t.phase2DelayDurationMs;
+        items.push({
+            slide: {
+                delay: slide,
+                duration: t.phase1AnimationDurationMs
+            },
+            pill: {
+                delay: pill,
+                duration: t.phase2AnimationDurationMs
+            },
+            label: {
+                delay: start,
+                duration: t.phase3AnimationDurationMs
+            }
+        });
+        end = Math.max(end, slide + t.phase1AnimationDurationMs);
+    }
+    const mainDelay = (count > 0 ? end : 0) + t.itemsStartDelayMs;
+    return {
+        main: {
+            delay: mainDelay,
+            duration: t.mainAnimationDurationMs
+        },
+        items,
+        totalMs: mainDelay + t.mainAnimationDurationMs
+    };
+}
+function plusButtonHitHeight(timing, count, expanded) {
+    return expanded ? timing.mainSizeCollapsed + count * timing.itemVerticalOffset : timing.mainSizeCollapsed;
+}
+export { g9PlusButtonDefaults, plusButtonHitHeight, plusButtonSchedule };
+
+//# sourceMappingURL=model.jsx.map

package/dist/plus-button/model.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"plus-button/model.jsx","sources":["../../src/plus-button/model.ts"],"sourcesContent":["import type { G9IconInput } from '../icon/icon';\n\n/** One menu entry of a {@link G9PlusButton} (MAUI `G9PlusButtonItem`). */\nexport interface G9PlusButtonItem {\n  readonly icon: G9IconInput;\n  readonly text: string;\n  /** Close the menu after `onSelected` settles. Default true. */\n  readonly closeMenuOnSelect?: boolean;\n  /** Runs through the provider's safe executor (errors show the error popup, MAUI `ShowErrorG9Popup`). */\n  readonly onSelected: (item: G9PlusButtonItem) => void | Promise<void>;\n}\n\n/** Sizes and timings of the expand / collapse choreography (MAUI `G9PlusButton` properties and their defaults). */\nexport interface G9PlusButtonTiming {\n  readonly mainSizeCollapsed: number;\n  readonly mainSizeExpanded: number;\n  readonly itemVerticalOffset: number;\n  readonly textBorderTargetWidth: number;\n  readonly itemsStartDelayMs: number;\n  readonly itemStaggerMs: number;\n  readonly phase1AnimationDurationMs: number;\n  readonly phase2DelayDurationMs: number;\n  readonly phase2AnimationDurationMs: number;\n  readonly phase3DelayDurationMs: number;\n  readonly phase3AnimationDurationMs: number;\n  readonly mainAnimationDurationMs: number;\n  readonly mainIconRotationExpanded: number;\n}\n\n/** The MAUI `G9PlusButton` sizes and timings (px, ms) every plus button starts from. */\nexport const g9PlusButtonDefaults: G9PlusButtonTiming = Object.freeze({\n  mainSizeCollapsed: 69,\n  mainSizeExpanded: 49,\n  itemVerticalOffset: 55,\n  textBorderTargetWidth: 139,\n  itemsStartDelayMs: 50,\n  itemStaggerMs: 40,\n  phase1AnimationDurationMs: 200,\n  phase2DelayDurationMs: 30,\n  phase2AnimationDurationMs: 180,\n  phase3DelayDurationMs: 20,\n  phase3AnimationDurationMs: 150,\n  mainAnimationDurationMs: 180,\n  mainIconRotationExpanded: 45,\n});\n\n/** When each part of one item moves (ms from the toggle). */\nexport interface G9PlusButtonItemSchedule {\n  /** Phase 1: the item slides to / from its row (translateY). */\n  readonly slide: { readonly delay: number; readonly duration: number };\n  /** Phase 2: the label pill grows / shrinks (width). */\n  readonly pill: { readonly delay: number; readonly duration: number };\n  /** Phase 3: the label fades (opacity). */\n  readonly label: { readonly delay: number; readonly duration: number };\n}\n\n/** When each part of the expand/collapse sequence starts and how long it runs (ms): the main button, then each item. */\nexport interface G9PlusButtonSchedule {\n  readonly main: { readonly delay: number; readonly duration: number };\n  readonly items: readonly G9PlusButtonItemSchedule[];\n  /** When the whole sequence has settled. */\n  readonly totalMs: number;\n}\n\n/**\n * The MAUI choreography as start times. Expand: the main button shrinks and turns, then after `itemsStartDelayMs`\n * each item (staggered by `itemStaggerMs`, first item first) slides up, then its pill grows, then its label fades in.\n * Collapse runs the phases backwards, last item first, and the main button returns last.\n */\nexport function plusButtonSchedule(timing: G9PlusButtonTiming, count: number, expand: boolean): G9PlusButtonSchedule {\n  const t = timing;\n  const items: G9PlusButtonItemSchedule[] = [];\n  let end = 0;\n  if (expand) {\n    const base = t.mainAnimationDurationMs + t.itemsStartDelayMs;\n    for (let i = 0; i < count; i++) {\n      const start = base + i * t.itemStaggerMs;\n      const pill = start + t.phase1AnimationDurationMs + t.phase2DelayDurationMs;\n      const label = pill + t.phase2AnimationDurationMs + t.phase3DelayDurationMs;\n      items.push({\n        slide: { delay: start, duration: t.phase1AnimationDurationMs },\n        pill: { delay: pill, duration: t.phase2AnimationDurationMs },\n        label: { delay: label, duration: t.phase3AnimationDurationMs },\n      });\n      end = Math.max(end, label + t.phase3AnimationDurationMs);\n    }\n    return {\n      main: { delay: 0, duration: t.mainAnimationDurationMs },\n      items,\n      totalMs: Math.max(end, t.mainAnimationDurationMs),\n    };\n  }\n  for (let i = 0; i < count; i++) {\n    const start = (count - 1 - i) * t.itemStaggerMs;\n    const pill = start + t.phase3AnimationDurationMs + t.phase3DelayDurationMs;\n    const slide = pill + t.phase2AnimationDurationMs + t.phase2DelayDurationMs;\n    items.push({\n      slide: { delay: slide, duration: t.phase1AnimationDurationMs },\n      pill: { delay: pill, duration: t.phase2AnimationDurationMs },\n      label: { delay: start, duration: t.phase3AnimationDurationMs },\n    });\n    end = Math.max(end, slide + t.phase1AnimationDurationMs);\n  }\n  const mainDelay = (count > 0 ? end : 0) + t.itemsStartDelayMs;\n  return {\n    main: { delay: mainDelay, duration: t.mainAnimationDurationMs },\n    items,\n    totalMs: mainDelay + t.mainAnimationDurationMs,\n  };\n}\n\n/** Hit-area height: the main button plus, while expanded, the item rows above it. */\nexport function plusButtonHitHeight(timing: G9PlusButtonTiming, count: number, expanded: boolean): number {\n  return expanded ? timing.mainSizeCollapsed + count * timing.itemVerticalOffset : timing.mainSizeCollapsed;\n}\n"],"names":["g9PlusButtonDefaults","Object","plusButtonSchedule","timing","count","expand","t","items","end","base","i","start","pill","label","Math","slide","mainDelay","plusButtonHitHeight","expanded"],"mappings":"AA8BO,MAAMA,uBAA2CC,OAAO,MAAM,CAAC;IACpE,mBAAmB;IACnB,kBAAkB;IAClB,oBAAoB;IACpB,uBAAuB;IACvB,mBAAmB;IACnB,eAAe;IACf,2BAA2B;IAC3B,uBAAuB;IACvB,2BAA2B;IAC3B,uBAAuB;IACvB,2BAA2B;IAC3B,yBAAyB;IACzB,0BAA0B;AAC5B;AAyBO,SAASC,mBAAmBC,MAA0B,EAAEC,KAAa,EAAEC,MAAe;IAC3F,MAAMC,IAAIH;IACV,MAAMI,QAAoC,EAAE;IAC5C,IAAIC,MAAM;IACV,IAAIH,QAAQ;QACV,MAAMI,OAAOH,EAAE,uBAAuB,GAAGA,EAAE,iBAAiB;QAC5D,IAAK,IAAII,IAAI,GAAGA,IAAIN,OAAOM,IAAK;YAC9B,MAAMC,QAAQF,OAAOC,IAAIJ,EAAE,aAAa;YACxC,MAAMM,OAAOD,QAAQL,EAAE,yBAAyB,GAAGA,EAAE,qBAAqB;YAC1E,MAAMO,QAAQD,OAAON,EAAE,yBAAyB,GAAGA,EAAE,qBAAqB;YAC1EC,MAAM,IAAI,CAAC;gBACT,OAAO;oBAAE,OAAOI;oBAAO,UAAUL,EAAE,yBAAyB;gBAAC;gBAC7D,MAAM;oBAAE,OAAOM;oBAAM,UAAUN,EAAE,yBAAyB;gBAAC;gBAC3D,OAAO;oBAAE,OAAOO;oBAAO,UAAUP,EAAE,yBAAyB;gBAAC;YAC/D;YACAE,MAAMM,KAAK,GAAG,CAACN,KAAKK,QAAQP,EAAE,yBAAyB;QACzD;QACA,OAAO;YACL,MAAM;gBAAE,OAAO;gBAAG,UAAUA,EAAE,uBAAuB;YAAC;YACtDC;YACA,SAASO,KAAK,GAAG,CAACN,KAAKF,EAAE,uBAAuB;QAClD;IACF;IACA,IAAK,IAAII,IAAI,GAAGA,IAAIN,OAAOM,IAAK;QAC9B,MAAMC,QAASP,AAAAA,CAAAA,QAAQ,IAAIM,CAAAA,IAAKJ,EAAE,aAAa;QAC/C,MAAMM,OAAOD,QAAQL,EAAE,yBAAyB,GAAGA,EAAE,qBAAqB;QAC1E,MAAMS,QAAQH,OAAON,EAAE,yBAAyB,GAAGA,EAAE,qBAAqB;QAC1EC,MAAM,IAAI,CAAC;YACT,OAAO;gBAAE,OAAOQ;gBAAO,UAAUT,EAAE,yBAAyB;YAAC;YAC7D,MAAM;gBAAE,OAAOM;gBAAM,UAAUN,EAAE,yBAAyB;YAAC;YAC3D,OAAO;gBAAE,OAAOK;gBAAO,UAAUL,EAAE,yBAAyB;YAAC;QAC/D;QACAE,MAAMM,KAAK,GAAG,CAACN,KAAKO,QAAQT,EAAE,yBAAyB;IACzD;IACA,MAAMU,YAAaZ,AAAAA,CAAAA,QAAQ,IAAII,MAAM,KAAKF,EAAE,iBAAiB;IAC7D,OAAO;QACL,MAAM;YAAE,OAAOU;YAAW,UAAUV,EAAE,uBAAuB;QAAC;QAC9DC;QACA,SAASS,YAAYV,EAAE,uBAAuB;IAChD;AACF;AAGO,SAASW,oBAAoBd,MAA0B,EAAEC,KAAa,EAAEc,QAAiB;IAC9F,OAAOA,WAAWf,OAAO,iBAAiB,GAAGC,QAAQD,OAAO,kBAAkB,GAAGA,OAAO,iBAAiB;AAC3G"}

package/dist/plus-button/plus-button.css

@@ -0,0 +1,67 @@
+.g9-plus-button {
+  position: relative;
+  overflow: visible;
+}
+
+.g9-plus-button__items {
+  width: 179px;
+  height: 69px;
+  position: absolute;
+  bottom: 0;
+  overflow: visible;
+}
+
+.g9-plus-button__item {
+  align-items: center;
+  width: 179px;
+  height: 46px;
+  display: flex;
+  position: absolute;
+  bottom: 11px;
+}
+
+.g9-plus-button__pill {
+  background-color: var(--g9-primary);
+  border: 1px solid var(--g9-primary-border);
+  align-items: center;
+  display: flex;
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  overflow: hidden;
+}
+
+.g9-plus-button__label {
+  color: var(--g9-on-primary);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.g9-plus-button__item-icon {
+  border: 5px solid var(--g9-primary-border);
+  background-color: var(--g9-primary);
+  border-radius: 99px;
+  justify-content: center;
+  align-items: center;
+  padding: 2.9px;
+  display: flex;
+}
+
+.g9-plus-button__main {
+  background-color: var(--g9-primary);
+  border: 6.9px solid var(--g9-primary-border);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  bottom: 0;
+}
+
+.g9-plus-button__main-icon {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+
+/*# sourceMappingURL=plus-button.css.map */

package/dist/plus-button/plus-button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./src/plus-button/plus-button.css"],"names":[],"mappings":"AACA;EAAE,kBAAkB;EAClB,iBAAiB;AACnB;;AAGA;EAAE,YAAY;EACZ,YAAY;EACZ,kBAAkB;EAClB,SAAS;EACT,iBAAiB;AACnB;;AAGA;EAAE,mBAAmB;EACnB,YAAY;EACZ,YAAY;EACZ,aAAa;EACb,kBAAkB;EAClB,YAAY;AACd;;AAGA;EAAE,mCAAmC;EACnC,0CAA0C;EAC1C,mBAAmB;EACnB,aAAa;EACb,kBAAkB;EAClB,QAAQ;EACR,WAAW;EACX,gBAAgB;AAClB;;AAGA;EAAE,2BAA2B;EAC3B,eAAe;EACf,gBAAgB;AAClB;;AAGA;EAAE,0CAA0C;EAC1C,mCAAmC;EACnC,mBAAmB;EACnB,uBAAuB;EACvB,mBAAmB;EACnB,cAAc;EACd,aAAa;AACf;;AAGA;EAAE,mCAAmC;EACnC,4CAA4C;EAC5C,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;EACb,kBAAkB;EAClB,SAAS;AACX;;AAGA;EAAE,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;AACf","sourcesContent":["/* G9PlusButton (MAUI G9PlusButton + G9G9PlusButtonItemView): a round add button unfolding labelled actions. */\n.g9-plus-button {\n  position: relative;\n  overflow: visible;\n}\n\n.g9-plus-button__items {\n  position: absolute;\n  bottom: 0;\n  width: 179px;\n  height: 69px;\n  overflow: visible;\n}\n\n.g9-plus-button__item {\n  position: absolute;\n  bottom: 11px;\n  width: 179px;\n  height: 46px;\n  display: flex;\n  align-items: center;\n}\n\n.g9-plus-button__pill {\n  position: absolute;\n  top: 4px;\n  bottom: 4px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  background-color: var(--g9-primary);\n  border: 1px solid var(--g9-primary-border);\n}\n\n.g9-plus-button__label {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--g9-on-primary);\n}\n\n.g9-plus-button__item-icon {\n  padding: 2.9px;\n  border-radius: 99px;\n  border: 5px solid var(--g9-primary-border);\n  background-color: var(--g9-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.g9-plus-button__main {\n  position: absolute;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--g9-primary);\n  border: 6.9px solid var(--g9-primary-border);\n}\n\n.g9-plus-button__main-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n"],"sourceRoot":""}

package/dist/plus-button/plus-button.d.ts

@@ -0,0 +1,38 @@
+import './plus-button.css';
+import { type ReactNode } from '@lynx-js/react';
+import { type G9PlusButtonItem, type G9PlusButtonTiming } from './model.js';
+/** Imperative handle of a plus button (MAUI `ToggleAsync`), from {@link usePlusButton}. */
+export interface G9PlusButtonController {
+    /** Toggles expanded / collapsed; resolves when the sequence has settled. Retargets a running sequence. */
+    toggle(): Promise<void>;
+    readonly isExpanded: boolean;
+    /** @internal set by the mounted button */
+    bind(target: {
+        toggle(): Promise<void>;
+        expanded(): boolean;
+    }): () => void;
+}
+/** Creates a controller outside React. */
+export declare function createPlusButtonController(): G9PlusButtonController;
+/** A stable controller for a `G9PlusButton`. */
+export declare function usePlusButton(): G9PlusButtonController;
+/** Props of {@link G9PlusButton}: the items, the state, and every MAUI size / timing property. */
+export interface G9PlusButtonProps extends Partial<G9PlusButtonTiming> {
+    /** Menu entries, bottom (closest to the button) first (MAUI `Items`). */
+    readonly items: readonly G9PlusButtonItem[];
+    /** Controlled expanded state. */
+    readonly expanded?: boolean;
+    readonly defaultExpanded?: boolean;
+    readonly onExpandedChange?: (expanded: boolean) => void;
+    readonly controller?: G9PlusButtonController;
+    /** Menu side and label direction (MAUI `MenuFlowDirection`). Default: the app direction. */
+    readonly menuFlowDirection?: 'ltr' | 'rtl';
+    readonly className?: string;
+}
+/**
+ * A round add button that unfolds a column of labelled actions (MAUI `G9PlusButton`): the button shrinks and its plus
+ * turns into a ×, then each item slides up, grows its label pill and fades its label in, staggered; collapsing plays
+ * it backwards. Every size and timing is a prop with the MAUI default. Item actions run through the safe executor.
+ */
+export declare function G9PlusButton(props: G9PlusButtonProps): ReactNode;
+//# sourceMappingURL=plus-button.d.ts.map

package/dist/plus-button/plus-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plus-button.d.ts","sourceRoot":"","sources":["../../src/plus-button/plus-button.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,gBAAgB,CAAC;AAKnE,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EAIxB,MAAM,SAAS,CAAC;AAEjB,2FAA2F;AAC3F,MAAM,WAAW,sBAAsB;IACrC,0GAA0G;IAC1G,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACxB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,0CAA0C;IAC1C,IAAI,CAAC,MAAM,EAAE;QAAE,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;QAAC,QAAQ,IAAI,OAAO,CAAA;KAAE,GAAG,MAAM,IAAI,CAAC;CAC5E;AAED,0CAA0C;AAC1C,wBAAgB,0BAA0B,IAAI,sBAAsB,CAcnE;AAED,gDAAgD;AAChD,wBAAgB,aAAa,IAAI,sBAAsB,CAItD;AAED,kGAAkG;AAClG,MAAM,WAAW,iBAAkB,SAAQ,OAAO,CAAC,kBAAkB,CAAC;IACpE,yEAAyE;IACzE,QAAQ,CAAC,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAC5C,iCAAiC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACnC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,UAAU,CAAC,EAAE,sBAAsB,CAAC;IAC7C,4FAA4F;IAC5F,QAAQ,CAAC,iBAAiB,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC3C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CA4IhE"}

package/dist/plus-button/plus-button.jsx

@@ -0,0 +1,155 @@
+import "./plus-button.css";
+import { useEffect, useRef } from "@lynx-js/react";
+import { startTimer, stopTimer } from "../base/timers.jsx";
+import { useControllableState } from "../base/use-controllable-state.jsx";
+import { G9Icon } from "../icon/icon.jsx";
+import { useG9Direction, useG9Executor } from "../provider/hooks.jsx";
+import { g9PlusButtonDefaults, plusButtonHitHeight, plusButtonSchedule } from "./model.jsx";
+function createPlusButtonController() {
+    let target = null;
+    return {
+        toggle: ()=>target ? target.toggle() : Promise.resolve(),
+        get isExpanded () {
+            return target ? target.expanded() : false;
+        },
+        bind (next) {
+            target = next;
+            return ()=>{
+                if (target === next) target = null;
+            };
+        }
+    };
+}
+function usePlusButton() {
+    const ref = useRef(null);
+    if (null === ref.current) ref.current = createPlusButtonController();
+    return ref.current;
+}
+const CUBIC_OUT = 'cubic-bezier(0.215, 0.61, 0.355, 1)';
+function G9PlusButton(props) {
+    var _props_defaultExpanded, _props_menuFlowDirection, _props_className;
+    const timing = {
+        ...g9PlusButtonDefaults
+    };
+    for (const key of Object.keys(g9PlusButtonDefaults)){
+        const value = props[key];
+        if (void 0 !== value) timing[key] = value;
+    }
+    const [expanded, setExpanded] = useControllableState({
+        value: props.expanded,
+        defaultValue: null != (_props_defaultExpanded = props.defaultExpanded) ? _props_defaultExpanded : false,
+        onChange: props.onExpandedChange,
+        name: 'G9PlusButton.expanded'
+    });
+    const appRtl = 'rtl' === useG9Direction();
+    const rtl = (null != (_props_menuFlowDirection = props.menuFlowDirection) ? _props_menuFlowDirection : appRtl ? 'rtl' : 'ltr') === 'rtl';
+    const executor = useG9Executor();
+    const items = props.items;
+    const schedule = plusButtonSchedule(timing, items.length, expanded);
+    const settle = useRef({
+        timer: null,
+        resolve: null
+    });
+    const latest = useRef(null);
+    latest.current = {
+        expanded,
+        totalOf: (next)=>plusButtonSchedule(timing, items.length, next).totalMs
+    };
+    const toggle = ()=>{
+        var _settle_current_resolve, _settle_current;
+        const next = !latest.current.expanded;
+        latest.current = {
+            ...latest.current,
+            expanded: next
+        };
+        stopTimer(settle.current.timer);
+        null == (_settle_current_resolve = (_settle_current = settle.current).resolve) || _settle_current_resolve.call(_settle_current);
+        setExpanded(next);
+        return new Promise((resolve)=>{
+            settle.current.resolve = resolve;
+            settle.current.timer = startTimer(()=>{
+                settle.current.resolve = null;
+                resolve();
+            }, latest.current.totalOf(next));
+        });
+    };
+    useEffect(()=>{
+        var _props_controller;
+        return null == (_props_controller = props.controller) ? void 0 : _props_controller.bind({
+            toggle,
+            expanded: ()=>latest.current.expanded
+        });
+    }, [
+        props.controller
+    ]);
+    useEffect(()=>()=>{
+            var _settle_current_resolve, _settle_current;
+            stopTimer(settle.current.timer);
+            null == (_settle_current_resolve = (_settle_current = settle.current).resolve) || _settle_current_resolve.call(_settle_current);
+        }, []);
+    const select = (item)=>{
+        executor.run(async ()=>{
+            await item.onSelected(item);
+            if (false !== item.closeMenuOnSelect && latest.current.expanded) await toggle();
+        }, {
+            source: 'G9PlusButtonItem',
+            showErrorPopup: true
+        });
+    };
+    const size = expanded ? timing.mainSizeExpanded : timing.mainSizeCollapsed;
+    const main = schedule.main;
+    const side = rtl ? 'right' : 'left';
+    return <view className={`g9-plus-button${expanded ? ' g9-plus-button--expanded' : ''} ${null != (_props_className = props.className) ? _props_className : ''}`} style={{
+        width: `${timing.mainSizeCollapsed + (expanded ? timing.textBorderTargetWidth : 0)}px`,
+        height: `${plusButtonHitHeight(timing, items.length, expanded)}px`
+    }}>
+      <view className="g9-plus-button__items" style={{
+        [side]: '0px'
+    }}>
+        {items.map((item, i)=>{
+        const s = schedule.items[i];
+        return <view key={`${i}-${item.text}`} className="g9-plus-button__item" style={{
+            [side]: '0px',
+            transform: `translateY(${expanded ? -timing.itemVerticalOffset * (i + 1) : 0}px)`,
+            transition: `transform ${s.slide.duration}ms ${CUBIC_OUT} ${s.slide.delay}ms`,
+            flexDirection: rtl ? 'row-reverse' : 'row'
+        }} accessibility-element={expanded} accessibility-traits="button" accessibility-label={item.text} bindtap={expanded ? ()=>select(item) : void 0}>
+              <view className="g9-plus-button__pill" style={{
+            width: `${expanded ? timing.textBorderTargetWidth : 0}px`,
+            [side]: '26px',
+            borderRadius: rtl ? '29px 9px 9px 29px' : '9px 29px 29px 9px',
+            transition: `width ${s.pill.duration}ms ${CUBIC_OUT} ${s.pill.delay}ms`
+        }}>
+                <text className="g9-plus-button__label" text-maxline="1" style={{
+            [rtl ? 'marginRight' : 'marginLeft']: '25px',
+            opacity: expanded ? 1 : 0,
+            transition: `opacity ${s.label.duration}ms ease-out ${s.label.delay}ms`
+        }}>
+                  {item.text}
+                </text>
+              </view>
+              <view className="g9-plus-button__item-icon">
+                <G9Icon icon={item.icon} size={32} color="var(--g9-on-primary)"/>
+              </view>
+            </view>;
+    })}
+      </view>
+      <view className="g9-plus-button__main" style={{
+        [side]: '0px',
+        width: `${size}px`,
+        height: `${size}px`,
+        borderRadius: `${size / 2}px`,
+        transition: `width ${main.duration}ms ${CUBIC_OUT} ${main.delay}ms, height ${main.duration}ms ${CUBIC_OUT} ${main.delay}ms`
+    }} accessibility-element accessibility-traits="button" bindtap={()=>void toggle()}>
+        <view className="g9-plus-button__main-icon" style={{
+        transform: `rotate(${expanded ? timing.mainIconRotationExpanded : 0}deg)`,
+        transition: `transform ${main.duration}ms ${CUBIC_OUT} ${main.delay}ms`
+    }}>
+          <G9Icon icon="plus" size={40} color="var(--g9-on-primary)"/>
+        </view>
+      </view>
+    </view>;
+}
+export { G9PlusButton, createPlusButtonController, usePlusButton };
+
+//# sourceMappingURL=plus-button.jsx.map