@g9tm/lynxcontrols 0.0.0-stage → 1.4.2

package/dist/deferred/index.d.ts

@@ -0,0 +1,3 @@
+export { G9DeferredContent, type G9DeferredContentHandle, type G9DeferredContentProps, g9DeferredCoverFadeMs, g9DeferredFadeRevealDelayMs, g9DeferredLoadDelayMs, g9DeferredReadinessTimeoutMs, g9DeferredRevealSettleFrames, useG9DeferredReadiness, } from './deferred-content.js';
+export { createReadinessSignal, type G9ReadinessSignal } from './readiness-signal.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/deferred/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EACjB,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC3B,qBAAqB,EACrB,2BAA2B,EAC3B,qBAAqB,EACrB,4BAA4B,EAC5B,4BAA4B,EAC5B,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/deferred/index.jsx

@@ -0,0 +1,2 @@
+export { G9DeferredContent, g9DeferredCoverFadeMs, g9DeferredFadeRevealDelayMs, g9DeferredLoadDelayMs, g9DeferredReadinessTimeoutMs, g9DeferredRevealSettleFrames, useG9DeferredReadiness } from "./deferred-content.jsx";
+export { createReadinessSignal } from "./readiness-signal.jsx";

package/dist/deferred/readiness-signal.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A latched "the visual is settled" flag with a one-shot notification (MAUI `DeferredContentReadinessSignal`, the
+ * backing of `IDeferredContentReadiness`). Subscribing after it fired calls the listener at once, so a late
+ * subscriber can never miss it.
+ */
+export interface G9ReadinessSignal {
+    /** `true` once {@link G9ReadinessSignal.markReady} ran. Never goes back. */
+    readonly isReady: boolean;
+    /** Calls `listener` once when ready (at once if already ready). Returns an unsubscribe function. */
+    subscribe(listener: () => void): () => void;
+    /** Flips the flag and notifies; idempotent. */
+    markReady(): void;
+}
+/** Creates a {@link G9ReadinessSignal}. */
+export declare function createReadinessSignal(): G9ReadinessSignal;
+//# sourceMappingURL=readiness-signal.d.ts.map

package/dist/deferred/readiness-signal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"readiness-signal.d.ts","sourceRoot":"","sources":["../../src/deferred/readiness-signal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,4EAA4E;IAC5E,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,oGAAoG;IACpG,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;IAC5C,+CAA+C;IAC/C,SAAS,IAAI,IAAI,CAAC;CACnB;AAED,2CAA2C;AAC3C,wBAAgB,qBAAqB,IAAI,iBAAiB,CAyBzD"}

package/dist/deferred/readiness-signal.jsx

@@ -0,0 +1,29 @@
+function createReadinessSignal() {
+    let ready = false;
+    let listeners = new Set();
+    return {
+        get isReady () {
+            return ready;
+        },
+        subscribe (listener) {
+            if (ready) {
+                listener();
+                return ()=>{};
+            }
+            listeners.add(listener);
+            return ()=>{
+                listeners.delete(listener);
+            };
+        },
+        markReady () {
+            if (ready) return;
+            ready = true;
+            const pending = listeners;
+            listeners = new Set();
+            for (const listener of Array.from(pending))listener();
+        }
+    };
+}
+export { createReadinessSignal };
+
+//# sourceMappingURL=readiness-signal.jsx.map

package/dist/deferred/readiness-signal.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"deferred/readiness-signal.jsx","sources":["../../src/deferred/readiness-signal.ts"],"sourcesContent":["/**\n * A latched \"the visual is settled\" flag with a one-shot notification (MAUI `DeferredContentReadinessSignal`, the\n * backing of `IDeferredContentReadiness`). Subscribing after it fired calls the listener at once, so a late\n * subscriber can never miss it.\n */\nexport interface G9ReadinessSignal {\n  /** `true` once {@link G9ReadinessSignal.markReady} ran. Never goes back. */\n  readonly isReady: boolean;\n  /** Calls `listener` once when ready (at once if already ready). Returns an unsubscribe function. */\n  subscribe(listener: () => void): () => void;\n  /** Flips the flag and notifies; idempotent. */\n  markReady(): void;\n}\n\n/** Creates a {@link G9ReadinessSignal}. */\nexport function createReadinessSignal(): G9ReadinessSignal {\n  let ready = false;\n  let listeners = new Set<() => void>();\n  return {\n    get isReady() {\n      return ready;\n    },\n    subscribe(listener) {\n      if (ready) {\n        listener();\n        return () => {};\n      }\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n    markReady() {\n      if (ready) return;\n      ready = true;\n      const pending = listeners;\n      listeners = new Set();\n      for (const listener of Array.from(pending)) listener();\n    },\n  };\n}\n"],"names":["createReadinessSignal","ready","listeners","Set","listener","pending","Array"],"mappings":"AAeO,SAASA;IACd,IAAIC,QAAQ;IACZ,IAAIC,YAAY,IAAIC;IACpB,OAAO;QACL,IAAI;YACF,OAAOF;QACT;QACA,WAAUG,QAAQ;YAChB,IAAIH,OAAO;gBACTG;gBACA,OAAO,KAAO;YAChB;YACAF,UAAU,GAAG,CAACE;YACd,OAAO;gBACLF,UAAU,MAAM,CAACE;YACnB;QACF;QACA;YACE,IAAIH,OAAO;YACXA,QAAQ;YACR,MAAMI,UAAUH;YAChBA,YAAY,IAAIC;YAChB,KAAK,MAAMC,YAAYE,MAAM,IAAI,CAACD,SAAUD;QAC9C;IACF;AACF"}

package/dist/display/activity-indicator.d.ts

@@ -0,0 +1,21 @@
+import './display.css';
+import type { ReactNode } from '@lynx-js/react';
+/** Props of {@link G9ActivityIndicator} (MAUI `G9ActivityIndicator` = MAUI `ActivityIndicator`). */
+export interface G9ActivityIndicatorProps {
+    /** Spinning and visible (MAUI `IsRunning`). Default false: the box keeps its size but shows nothing. */
+    readonly running?: boolean;
+    /** Ring colour (MAUI `Color`). Default `var(--g9-primary)`. */
+    readonly color?: string;
+    /** Box size in logical pixels. Default 20. */
+    readonly size?: number;
+    /** Ring thickness. Default `max(2, size / 10)`. */
+    readonly thickness?: number;
+    readonly className?: string;
+    readonly accessibilityLabel?: string;
+}
+/**
+ * A spinner: a ring with a transparent quarter rotating once per 800 ms (CSS keyframes, no JavaScript per frame).
+ * Not running → an empty box of the same size (so layouts do not jump).
+ */
+export declare function G9ActivityIndicator(props: G9ActivityIndicatorProps): ReactNode;
+//# sourceMappingURL=activity-indicator.d.ts.map

package/dist/display/activity-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-indicator.d.ts","sourceRoot":"","sources":["../../src/display/activity-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,oGAAoG;AACpG,MAAM,WAAW,wBAAwB;IACvC,wGAAwG;IACxG,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,+DAA+D;IAC/D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CACtC;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,SAAS,CAqB9E"}

package/dist/display/activity-indicator.jsx

@@ -0,0 +1,22 @@
+import "./display.css";
+function G9ActivityIndicator(props) {
+    var _props_size, _props_thickness, _props_color;
+    const size = null != (_props_size = props.size) ? _props_size : 20;
+    const thickness = null != (_props_thickness = props.thickness) ? _props_thickness : Math.max(2, size / 10);
+    const running = true === props.running;
+    const color = null != (_props_color = props.color) ? _props_color : 'var(--g9-primary)';
+    return <view className={`g9-activity${running ? ' g9-activity--running' : ''}${props.className ? ` ${props.className}` : ''}`} style={{
+        width: `${size}px`,
+        height: `${size}px`,
+        borderRadius: `${size / 2}px`,
+        borderWidth: `${thickness}px`,
+        borderColor: running ? color : 'transparent',
+        borderTopColor: 'transparent'
+    }} {...props.accessibilityLabel ? {
+        'accessibility-element': true,
+        'accessibility-label': props.accessibilityLabel
+    } : {}}/>;
+}
+export { G9ActivityIndicator };
+
+//# sourceMappingURL=activity-indicator.jsx.map

package/dist/display/activity-indicator.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"display/activity-indicator.jsx","sources":["../../src/display/activity-indicator.tsx"],"sourcesContent":["import './display.css';\nimport type { ReactNode } from '@lynx-js/react';\n\n/** Props of {@link G9ActivityIndicator} (MAUI `G9ActivityIndicator` = MAUI `ActivityIndicator`). */\nexport interface G9ActivityIndicatorProps {\n  /** Spinning and visible (MAUI `IsRunning`). Default false: the box keeps its size but shows nothing. */\n  readonly running?: boolean;\n  /** Ring colour (MAUI `Color`). Default `var(--g9-primary)`. */\n  readonly color?: string;\n  /** Box size in logical pixels. Default 20. */\n  readonly size?: number;\n  /** Ring thickness. Default `max(2, size / 10)`. */\n  readonly thickness?: number;\n  readonly className?: string;\n  readonly accessibilityLabel?: string;\n}\n\n/**\n * A spinner: a ring with a transparent quarter rotating once per 800 ms (CSS keyframes, no JavaScript per frame).\n * Not running → an empty box of the same size (so layouts do not jump).\n */\nexport function G9ActivityIndicator(props: G9ActivityIndicatorProps): ReactNode {\n  const size = props.size ?? 20;\n  const thickness = props.thickness ?? Math.max(2, size / 10);\n  const running = props.running === true;\n  const color = props.color ?? 'var(--g9-primary)';\n  return (\n    <view\n      className={`g9-activity${running ? ' g9-activity--running' : ''}${props.className ? ` ${props.className}` : ''}`}\n      style={{\n        width: `${size}px`,\n        height: `${size}px`,\n        borderRadius: `${size / 2}px`,\n        borderWidth: `${thickness}px`,\n        borderColor: running ? color : 'transparent',\n        borderTopColor: 'transparent',\n      }}\n      {...(props.accessibilityLabel\n        ? { 'accessibility-element': true, 'accessibility-label': props.accessibilityLabel }\n        : {})}\n    />\n  );\n}\n"],"names":["G9ActivityIndicator","props","_props_size","_props_thickness","_props_color","size","thickness","Math","running","color","view"],"mappings":";AAqBO,SAASA,oBAAoBC,KAA+B;QACpDC,aACKC,kBAEJC;IAHd,MAAMC,OAAO,QAAAH,CAAAA,cAAAA,MAAM,IAAI,AAAD,IAATA,cAAc;IAC3B,MAAMI,YAAY,QAAAH,CAAAA,mBAAAA,MAAM,SAAS,AAAD,IAAdA,mBAAmBI,KAAK,GAAG,CAAC,GAAGF,OAAO;IACxD,MAAMG,UAAUP,AAAkB,SAAlBA,MAAM,OAAO;IAC7B,MAAMQ,QAAQ,QAAAL,CAAAA,eAAAA,MAAM,KAAK,AAAD,IAAVA,eAAe;IAC7B,QACGM,KACC,WAAW,CAAC,WAAW,EAAEF,UAAU,0BAA0B,KAAKP,MAAM,SAAS,GAAG,CAAC,CAAC,EAAEA,MAAM,SAAS,EAAE,GAAG,IAAI,EAChH,OAAO;QACL,OAAO,GAAGI,KAAK,EAAE,CAAC;QAClB,QAAQ,GAAGA,KAAK,EAAE,CAAC;QACnB,cAAc,GAAGA,OAAO,EAAE,EAAE,CAAC;QAC7B,aAAa,GAAGC,UAAU,EAAE,CAAC;QAC7B,aAAaE,UAAUC,QAAQ;QAC/B,gBAAgB;IAClB,IACC,GAAIR,MAAM,kBAAkB,GACzB;QAAE,yBAAyB;QAAM,uBAAuBA,MAAM,kBAAkB;IAAC,IACjF,CAAC,CAAC;AAGZ"}

package/dist/display/culture-date-time-label.d.ts

@@ -0,0 +1,64 @@
+import './display.css';
+import { type G9Culture, type G9LocalDateTime, type G9Strings } from '@g9tm/lynxcontrols-foundation';
+import type { ReactNode } from '@lynx-js/react';
+import { type G9ControlBaseProps } from '../base/control.js';
+/**
+ * What the label shows (MAUI `G9CultureDateTimeDisplayMode`). `relativeDay` (MAUI 1.4.0) is a due-date style: «امروز،
+ * 18:00» / "Today, 18:00", and the `tomorrow` / `yesterday` words, when the value falls on one of those three days;
+ * otherwise exactly `dateTime` (`date` for a midnight value, which almost always means "a date with no time").
+ */
+export declare const G9CultureDateTimeDisplayMode: {
+    readonly DateTime: "dateTime";
+    readonly Date: "date";
+    readonly Time: "time";
+    readonly Relative: "relative";
+    readonly RelativeDay: "relativeDay";
+};
+export type G9CultureDateTimeDisplayMode = (typeof G9CultureDateTimeDisplayMode)[keyof typeof G9CultureDateTimeDisplayMode];
+/** Inputs of {@link formatCultureDateTime}. */
+export interface G9CultureDateTimeFormatInput {
+    readonly value: G9LocalDateTime;
+    readonly mode: G9CultureDateTimeDisplayMode;
+    readonly culture: G9Culture;
+    readonly strings: G9Strings;
+    /** Now (epoch ms), for the relative mode. */
+    readonly nowMs: number;
+    /** UTC offset of `value`'s wall clock, for the relative modes. */
+    readonly utcOffsetMinutes: number;
+    /**
+     * The wall-clock "now" `relativeDay` measures today against (MAUI `G9CultureDateTimeLabel.RelativeDayNow()`).
+     * Default: `nowMs` at `utcOffsetMinutes`, i.e. today in the value's own zone.
+     */
+    readonly relativeDayNow?: G9LocalDateTime;
+}
+/**
+ * MAUI `G9CultureDateTimeLabel.Format`: Jalali for `fa` cultures (Gregorian outside the Persian range), else
+ * Gregorian; `yyyy/MM/dd`, `HH:mm`, `date - time`, or `ago - HH:mm`; Latin digits (as the MAUI code). Absolute text in
+ * an RTL culture is wrapped in LRE…PDF so it reads left to right. `relativeDay` writes the day word («امروز، 18:00»,
+ * "Today, 18:00", the word alone at midnight) in the culture's own direction, never embedded, and falls back to the
+ * absolute date (with its time only when it has one) outside today, tomorrow and yesterday.
+ */
+export declare function formatCultureDateTime(input: G9CultureDateTimeFormatInput): string;
+/** Props of {@link G9CultureDateTimeLabel}. */
+export interface G9CultureDateTimeLabelProps extends G9ControlBaseProps {
+    /** The wall-clock value; `null` shows `emptyText`. */
+    readonly value?: G9LocalDateTime | null;
+    /** Default `'dateTime'`. */
+    readonly displayMode?: G9CultureDateTimeDisplayMode;
+    /** Default `''`. */
+    readonly emptyText?: string | null;
+    /** UTC offset of `value` (relative modes). Default 0. */
+    readonly utcOffsetMinutes?: number;
+    /**
+     * The clock `relativeDay` measures "today" against (MAUI static `G9CultureDateTimeLabel.RelativeDayNow`, here per
+     * label). Default: the provider's clock at `utcOffsetMinutes`. Point it at a fixed wall clock (a server zone) so a
+     * value stamped "today" there never reads as "yesterday" on a device in another zone.
+     */
+    readonly relativeDayNow?: () => G9LocalDateTime;
+}
+/**
+ * A culture-aware date/time text (MAUI `G9CultureDateTimeLabel`); re-renders on culture changes. The relative texts
+ * (`relative`, `relativeDay`) do not refresh by themselves (as MAUI); re-render to update them.
+ */
+export declare function G9CultureDateTimeLabel(props: G9CultureDateTimeLabelProps): ReactNode;
+//# sourceMappingURL=culture-date-time-label.d.ts.map

package/dist/display/culture-date-time-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"culture-date-time-label.d.ts","sourceRoot":"","sources":["../../src/display/culture-date-time-label.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,eAAe,EAEpB,KAAK,SAAS,EAMf,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,KAAK,kBAAkB,EAAgB,MAAM,iBAAiB,CAAC;AAGxE;;;;GAIG;AACH,eAAO,MAAM,4BAA4B;;;;;;CAM/B,CAAC;AACX,MAAM,MAAM,4BAA4B,GACtC,CAAC,OAAO,4BAA4B,CAAC,CAAC,MAAM,OAAO,4BAA4B,CAAC,CAAC;AAEnF,+CAA+C;AAC/C,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC;IAChC,QAAQ,CAAC,IAAI,EAAE,4BAA4B,CAAC;IAC5C,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,6CAA6C;IAC7C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,kEAAkE;IAClE,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,eAAe,CAAC;CAC3C;AAWD;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,4BAA4B,GAAG,MAAM,CAyBjF;AAED,+CAA+C;AAC/C,MAAM,WAAW,2BAA4B,SAAQ,kBAAkB;IACrE,sDAAsD;IACtD,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACxC,4BAA4B;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,4BAA4B,CAAC;IACpD,oBAAoB;IACpB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,yDAAyD;IACzD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACnC;;;;OAIG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,eAAe,CAAC;CACjD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,GAAG,SAAS,CAwBpF"}

package/dist/display/culture-date-time-label.jsx

@@ -0,0 +1,73 @@
+import "./display.css";
+import { G9StringKey, formatAgo, formatLocalDateTime, isPersianLanguage, isSupportedByPersianCalendar, localDateTimeFromEpochMs, localDateTimeToEpochMs, toEpochDays } from "@g9tm/lynxcontrols-foundation";
+import { useG9Control } from "../base/control.jsx";
+import { useG9Core, useG9Culture, useG9Strings } from "../provider/hooks.jsx";
+const G9CultureDateTimeDisplayMode = {
+    DateTime: 'dateTime',
+    Date: 'date',
+    Time: 'time',
+    Relative: 'relative',
+    RelativeDay: 'relativeDay'
+};
+const dayWords = Object.freeze({
+    0: G9StringKey.Today,
+    1: G9StringKey.Tomorrow,
+    '-1': G9StringKey.Yesterday
+});
+const isMidnight = (value)=>0 === value.hour && 0 === value.minute && 0 === value.second && 0 === value.millisecond;
+function formatCultureDateTime(input) {
+    const { value, culture } = input;
+    const time = formatLocalDateTime(value, 'HH:mm', culture, {
+        calendar: 'gregorian',
+        numberingSystem: 'latin'
+    });
+    let mode = input.mode;
+    if ('relativeDay' === mode) {
+        var _input_relativeDayNow;
+        const now = null != (_input_relativeDayNow = input.relativeDayNow) ? _input_relativeDayNow : localDateTimeFromEpochMs(input.nowMs, input.utcOffsetMinutes);
+        const word = dayWords[String(toEpochDays(value) - toEpochDays(now))];
+        if (void 0 !== word) {
+            const text1 = input.strings.get(word);
+            return isMidnight(value) ? text1 : `${text1}${isPersianLanguage(culture) ? '، ' : ', '}${time}`;
+        }
+        mode = isMidnight(value) ? 'date' : 'dateTime';
+    }
+    if ('relative' === mode) {
+        const ago = formatAgo(localDateTimeToEpochMs(value, input.utcOffsetMinutes), {
+            now: input.nowMs,
+            strings: input.strings
+        });
+        return `${ago} - ${time}`;
+    }
+    const calendar = 'fa' === culture.language && isSupportedByPersianCalendar(value) ? 'persian' : 'gregorian';
+    const date = formatLocalDateTime(value, 'yyyy/MM/dd', culture, {
+        calendar,
+        numberingSystem: 'latin'
+    });
+    const text1 = 'date' === mode ? date : 'time' === mode ? time : `${date} - ${time}`;
+    return 'rtl' === culture.direction ? `‪${text1}‬` : text1;
+}
+function G9CultureDateTimeLabel(props) {
+    var _props_emptyText, _props_displayMode, _props_utcOffsetMinutes;
+    const control = useG9Control(props, 'g9-date-label');
+    const culture = useG9Culture();
+    const strings = useG9Strings();
+    const clock = useG9Core().services.clock;
+    const text1 = null == props.value ? null != (_props_emptyText = props.emptyText) ? _props_emptyText : '' : formatCultureDateTime({
+        value: props.value,
+        mode: null != (_props_displayMode = props.displayMode) ? _props_displayMode : 'dateTime',
+        culture,
+        strings,
+        nowMs: clock.now(),
+        utcOffsetMinutes: null != (_props_utcOffsetMinutes = props.utcOffsetMinutes) ? _props_utcOffsetMinutes : 0,
+        ...'relativeDay' === props.displayMode && props.relativeDayNow ? {
+            relativeDayNow: props.relativeDayNow()
+        } : {}
+    });
+    return <text className={control.className} {...control.idProps}>
+      {text1}
+    </text>;
+}
+export { G9CultureDateTimeDisplayMode, G9CultureDateTimeLabel, formatCultureDateTime };
+
+//# sourceMappingURL=culture-date-time-label.jsx.map

package/dist/display/culture-date-time-label.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"display/culture-date-time-label.jsx","sources":["../../src/display/culture-date-time-label.tsx"],"sourcesContent":["import './display.css';\nimport {\n  formatAgo,\n  formatLocalDateTime,\n  type G9Culture,\n  type G9LocalDateTime,\n  G9StringKey,\n  type G9Strings,\n  isPersianLanguage,\n  isSupportedByPersianCalendar,\n  localDateTimeFromEpochMs,\n  localDateTimeToEpochMs,\n  toEpochDays,\n} from '@g9tm/lynxcontrols-foundation';\nimport type { ReactNode } from '@lynx-js/react';\nimport { type G9ControlBaseProps, useG9Control } from '../base/control';\nimport { useG9Core, useG9Culture, useG9Strings } from '../provider/hooks';\n\n/**\n * What the label shows (MAUI `G9CultureDateTimeDisplayMode`). `relativeDay` (MAUI 1.4.0) is a due-date style: «امروز،\n * 18:00» / \"Today, 18:00\", and the `tomorrow` / `yesterday` words, when the value falls on one of those three days;\n * otherwise exactly `dateTime` (`date` for a midnight value, which almost always means \"a date with no time\").\n */\nexport const G9CultureDateTimeDisplayMode = {\n  DateTime: 'dateTime',\n  Date: 'date',\n  Time: 'time',\n  Relative: 'relative',\n  RelativeDay: 'relativeDay',\n} as const;\nexport type G9CultureDateTimeDisplayMode =\n  (typeof G9CultureDateTimeDisplayMode)[keyof typeof G9CultureDateTimeDisplayMode];\n\n/** Inputs of {@link formatCultureDateTime}. */\nexport interface G9CultureDateTimeFormatInput {\n  readonly value: G9LocalDateTime;\n  readonly mode: G9CultureDateTimeDisplayMode;\n  readonly culture: G9Culture;\n  readonly strings: G9Strings;\n  /** Now (epoch ms), for the relative mode. */\n  readonly nowMs: number;\n  /** UTC offset of `value`'s wall clock, for the relative modes. */\n  readonly utcOffsetMinutes: number;\n  /**\n   * The wall-clock \"now\" `relativeDay` measures today against (MAUI `G9CultureDateTimeLabel.RelativeDayNow()`).\n   * Default: `nowMs` at `utcOffsetMinutes`, i.e. today in the value's own zone.\n   */\n  readonly relativeDayNow?: G9LocalDateTime;\n}\n\nconst dayWords: Readonly<Record<string, G9StringKey>> = Object.freeze({\n  '0': G9StringKey.Today,\n  '1': G9StringKey.Tomorrow,\n  '-1': G9StringKey.Yesterday,\n});\n\nconst isMidnight = (value: G9LocalDateTime) =>\n  value.hour === 0 && value.minute === 0 && value.second === 0 && value.millisecond === 0;\n\n/**\n * MAUI `G9CultureDateTimeLabel.Format`: Jalali for `fa` cultures (Gregorian outside the Persian range), else\n * Gregorian; `yyyy/MM/dd`, `HH:mm`, `date - time`, or `ago - HH:mm`; Latin digits (as the MAUI code). Absolute text in\n * an RTL culture is wrapped in LRE…PDF so it reads left to right. `relativeDay` writes the day word («امروز، 18:00»,\n * \"Today, 18:00\", the word alone at midnight) in the culture's own direction, never embedded, and falls back to the\n * absolute date (with its time only when it has one) outside today, tomorrow and yesterday.\n */\nexport function formatCultureDateTime(input: G9CultureDateTimeFormatInput): string {\n  const { value, culture } = input;\n  const time = formatLocalDateTime(value, 'HH:mm', culture, { calendar: 'gregorian', numberingSystem: 'latin' });\n  let mode = input.mode;\n  if (mode === 'relativeDay') {\n    const now = input.relativeDayNow ?? localDateTimeFromEpochMs(input.nowMs, input.utcOffsetMinutes);\n    const word = dayWords[String(toEpochDays(value) - toEpochDays(now))];\n    if (word !== undefined) {\n      const text = input.strings.get(word);\n      // The Persian comma under fa (the design's «امروز، ۱۸:۰۰»), a Latin one elsewhere.\n      return isMidnight(value) ? text : `${text}${isPersianLanguage(culture) ? '، ' : ', '}${time}`;\n    }\n    mode = isMidnight(value) ? 'date' : 'dateTime';\n  }\n  if (mode === 'relative') {\n    const ago = formatAgo(localDateTimeToEpochMs(value, input.utcOffsetMinutes), {\n      now: input.nowMs,\n      strings: input.strings,\n    });\n    return `${ago} - ${time}`;\n  }\n  const calendar = culture.language === 'fa' && isSupportedByPersianCalendar(value) ? 'persian' : 'gregorian';\n  const date = formatLocalDateTime(value, 'yyyy/MM/dd', culture, { calendar, numberingSystem: 'latin' });\n  const text = mode === 'date' ? date : mode === 'time' ? time : `${date} - ${time}`;\n  return culture.direction === 'rtl' ? `‪${text}‬` : text;\n}\n\n/** Props of {@link G9CultureDateTimeLabel}. */\nexport interface G9CultureDateTimeLabelProps extends G9ControlBaseProps {\n  /** The wall-clock value; `null` shows `emptyText`. */\n  readonly value?: G9LocalDateTime | null;\n  /** Default `'dateTime'`. */\n  readonly displayMode?: G9CultureDateTimeDisplayMode;\n  /** Default `''`. */\n  readonly emptyText?: string | null;\n  /** UTC offset of `value` (relative modes). Default 0. */\n  readonly utcOffsetMinutes?: number;\n  /**\n   * The clock `relativeDay` measures \"today\" against (MAUI static `G9CultureDateTimeLabel.RelativeDayNow`, here per\n   * label). Default: the provider's clock at `utcOffsetMinutes`. Point it at a fixed wall clock (a server zone) so a\n   * value stamped \"today\" there never reads as \"yesterday\" on a device in another zone.\n   */\n  readonly relativeDayNow?: () => G9LocalDateTime;\n}\n\n/**\n * A culture-aware date/time text (MAUI `G9CultureDateTimeLabel`); re-renders on culture changes. The relative texts\n * (`relative`, `relativeDay`) do not refresh by themselves (as MAUI); re-render to update them.\n */\nexport function G9CultureDateTimeLabel(props: G9CultureDateTimeLabelProps): ReactNode {\n  const control = useG9Control(props, 'g9-date-label');\n  const culture = useG9Culture();\n  const strings = useG9Strings();\n  const clock = useG9Core().services.clock;\n  const text =\n    props.value == null\n      ? (props.emptyText ?? '')\n      : formatCultureDateTime({\n          value: props.value,\n          mode: props.displayMode ?? 'dateTime',\n          culture,\n          strings,\n          nowMs: clock.now(),\n          utcOffsetMinutes: props.utcOffsetMinutes ?? 0,\n          ...(props.displayMode === 'relativeDay' && props.relativeDayNow\n            ? { relativeDayNow: props.relativeDayNow() }\n            : {}),\n        });\n  return (\n    <text className={control.className} {...control.idProps}>\n      {text}\n    </text>\n  );\n}\n"],"names":["G9CultureDateTimeDisplayMode","dayWords","Object","G9StringKey","isMidnight","value","formatCultureDateTime","input","culture","time","formatLocalDateTime","mode","_input_relativeDayNow","now","localDateTimeFromEpochMs","word","String","toEpochDays","undefined","text1","isPersianLanguage","ago","formatAgo","localDateTimeToEpochMs","calendar","isSupportedByPersianCalendar","date","G9CultureDateTimeLabel","props","_props_emptyText","_props_displayMode","_props_utcOffsetMinutes","control","useG9Control","useG9Culture","strings","useG9Strings","clock","useG9Core","text"],"mappings":";;;;AAuBO,MAAMA,+BAA+B;IAC1C,UAAU;IACV,MAAM;IACN,MAAM;IACN,UAAU;IACV,aAAa;AACf;AAqBA,MAAMC,WAAkDC,OAAO,MAAM,CAAC;IACpE,GAAKC,YAAY,KAAK;IACtB,GAAKA,YAAY,QAAQ;IACzB,MAAMA,YAAY,SAAS;AAC7B;AAEA,MAAMC,aAAa,CAACC,QAClBA,AAAe,MAAfA,MAAM,IAAI,IAAUA,AAAiB,MAAjBA,MAAM,MAAM,IAAUA,AAAiB,MAAjBA,MAAM,MAAM,IAAUA,AAAsB,MAAtBA,MAAM,WAAW;AAS5E,SAASC,sBAAsBC,KAAmC;IACvE,MAAM,EAAEF,KAAK,EAAEG,OAAO,EAAE,GAAGD;IAC3B,MAAME,OAAOC,oBAAoBL,OAAO,SAASG,SAAS;QAAE,UAAU;QAAa,iBAAiB;IAAQ;IAC5G,IAAIG,OAAOJ,MAAM,IAAI;IACrB,IAAII,AAAS,kBAATA,MAAwB;YACdC;QAAZ,MAAMC,MAAM,QAAAD,CAAAA,wBAAAA,MAAM,cAAc,AAAD,IAAnBA,wBAAwBE,yBAAyBP,MAAM,KAAK,EAAEA,MAAM,gBAAgB;QAChG,MAAMQ,OAAOd,QAAQ,CAACe,OAAOC,YAAYZ,SAASY,YAAYJ,MAAM;QACpE,IAAIE,AAASG,WAATH,MAAoB;YACtB,MAAMI,QAAOZ,MAAM,OAAO,CAAC,GAAG,CAACQ;YAE/B,OAAOX,WAAWC,SAASc,QAAO,GAAGA,QAAOC,kBAAkBZ,WAAW,OAAO,OAAOC,MAAM;QAC/F;QACAE,OAAOP,WAAWC,SAAS,SAAS;IACtC;IACA,IAAIM,AAAS,eAATA,MAAqB;QACvB,MAAMU,MAAMC,UAAUC,uBAAuBlB,OAAOE,MAAM,gBAAgB,GAAG;YAC3E,KAAKA,MAAM,KAAK;YAChB,SAASA,MAAM,OAAO;QACxB;QACA,OAAO,GAAGc,IAAI,GAAG,EAAEZ,MAAM;IAC3B;IACA,MAAMe,WAAWhB,AAAqB,SAArBA,QAAQ,QAAQ,IAAaiB,6BAA6BpB,SAAS,YAAY;IAChG,MAAMqB,OAAOhB,oBAAoBL,OAAO,cAAcG,SAAS;QAAEgB;QAAU,iBAAiB;IAAQ;IACpG,MAAML,QAAOR,AAAS,WAATA,OAAkBe,OAAOf,AAAS,WAATA,OAAkBF,OAAO,GAAGiB,KAAK,GAAG,EAAEjB,MAAM;IAClF,OAAOD,AAAsB,UAAtBA,QAAQ,SAAS,GAAa,CAAC,CAAC,EAAEW,MAAK,CAAC,CAAC,GAAGA;AACrD;AAwBO,SAASQ,uBAAuBC,KAAkC;QAOhEC,kBAGOC,oBAIYC;IAb1B,MAAMC,UAAUC,aAAaL,OAAO;IACpC,MAAMpB,UAAU0B;IAChB,MAAMC,UAAUC;IAChB,MAAMC,QAAQC,YAAY,QAAQ,CAAC,KAAK;IACxC,MAAMnB,QACJS,AAAe,QAAfA,MAAM,KAAK,GAAI,QACVC,CAAAA,mBAAAA,MAAM,SAAS,AAAD,IAAdA,mBAAmB,KACpBvB,sBAAsB;QACpB,OAAOsB,MAAM,KAAK;QAClB,MAAM,QAAAE,CAAAA,qBAAAA,MAAM,WAAW,AAAD,IAAhBA,qBAAqB;QAC3BtB;QACA2B;QACA,OAAOE,MAAM,GAAG;QAChB,kBAAkB,QAAAN,CAAAA,0BAAAA,MAAM,gBAAgB,AAAD,IAArBA,0BAA0B;QAC5C,GAAIH,AAAsB,kBAAtBA,MAAM,WAAW,IAAsBA,MAAM,cAAc,GAC3D;YAAE,gBAAgBA,MAAM,cAAc;QAAG,IACzC,CAAC,CAAC;IACR;IACN,QACGW,KAAK,WAAWP,QAAQ,SAAS,GAAG,GAAGA,QAAQ,OAAO,EAAE;MACvD,CAACb,MAAK;IACR,EAAEoB;AAEN"}

package/dist/display/display.css

@@ -0,0 +1,217 @@
+.g9-activity {
+  border-style: solid;
+}
+
+.g9-activity--running {
+  animation: .8s linear infinite g9-activity-spin;
+}
+
+@keyframes g9-activity-spin {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.g9-progress {
+  flex-direction: column;
+  display: flex;
+}
+
+.g9-progress__label {
+  align-self: flex-end;
+  margin-bottom: 6px;
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.g9-progress__track {
+  position: relative;
+  overflow: hidden;
+}
+
+.g9-progress__fill {
+  height: 100%;
+  transition: width .3s cubic-bezier(.215, .61, .355, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.g9-progress__fill--indeterminate {
+  transition: none;
+}
+
+.g9-progress__fill--sweep {
+  animation: 1.333s linear infinite g9-progress-sweep;
+}
+
+@keyframes g9-progress-sweep {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(400%);
+  }
+}
+
+.g9-progress__stripes {
+  background: repeating-linear-gradient(-60deg, #ffffff29 0, #ffffff29 5px, #0000 5px, #0000 16px);
+  animation: .7s linear infinite g9-progress-stripes;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -16px;
+  right: 0;
+}
+
+@keyframes g9-progress-stripes {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(16px);
+  }
+}
+
+.g9-progress__segment {
+  background-color: #ffffff80;
+  border-radius: 1.5px;
+  width: 3px;
+  height: 3px;
+  margin-top: -1.5px;
+  margin-left: -1.5px;
+  position: absolute;
+  top: 50%;
+}
+
+.g9-separator {
+  flex-direction: row;
+  align-items: center;
+  column-gap: 10px;
+  padding-top: 14px;
+  padding-bottom: 8px;
+  display: flex;
+}
+
+.g9-separator__line {
+  flex: 1;
+}
+
+.g9-separator__title {
+  flex-direction: row;
+  align-items: center;
+  column-gap: 4px;
+  display: flex;
+}
+
+.g9-separator__text {
+  letter-spacing: 1.2px;
+  white-space: nowrap;
+  font-size: 10px;
+  font-weight: bold;
+}
+
+.g9-title-line {
+  flex-direction: column;
+  display: flex;
+}
+
+.g9-title-line__text {
+  color: var(--g9-text-primary);
+  font-size: 16px;
+}
+
+.g9-title-line__line {
+  background-color: var(--g9-outline-variant);
+  height: 1px;
+  margin-top: 6px;
+}
+
+.g9-shimmer__band-host {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+
+.g9-shimmer__band {
+  width: 100%;
+  height: 100%;
+  animation: 1.1s linear infinite g9-shimmer-sweep;
+}
+
+@keyframes g9-shimmer-sweep {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+
+.g9-skeleton {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+
+.g9-skeleton__rows {
+  flex-direction: column;
+  row-gap: 8px;
+  padding: 0 10px 10px;
+  display: flex;
+}
+
+.g9-skeleton__rows--form {
+  row-gap: 12px;
+}
+
+.g9-skeleton__bar {
+  background-color: var(--g9-surface-container-high);
+}
+
+.g9-skeleton__field {
+  border-radius: 12px;
+  height: 48px;
+}
+
+.g9-skeleton__row {
+  flex-direction: row;
+  align-items: center;
+  column-gap: 8px;
+  height: 52px;
+  display: flex;
+}
+
+.g9-skeleton__circle {
+  background-color: var(--g9-surface-container-high);
+  border-radius: 14px;
+  width: 28px;
+  height: 28px;
+}
+
+.g9-skeleton__line {
+  border-radius: 8px;
+  flex: 1;
+  height: 16px;
+}
+
+.g9-date-label {
+  color: var(--g9-text-primary);
+}
+
+
+/*# sourceMappingURL=display.css.map */

package/dist/display/display.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./src/display/display.css"],"names":[],"mappings":"AACA;EAAE,mBAAmB;AACrB;;AAGA;EAAE,+CAA+C;AACjD;;AAGA;EAAE;IACE,oBAAoB;EACtB;;EAEA;IACE,yBAAyB;EAC3B;AACF;;AAEA;EACE,sBAAsB;EACtB,aAAa;AACf;;AAEA;EACE,oBAAoB;EACpB,kBAAkB;EAClB,eAAe;EACf,iBAAiB;AACnB;;AAEA;EACE,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,YAAY;EACZ,sDAAsD;EACtD,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE,mDAAmD;AACrD;;AAEA;EACE;IACE,yBAAyB;EAC3B;;EAEA;IACE,2BAA2B;EAC7B;AACF;;AACA;EAEE,gGAAgG;EAChG,kDAAkD;EAClD,kBAAkB;EAClB,MAAM;EACN,SAAS;EACT,WAAW;EACX,QAAQ;AACV;;AAOA;EAJE;IACE,wBAAwB;EAC1B;;EAEA;IACE,2BAA2B;EAC7B;AACF;;AAMA;EAHE,2BAA2B;EAC3B,oBAAoB;EACpB,UAAU;EACV,WAAW;EACX,kBAAkB;EAClB,mBAAmB;EACnB,kBAAkB;EAClB,QAAQ;AACV;;AAMA;EAHE,mBAAmB;EACnB,mBAAmB;EACnB,gBAAgB;EAChB,iBAAiB;EACjB,mBAAmB;EACnB,aAAa;AACf;;AAMA;EAHE,OAAO;AACT;;AAMA;EAHE,mBAAmB;EACnB,mBAAmB;EACnB,eAAe;EACf,aAAa;AACf;;AAMA;EAHE,qBAAqB;EACrB,mBAAmB;EACnB,eAAe;EACf,iBAAiB;AACnB;;AAMA;EAHE,sBAAsB;EACtB,aAAa;AACf;;AAMA;EAHE,6BAA6B;EAC7B,eAAe;AACjB;;AAMA;EAHE,2CAA2C;EAC3C,WAAW;EACX,eAAe;AACjB;;AAMA;EAHE,oBAAoB;EACpB,kBAAkB;EAClB,MAAM;EACN,SAAS;EACT,OAAO;EACP,QAAQ;EACR,gBAAgB;AAClB;;AAMA;EAHE,WAAW;EACX,YAAY;EACZ,gDAAgD;AAClD;;AAMA;EAHE;IACE,4BAA4B;EAC9B;;EAEA;IACE,2BAA2B;EAC7B;AACF;;AAKA;EAFE,oBAAoB;EACpB,kBAAkB;EAClB,MAAM;EACN,SAAS;EACT,OAAO;EACP,QAAQ;EACR,gBAAgB;AAClB;;AAKA;EAFE,sBAAsB;EACtB,YAAY;EACZ,oBAAoB;EACpB,aAAa;AACf;;AAKA;EAFE,aAAa;AACf;;AAKA;EAFE,kDAAkD;AACpD;;AAKA;EAFE,mBAAmB;EACnB,YAAY;AACd;;AAKA;EAFE,mBAAmB;EACnB,mBAAmB;EACnB,eAAe;EACf,YAAY;EACZ,aAAa;AACf;;AAKA;EAFE,kDAAkD;EAClD,mBAAmB;EACnB,WAAW;EACX,YAAY;AACd;;AAKA;EAFE,kBAAkB;EAClB,OAAO;EACP,YAAY;AACd;;AAKA;EAFE,6BAA6B;AAC/B","sourcesContent":["/* Display controls (MAUI G9ActivityIndicator, G9ProgressBar, G9Separator, G9TitleWithLine, G9Shimmer). */\n.g9-activity {\n  border-style: solid;\n}\n\n.g9-activity--running {\n  animation: g9-activity-spin 800ms linear infinite;\n}\n\n@keyframes g9-activity-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.g9-progress {\n  display: flex;\n  flex-direction: column;\n}\n\n.g9-progress__label {\n  align-self: flex-end;\n  margin-bottom: 6px;\n  font-size: 11px;\n  font-weight: bold;\n}\n\n.g9-progress__track {\n  position: relative;\n  overflow: hidden;\n}\n\n.g9-progress__fill {\n  position: relative;\n  height: 100%;\n  overflow: hidden;\n  transition: width 300ms cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.g9-progress__fill--indeterminate {\n  transition: none;\n}\n\n.g9-progress__fill--sweep {\n  animation: g9-progress-sweep 1333ms linear infinite;\n}\n\n@keyframes g9-progress-sweep {\n  from {\n    transform: translateX(0%);\n  }\n  to {\n    transform: translateX(400%);\n  }\n}\n\n.g9-progress__stripes {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: -16px;\n  right: 0;\n  background: repeating-linear-gradient(\n    -60deg,\n    rgba(255, 255, 255, 0.16) 0px,\n    rgba(255, 255, 255, 0.16) 5px,\n    transparent 5px,\n    transparent 16px\n  );\n  animation: g9-progress-stripes 700ms linear infinite;\n}\n\n@keyframes g9-progress-stripes {\n  from {\n    transform: translateX(0px);\n  }\n  to {\n    transform: translateX(16px);\n  }\n}\n\n.g9-progress__segment {\n  position: absolute;\n  top: 50%;\n  width: 3px;\n  height: 3px;\n  margin-top: -1.5px;\n  margin-left: -1.5px;\n  border-radius: 1.5px;\n  background-color: rgba(255, 255, 255, 0.5);\n}\n\n.g9-separator {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 10px;\n  padding-top: 14px;\n  padding-bottom: 8px;\n}\n\n.g9-separator__line {\n  flex: 1;\n}\n\n.g9-separator__title {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 4px;\n}\n\n.g9-separator__text {\n  font-size: 10px;\n  font-weight: bold;\n  letter-spacing: 1.2px;\n  white-space: nowrap;\n}\n\n.g9-title-line {\n  display: flex;\n  flex-direction: column;\n}\n\n.g9-title-line__text {\n  font-size: 16px;\n  color: var(--g9-text-primary);\n}\n\n.g9-title-line__line {\n  height: 1px;\n  margin-top: 6px;\n  background-color: var(--g9-outline-variant);\n}\n\n.g9-shimmer__band-host {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.g9-shimmer__band {\n  width: 100%;\n  height: 100%;\n  animation: g9-shimmer-sweep 1100ms linear infinite;\n}\n\n@keyframes g9-shimmer-sweep {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n\n.g9-skeleton {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.g9-skeleton__rows {\n  display: flex;\n  flex-direction: column;\n  row-gap: 8px;\n  padding: 0px 10px 10px 10px;\n}\n\n.g9-skeleton__rows--form {\n  row-gap: 12px;\n}\n\n.g9-skeleton__bar {\n  background-color: var(--g9-surface-container-high);\n}\n\n.g9-skeleton__field {\n  height: 48px;\n  border-radius: 12px;\n}\n\n.g9-skeleton__row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  height: 52px;\n}\n\n.g9-skeleton__circle {\n  width: 28px;\n  height: 28px;\n  border-radius: 14px;\n  background-color: var(--g9-surface-container-high);\n}\n\n.g9-skeleton__line {\n  flex: 1;\n  height: 16px;\n  border-radius: 8px;\n}\n\n.g9-date-label {\n  color: var(--g9-text-primary);\n}\n"],"sourceRoot":""}

package/dist/display/index.d.ts

@@ -0,0 +1,7 @@
+export { G9ActivityIndicator, type G9ActivityIndicatorProps } from './activity-indicator.js';
+export { formatCultureDateTime, G9CultureDateTimeDisplayMode, type G9CultureDateTimeFormatInput, G9CultureDateTimeLabel, type G9CultureDateTimeLabelProps, } from './culture-date-time-label.js';
+export { clampProgress, G9ProgressBar, type G9ProgressBarProps, progressLabel } from './progress-bar.js';
+export { G9Separator, type G9SeparatorProps, separatorTitleText } from './separator.js';
+export { G9BottomSheetLoadingSkeleton, G9SheetSkeleton, type G9SheetSkeletonProps, G9ShimmerBand, type G9ShimmerBandProps, sheetSkeletonRowCount, } from './shimmer.js';
+export { G9TitleWithLine, type G9TitleWithLineProps } from './title-with-line.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/display/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAC1F,OAAO,EACL,qBAAqB,EACrB,4BAA4B,EAC5B,KAAK,4BAA4B,EACjC,sBAAsB,EACtB,KAAK,2BAA2B,GACjC,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACtG,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACrF,OAAO,EACL,4BAA4B,EAC5B,eAAe,EACf,KAAK,oBAAoB,EACzB,aAAa,EACb,KAAK,kBAAkB,EACvB,qBAAqB,GACtB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/display/index.jsx

@@ -0,0 +1,6 @@
+export { G9ActivityIndicator } from "./activity-indicator.jsx";
+export { G9CultureDateTimeDisplayMode, G9CultureDateTimeLabel, formatCultureDateTime } from "./culture-date-time-label.jsx";
+export { G9ProgressBar, clampProgress, progressLabel } from "./progress-bar.jsx";
+export { G9Separator, separatorTitleText } from "./separator.jsx";
+export { G9BottomSheetLoadingSkeleton, G9SheetSkeleton, G9ShimmerBand, sheetSkeletonRowCount } from "./shimmer.jsx";
+export { G9TitleWithLine } from "./title-with-line.jsx";

package/dist/display/progress-bar.d.ts

@@ -0,0 +1,38 @@
+import './display.css';
+import { type G9ProgressLabelPlacement, type G9ProgressType } from '@g9tm/lynxcontrols-foundation';
+import type { ReactNode } from '@lynx-js/react';
+import { type G9ControlBaseProps } from '../base/control.js';
+/** Props of {@link G9ProgressBar} (MAUI `G9ProgressBar`). */
+export interface G9ProgressBarProps extends G9ControlBaseProps {
+    /** 0–1; only the display is clamped. Changes animate over 300 ms. Default 0. */
+    readonly value?: number;
+    /** Default `var(--g9-surface-variant)`. */
+    readonly trackColor?: string | null;
+    /** Fill and label colour; default the `progressType` colour. Must be a colour literal (it is lightened). */
+    readonly progressColor?: string | null;
+    /** Capped at half the bar height. Default 999 (pill). */
+    readonly cornerRadius?: number;
+    /** Default 10. */
+    readonly barHeight?: number;
+    /** `'above'` and `'end'` both show `NN%` above the bar, end-aligned (as MAUI). Default `'none'`. */
+    readonly labelPlacement?: G9ProgressLabelPlacement;
+    /** A 20 % segment sweeps left to right (≈ 1.33 s) instead of a fill. Default false. */
+    readonly isIndeterminate?: boolean;
+    /** Four dots at 1/5 … 4/5. Default false. */
+    readonly showSegments?: boolean;
+    /** Default `'primary'`. */
+    readonly progressType?: G9ProgressType;
+    /** Freezes the sweep and hides the stripes; disabled behaves as paused. Default false. */
+    readonly isPaused?: boolean;
+}
+/** The progress label: `round(clamp(value) × 100)%`, Latin digits (MAUI formats with .NET, which keeps them). */
+export declare function progressLabel(value: number): string;
+/** Clamps a progress value to [0, 1]; NaN is 0. */
+export declare function clampProgress(value: number): number;
+/**
+ * Linear progress (MAUI `G9ProgressBar`): gradient fill (colour → 24 % lighter), diagonal stripes while running,
+ * optional segments and label, indeterminate sweep. All motion is CSS (transition on the width, keyframes for the
+ * sweep and the stripes); the stored value is never changed.
+ */
+export declare function G9ProgressBar(props: G9ProgressBarProps): ReactNode;
+//# sourceMappingURL=progress-bar.d.ts.map

package/dist/display/progress-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../src/display/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,cAAc,EAGpB,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,KAAK,kBAAkB,EAAgB,MAAM,iBAAiB,CAAC;AAGxE,6DAA6D;AAC7D,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,gFAAgF;IAChF,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,4GAA4G;IAC5G,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,yDAAyD;IACzD,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,kBAAkB;IAClB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,oGAAoG;IACpG,QAAQ,CAAC,cAAc,CAAC,EAAE,wBAAwB,CAAC;IACnD,uFAAuF;IACvF,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACnC,6CAA6C;IAC7C,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,2BAA2B;IAC3B,QAAQ,CAAC,YAAY,CAAC,EAAE,cAAc,CAAC;IACvC,0FAA0F;IAC1F,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,iHAAiH;AACjH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEnD;AAED,mDAAmD;AACnD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGnD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAyClE"}

package/dist/display/progress-bar.jsx

@@ -0,0 +1,57 @@
+import "./display.css";
+import { formatColor, lighten, resolveProgressColor } from "@g9tm/lynxcontrols-foundation";
+import { useG9Control } from "../base/control.jsx";
+import { useG9Theme } from "../provider/hooks.jsx";
+function progressLabel(value) {
+    return `${Math.round(100 * clampProgress(value))}%`;
+}
+function clampProgress(value) {
+    if (!(value > 0)) return 0;
+    return value > 1 ? 1 : value;
+}
+function G9ProgressBar(props) {
+    var _props_barHeight, _props_cornerRadius, _props_progressColor, _props_progressType, _props_labelPlacement, _props_value, _props_trackColor;
+    const control = useG9Control(props, 'g9-progress');
+    const palette = useG9Theme().palette;
+    const height = null != (_props_barHeight = props.barHeight) ? _props_barHeight : 10;
+    const radius = Math.min(null != (_props_cornerRadius = props.cornerRadius) ? _props_cornerRadius : 999, height / 2);
+    const color = null != (_props_progressColor = props.progressColor) ? _props_progressColor : resolveProgressColor(null != (_props_progressType = props.progressType) ? _props_progressType : 'primary', palette);
+    const fill = `linear-gradient(to right, ${color}, ${formatColor(lighten(color, 0.24))})`;
+    const paused = true === props.isPaused || control.disabled;
+    const indeterminate = true === props.isIndeterminate;
+    const placement = null != (_props_labelPlacement = props.labelPlacement) ? _props_labelPlacement : 'none';
+    const value = clampProgress(null != (_props_value = props.value) ? _props_value : 0);
+    return <view className={control.className} {...control.idProps}>
+      {'none' !== placement ? <text className="g9-progress__label" style={{
+        color
+    }}>
+          {progressLabel(value)}
+        </text> : null}
+      <view className="g9-progress__track g9-dir-ltr" style={{
+        height: `${height}px`,
+        borderRadius: `${radius}px`,
+        backgroundColor: null != (_props_trackColor = props.trackColor) ? _props_trackColor : palette.SurfaceVariant
+    }} accessibility-element={true} {...props.accessibilityLabel ? {
+        'accessibility-label': props.accessibilityLabel
+    } : {}} accessibility-value={indeterminate ? '' : progressLabel(value)}>
+        <view className={`g9-progress__fill${indeterminate ? ' g9-progress__fill--indeterminate' : ''}${indeterminate && !paused ? ' g9-progress__fill--sweep' : ''}`} style={{
+        width: indeterminate ? '20%' : `${100 * value}%`,
+        borderRadius: `${radius}px`,
+        background: fill
+    }}>
+          {!paused ? <view className="g9-progress__stripes"/> : null}
+        </view>
+        {props.showSegments ? [
+        1,
+        2,
+        3,
+        4
+    ].map((i)=><view key={i} className="g9-progress__segment" style={{
+            left: `${20 * i}%`
+        }}/>) : null}
+      </view>
+    </view>;
+}
+export { G9ProgressBar, clampProgress, progressLabel };
+
+//# sourceMappingURL=progress-bar.jsx.map