@multiplatform.one/forms 7.77.1 → 7.78.0

package/src/fields/Duration/durationMath.spec.ts

@@ -2,10 +2,13 @@ import { describe, expect, it } from "vitest";
 import { sizeRecipeForToken } from "@multiplatform.one/theme";
 import {
   durationSegmentWidth,
+  durationToWheelDate,
+  formatDurationParts,
   normalizeSeconds,
   parseDurationText,
   partsToSeconds,
   secondsToParts,
+  wheelDateToDuration,
 } from "./durationMath";
 
 describe("durationMath", () => {
@@ -64,4 +67,44 @@ describe("durationMath", () => {
     expect(durationSegmentWidth("$2", 2)).not.toBe(durationSegmentWidth("$6", 2));
     expect(durationSegmentWidth("$2", 2)).toBeLessThan(durationSegmentWidth("$4", 2));
   });
+
+  describe("countdown wheel (FZ-8111)", () => {
+    const at = (h: number, m: number) => {
+      const d = new Date(2026, 9, 29);
+      d.setHours(h, m, 0, 0);
+      return d;
+    };
+
+    it("reads hours and minutes within the day onto the wheel", () => {
+      const date = durationToWheelDate(3720);
+      expect([date.getHours(), date.getMinutes(), date.getSeconds()]).toEqual([1, 2, 0]);
+      const late = durationToWheelDate(23 * 3600 + 59 * 60);
+      expect([late.getHours(), late.getMinutes()]).toEqual([23, 59]);
+    });
+
+    it("round-trips every wheel position back to the same seconds", () => {
+      for (const seconds of [0, 60, 900, 3720, 9000, 86340]) {
+        expect(wheelDateToDuration(durationToWheelDate(seconds), 0)).toBe(seconds);
+      }
+    });
+
+    it("sets seconds from a wheel pick", () => {
+      expect(wheelDateToDuration(at(2, 30), 0)).toBe(9000);
+      expect(wheelDateToDuration(at(0, 15), 3720)).toBe(900);
+    });
+
+    it("carries whole days and stray seconds the wheel cannot show", () => {
+      expect(wheelDateToDuration(at(2, 30), 86400 + 3600 + 7)).toBe(86400 + 9000 + 7);
+      const wheel = durationToWheelDate(90000);
+      expect([wheel.getHours(), wheel.getMinutes()]).toEqual([1, 0]);
+    });
+
+    it("formats the trigger text with or without days", () => {
+      const units = { d: "d", h: "h", m: "m" };
+      expect(formatDurationParts(secondsToParts(3720, true), true, units)).toBe("1 h 2 m");
+      expect(formatDurationParts(secondsToParts(90000, true), true, units)).toBe("25 h 0 m");
+      expect(formatDurationParts(secondsToParts(93784, false), false, units)).toBe("1 d 2 h 3 m");
+      expect(formatDurationParts(secondsToParts(3720, false), false, units)).toBe("1 h 2 m");
+    });
+  });
 });

package/src/fields/Duration/durationMath.ts

@@ -76,3 +76,34 @@ export function durationSegmentWidth(sizeToken: string, digits: number): number
   const recipe = sizeRecipeForToken(sizeToken);
   return recipe.fontSize * digits;
 }
+
+const DAY = 86400;
+
+/** The countdown wheel's reading of a duration: hours and minutes within one day, on today's date. */
+export function durationToWheelDate(total: number): Date {
+  const s = normalizeSeconds(total) % DAY;
+  const date = new Date();
+  date.setHours(Math.floor(s / 3600), Math.floor((s % 3600) / 60), 0, 0);
+  return date;
+}
+
+/**
+ * A wheel pick back to seconds. The wheel spans 0 h 0 m to 23 h 59 m, so the
+ * whole days and the stray seconds of the previous value carry over untouched.
+ */
+export function wheelDateToDuration(picked: Date, previous: number): number {
+  const prev = normalizeSeconds(previous);
+  return (
+    Math.floor(prev / DAY) * DAY + picked.getHours() * 3600 + picked.getMinutes() * 60 + (prev % 60)
+  );
+}
+
+/** "1 h 2 m", "1 d 2 h 3 m": the wheel trigger's text, units from the caller. */
+export function formatDurationParts(
+  parts: DurationParts,
+  hideDays: boolean,
+  units: { d: string; h: string; m: string },
+): string {
+  const head = hideDays || parts.days === 0 ? [] : [`${parts.days} ${units.d}`];
+  return [...head, `${parts.hours} ${units.h}`, `${parts.minutes} ${units.m}`].join(" ");
+}

package/src/fields/Duration/durationWheelTypes.ts

@@ -0,0 +1,18 @@
+import type { KnobProps } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import type { SizeTokens } from "tamagui";
+
+export interface DurationWheelFieldProps {
+  seconds: number;
+  onChange: (seconds: number) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  foldDays: boolean;
+  clockIcon?: ReactNode | null;
+  hasError?: boolean;
+  id?: string;
+  hasLabel?: boolean;
+  required?: boolean;
+  size?: SizeTokens;
+  knobProps: KnobProps;
+}

package/src/fields/Duration/index.tsx

@@ -5,7 +5,7 @@ import type { ReactNode } from "react";
 import { useCallback, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Text, XStack, YStack, isWeb } from "tamagui";
-import { Button } from "../../Button";
+import { Chip } from "../../Chip";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
@@ -20,22 +20,29 @@ import {
   useResolvedValidators,
 } from "../../shared/utils";
 import type { AnyFormApi } from "../../types";
+import { DurationWheelField, durationWheelAvailable } from "./DurationWheel";
 import {
   durationSegmentWidth,
+  durationToWheelDate,
+  formatDurationParts,
   normalizeSeconds,
   parseDurationText,
   partsToSeconds,
   secondsToParts,
+  wheelDateToDuration,
   type DurationParts,
 } from "./durationMath";
 
 export type { DurationParts };
 export {
   durationSegmentWidth,
+  durationToWheelDate,
+  formatDurationParts,
   normalizeSeconds,
   parseDurationText,
   partsToSeconds,
   secondsToParts,
+  wheelDateToDuration,
 };
 
 export interface DurationPreset {
@@ -374,16 +381,15 @@ function DurationPresets({
       {presets.map((preset) => {
         const selected = seconds === preset.seconds;
         return (
-          <Button
-            key={preset.seconds}
-            size={DURATION_PRESET_SIZE}
-            outlined={!selected}
-            accent={selected}
-            data-duration-preset={preset.label}
-            onPress={() => onChange(preset.seconds)}
-          >
-            {preset.label}
-          </Button>
+          <XStack key={preset.seconds} data-duration-preset={preset.label}>
+            <Chip
+              size={DURATION_PRESET_SIZE}
+              selected={selected}
+              onPress={() => onChange(preset.seconds)}
+            >
+              {preset.label}
+            </Chip>
+          </XStack>
         );
       })}
     </XStack>
@@ -425,6 +431,11 @@ export interface DurationProps {
   clockIcon?: ReactNode | null;
   /** When true, renders a skeleton placeholder instead of the duration picker */
   skeleton?: boolean;
+  /**
+   * On iOS and Android a tap opens the system hours/minutes wheel (LC-266).
+   * `false` keeps the typed segments there too. Web always types.
+   */
+  native?: boolean;
 }
 
 export function Duration({
@@ -450,6 +461,7 @@ export function Duration({
   placeholder = t("Select duration"),
   clockIcon,
   skeleton,
+  native,
 }: DurationProps) {
   const hydrationTouch = useTouchSurface();
   const { resolvedForm, knobProps, id } = useFormField({
@@ -489,24 +501,43 @@ export function Duration({
     );
   }
 
+  const wheel = native !== false && !showSeconds && durationWheelAvailable();
+
   const fieldBody = (current: number, onValueChange: (s: number) => void, hasError?: boolean) => (
     <YStack {...knobProps.gap}>
-      <DurationControl
-        seconds={current}
-        onChange={onValueChange}
-        disabled={disabled}
-        readOnly={readOnly}
-        hideDays={hideDays}
-        showSeconds={showSeconds}
-        clockIcon={clockIcon}
-        hasError={hasError}
-        id={id}
-        hasLabel={Boolean(label)}
-        placeholder={placeholder}
-        required={required}
-        size={size}
-        knobProps={knobProps}
-      />
+      {wheel ? (
+        <DurationWheelField
+          seconds={current}
+          onChange={onValueChange}
+          disabled={disabled}
+          readOnly={readOnly}
+          foldDays={hideDays}
+          clockIcon={clockIcon}
+          hasError={hasError}
+          id={id}
+          hasLabel={Boolean(label)}
+          required={required}
+          size={size}
+          knobProps={knobProps}
+        />
+      ) : (
+        <DurationControl
+          seconds={current}
+          onChange={onValueChange}
+          disabled={disabled}
+          readOnly={readOnly}
+          hideDays={hideDays}
+          showSeconds={showSeconds}
+          clockIcon={clockIcon}
+          hasError={hasError}
+          id={id}
+          hasLabel={Boolean(label)}
+          placeholder={placeholder}
+          required={required}
+          size={size}
+          knobProps={knobProps}
+        />
+      )}
       {readOnly || disabled || inTableCell ? null : (
         <DurationPresets
           seconds={current}

package/src/fields/nativeDateTime/OsDateTimeSheet.countdown.native.spec.tsx

@@ -0,0 +1,121 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { OsDateTimeSheet } from "./OsDateTimeSheet";
+import { DATE_PICKER_WHEEL_HEIGHT } from "./sheetKeyboard";
+
+const os = vi.hoisted(() => ({ name: "ios" as "ios" | "android" }));
+const seen = vi.hoisted(() => ({ props: [] as Record<string, unknown>[] }));
+
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }),
+}));
+
+vi.mock("@multiplatform.one/platform", async (importOriginal) => {
+  const actual = (await importOriginal()) as Record<string, unknown>;
+  const real = actual.platform as Record<string, unknown>;
+  return {
+    ...actual,
+    platform: new Proxy(
+      {},
+      {
+        get(_target, prop) {
+          if (prop === "isIos") return os.name === "ios";
+          if (prop === "isAndroid") return os.name === "android";
+          return real[prop as string];
+        },
+      },
+    ),
+  };
+});
+
+vi.mock("./dateTimePickerLoader", () => ({
+  loadDateTimePicker: () => (props: Record<string, unknown>) => {
+    seen.props.push(props);
+    return <div data-testid="os-picker" />;
+  },
+}));
+
+const at = (h: number, m: number) => {
+  const d = new Date(2026, 9, 29);
+  d.setHours(h, m, 0, 0);
+  return d;
+};
+
+describe("OsDateTimeSheet countdown (FZ-8111)", () => {
+  it("opens the iOS countdown-timer wheel in the app's scheme", () => {
+    os.name = "ios";
+    seen.props = [];
+    renderWithProviders(
+      <OsDateTimeSheet
+        open
+        mode="countdown"
+        value={at(1, 2)}
+        onCancel={vi.fn()}
+        onConfirm={vi.fn()}
+      />,
+    );
+    const props = seen.props.at(-1)!;
+    expect(props.mode).toBe("countdown");
+    expect(props.display).toBe("spinner");
+    expect(props.themeVariant).toBe("light");
+    expect((props.value as Date).getHours()).toBe(1);
+    expect((props.value as Date).getMinutes()).toBe(2);
+    expect((props.style as { height: number }).height).toBe(DATE_PICKER_WHEEL_HEIGHT);
+  });
+
+  it("confirms the wheel's hours and minutes", () => {
+    os.name = "ios";
+    seen.props = [];
+    const onConfirm = vi.fn();
+    const onCancel = vi.fn();
+    const result = renderWithProviders(
+      <OsDateTimeSheet
+        open
+        mode="countdown"
+        value={at(1, 2)}
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+      />,
+    );
+    fireEvent.click(result.getByRole("button", { name: "Done" }));
+    expect(onConfirm).toHaveBeenCalledOnce();
+    const picked = onConfirm.mock.calls[0]![0] as Date;
+    expect([picked.getHours(), picked.getMinutes()]).toEqual([1, 2]);
+    fireEvent.click(result.getByRole("button", { name: "Cancel" }));
+    expect(onCancel).toHaveBeenCalledOnce();
+  });
+
+  it("opens Android's 24-hour spinner, never the AM/PM clock dial", () => {
+    os.name = "android";
+    seen.props = [];
+    renderWithProviders(
+      <OsDateTimeSheet
+        open
+        mode="countdown"
+        value={at(2, 30)}
+        onCancel={vi.fn()}
+        onConfirm={vi.fn()}
+      />,
+    );
+    const props = seen.props.at(-1)!;
+    expect(props.mode).toBe("time");
+    expect(props.display).toBe("spinner");
+    expect(props.is24Hour).toBe(true);
+    os.name = "ios";
+  });
+
+  it("leaves the Android date dialog as it was", () => {
+    os.name = "android";
+    seen.props = [];
+    renderWithProviders(
+      <OsDateTimeSheet open mode="date" value={at(0, 0)} onCancel={vi.fn()} onConfirm={vi.fn()} />,
+    );
+    const props = seen.props.at(-1)!;
+    expect(props.mode).toBe("date");
+    expect(props.display).toBe("default");
+    expect(props.is24Hour).toBeUndefined();
+    os.name = "ios";
+  });
+});

package/src/fields/nativeDateTime/OsDateTimeSheet.spec.ts

@@ -9,4 +9,8 @@ describe("osDateTimeIosDisplay", () => {
   it("keeps the time wheel", () => {
     expect(osDateTimeIosDisplay("time")).toBe("spinner");
   });
+
+  it("keeps the wheel for a countdown (FZ-8111)", () => {
+    expect(osDateTimeIosDisplay("countdown")).toBe("spinner");
+  });
 });

package/src/fields/nativeDateTime/OsDateTimeSheet.tsx

@@ -33,7 +33,7 @@ import { osDateTimeIosDisplay } from "./osDateTimeIosDisplay";
 import { datePickerHeight, dateSheetBottomPadding, dateSheetMaxHeight } from "./sheetKeyboard";
 import { useKeyboardInset } from "../../shared/useKeyboardInset";
 
-export type OsDateTimeMode = "date" | "time" | "datetime";
+export type OsDateTimeMode = "date" | "time" | "datetime" | "countdown";
 
 export type OsDateTimeSheetProps = {
   open: boolean;
@@ -74,8 +74,12 @@ export function OsDateTimeSheet({
   const maxHeight = dateSheetMaxHeight(windowHeight, keyboardInset, topInset);
   const [showTimePicker, setShowTimePicker] = useState(false);
   const [temp, setTemp] = useState(value);
-  const pickerMode: "date" | "time" =
-    mode === "time" || (mode === "datetime" && showTimePicker) ? "time" : "date";
+  const pickerMode: "date" | "time" | "countdown" =
+    mode === "countdown"
+      ? "countdown"
+      : mode === "time" || (mode === "datetime" && showTimePicker)
+        ? "time"
+        : "date";
   const iosDisplay = osDateTimeIosDisplay(pickerMode);
 
   const reset = useCallback(() => {
@@ -182,11 +186,12 @@ export function OsDateTimeSheet({
     return (
       <DateTimePicker
         value={temp}
-        mode={pickerMode}
-        display="default"
+        mode={pickerMode === "countdown" ? "time" : pickerMode}
+        display={pickerMode === "countdown" ? "spinner" : "default"}
+        is24Hour={pickerMode === "countdown" ? true : undefined}
         onChange={handleAndroidChange}
-        minimumDate={mode !== "time" ? minDate : undefined}
-        maximumDate={mode !== "time" ? maxDate : undefined}
+        minimumDate={mode === "date" || mode === "datetime" ? minDate : undefined}
+        maximumDate={mode === "date" || mode === "datetime" ? maxDate : undefined}
       />
     );
   }
@@ -242,8 +247,8 @@ export function OsDateTimeSheet({
                 themeVariant={themeVariant}
                 accentColor={accentColor}
                 onChange={handleIOSChange}
-                minimumDate={mode !== "time" ? minDate : undefined}
-                maximumDate={mode !== "time" ? maxDate : undefined}
+                minimumDate={mode === "date" || mode === "datetime" ? minDate : undefined}
+                maximumDate={mode === "date" || mode === "datetime" ? maxDate : undefined}
                 style={{ width: "100%", height: datePickerHeight(pickerMode, maxHeight) }}
               />
             </YStack>

package/src/fields/nativeDateTime/osDateTimeIosDisplay.ts

@@ -1,4 +1,4 @@
-/** iOS date is the inline calendar; time keeps the wheel users expect. */
-export function osDateTimeIosDisplay(mode: "date" | "time"): "inline" | "spinner" {
-  return mode === "time" ? "spinner" : "inline";
+/** iOS date is the inline calendar; time and countdown keep the wheel users expect. */
+export function osDateTimeIosDisplay(mode: "date" | "time" | "countdown"): "inline" | "spinner" {
+  return mode === "date" ? "inline" : "spinner";
 }

package/src/fields/nativeDateTime/sheetKeyboard.spec.ts

@@ -10,6 +10,7 @@ import {
   dateSheetBottomPadding,
   dateSheetMaxHeight,
   DATE_PICKER_CALENDAR_HEIGHT,
+  DATE_PICKER_WHEEL_HEIGHT,
   DATE_SHEET_BACKDROP_STRIP,
   DATE_SHEET_MIN_HEIGHT,
 } from "./sheetKeyboard";
@@ -49,6 +50,11 @@ describe("datePickerHeight", () => {
     expect(height).toBeLessThan(DATE_PICKER_CALENDAR_HEIGHT);
     expect(height).toBeLessThanOrEqual(maxHeight);
   });
+
+  it("gives the countdown the wheel height, not the calendar's (FZ-8111)", () => {
+    expect(datePickerHeight("countdown", 700)).toBe(DATE_PICKER_WHEEL_HEIGHT);
+    expect(datePickerHeight("countdown", 700)).toBe(datePickerHeight("time", 700));
+  });
 });
 
 describe("dateSheetBottomPadding", () => {

package/src/fields/nativeDateTime/sheetKeyboard.ts

@@ -39,7 +39,7 @@ export function dateSheetBottomPadding(keyboardInset: number, isIos: boolean): n
   return isIos ? 24 : 16;
 }
 
-export function datePickerHeight(mode: "date" | "time", maxHeight: number): number {
-  const preferred = mode === "time" ? DATE_PICKER_WHEEL_HEIGHT : DATE_PICKER_CALENDAR_HEIGHT;
+export function datePickerHeight(mode: "date" | "time" | "countdown", maxHeight: number): number {
+  const preferred = mode === "date" ? DATE_PICKER_CALENDAR_HEIGHT : DATE_PICKER_WHEEL_HEIGHT;
   return Math.min(preferred, Math.max(minPickerHeight, maxHeight - DATE_SHEET_CHROME));
 }

package/src/index.ts

@@ -117,7 +117,6 @@ export {
   IconButton,
   IconButtonGroup,
   iconButtonGlyphPx,
-  ICON_BUTTON_GLASS_MERGE_PX,
   ICON_BUTTON_GLYPH_PX,
   ICON_BUTTON_NEUTRAL_GLYPH_PX,
   ICON_BUTTON_PRESS_OPACITY,

package/types/Button/IconButtonGroup.d.ts

@@ -1,23 +1,18 @@
 import { type ReactNode } from "react";
 import { type XStackProps } from "tamagui";
-/**
- * LC-176: how far apart two Liquid Glass circles may sit and still merge. Half
- * the 44pt target, so neighbours on the bar's gap always join.
- */
-export declare const ICON_BUTTON_GLASS_MERGE_PX = 22;
 export interface IconButtonGroupProps extends XStackProps {
-    /** Over imagery or video: the group shares one material capsule. */
+    /** Over imagery or video: the group shares one dark capsule. */
     plate?: "media";
     children?: ReactNode;
 }
 /**
  * LC-176: icon buttons that sit side by side. Grounds merge, they never stand
- * as a row of separate circles: on iOS 26 the bar's group is one Liquid Glass
- * capsule, as the system draws a bar's item group (merging each circle through
- * the glass container left a waist between them, FZ-8158); over media the
- * group shares one material capsule; a bare row stays bare. A lone button
- * keeps its own circle, and a bar group with no icon button in it paints no
- * capsule (FZ-8494).
+ * as a row of separate circles: on iOS 26 the bar's group sits in one system
+ * Liquid Glass capsule, as the system draws a bar's item group (merging each
+ * circle through the glass container left a waist between them, FZ-8158), so
+ * press and merge are the system's; over media the group shares one dark
+ * capsule; a bare row stays bare. A lone button keeps its own circle, and a
+ * bar group with no icon button in it paints no capsule (FZ-8494).
  */
 export declare function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=IconButtonGroup.d.ts.map

package/types/Button/IconButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButtonGroup.d.ts","sourceRoot":"","sources":["../../src/Button/IconButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAA8B,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAMvE;;;GAGG;AACH,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAE7C,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CA0GjF"}
+{"version":3,"file":"IconButtonGroup.d.ts","sourceRoot":"","sources":["../../src/Button/IconButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzF,OAAO,EAA4C,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAmBrF,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CAyIjF"}

package/types/Button/circleGlyph.d.ts

@@ -4,4 +4,16 @@
  * ratio, never a small glyph lost in a big plate.
  */
 export declare const ICON_BUTTON_CIRCLE_GLYPH_RATIO = 0.58;
+/**
+ * LC-176: Phosphor bold's stem is 0.12 of its ink, an SF Symbols bold plus's
+ * 0.18 (measured at 17 and 24pt). An outline stroke this wide, in the 256-unit
+ * grid, brings a bold glyph to SF semibold-bold (0.154); a wider one closes
+ * Phosphor bold's 16-unit counters (the trash lid, copy's overlap).
+ */
+export declare const GLYPH_BOLD_STROKE_UNITS = 8;
+export declare function boldStroke(weight: "regular" | "bold", color?: string): {
+    stroke: string;
+    strokeWidth: number;
+    strokeLinejoin: "round";
+} | undefined;
 //# sourceMappingURL=circleGlyph.d.ts.map

package/types/Button/circleGlyph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"circleGlyph.d.ts","sourceRoot":"","sources":["../../src/Button/circleGlyph.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,OAAO,CAAC"}
+{"version":3,"file":"circleGlyph.d.ts","sourceRoot":"","sources":["../../src/Button/circleGlyph.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,OAAO,CAAC;AAEnD;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAEzC,wBAAgB,UAAU,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,EAAE,KAAK,SAAiB;;;;cAQ5E"}

package/types/Button/glass.d.ts

@@ -2,9 +2,10 @@ import type { ComponentType, ReactNode } from "react";
 /** The slice of expo-glass-effect's `GlassView` an icon button draws. */
 export type GlassViewComponent = ComponentType<{
     style?: unknown;
-    glassEffectStyle?: "regular" | "clear";
+    glassEffectStyle?: "regular" | "clear" | "none";
     isInteractive?: boolean;
-    pointerEvents?: "none" | "auto" | "box-none" | "box-only";
+    colorScheme?: "auto" | "light" | "dark";
+    children?: ReactNode;
 }>;
 /** The slice of expo-glass-effect's `GlassContainer` an icon button group draws. */
 export type GlassContainerComponent = ComponentType<{
@@ -14,16 +15,11 @@ export type GlassContainerComponent = ComponentType<{
 }>;
 export { isAppleTouchWeb } from "./webGlass";
 /**
- * LC-176: the iOS 26 Liquid Glass material an icon button floats on in a bar.
- * Native iOS draws it from expo-glass-effect (`glass.native.ts`; Android
- * probes null). On the web only iOS Safari takes the glass face (Clay on
- * rv_3bb3f1f65d6b981f: "Is there a way to have the buttons at the bottom be
- * liquid glass if it's an iPhone"); every other browser draws the bare glyph.
+ * LC-176: the system Liquid Glass an icon button sits in on a bar. Only native
+ * iOS 26 has it, from expo-glass-effect (`glass.native.ts`; Android probes
+ * null), so the web draws the plain glyph.
  */
 export declare function loadGlassView(): GlassViewComponent | null;
-/**
- * LC-176: the container that merges neighbouring Liquid Glass circles into one
- * shape, as iOS 26 groups bar buttons. Only iOS has it.
- */
+/** LC-176: the system's Liquid Glass container. Only iOS has it. */
 export declare function loadGlassContainer(): GlassContainerComponent | null;
 //# sourceMappingURL=glass.d.ts.map

package/types/Button/glass.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glass.d.ts","sourceRoot":"","sources":["../../src/Button/glass.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,yEAAyE;AACzE,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;CAC3D,CAAC,CAAC;AAEH,oFAAoF;AACpF,MAAM,MAAM,uBAAuB,GAAG,aAAa,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC,CAAC;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C;;;;;;GAMG;AACH,wBAAgB,aAAa,IAAI,kBAAkB,GAAG,IAAI,CAEzD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,uBAAuB,GAAG,IAAI,CAEnE"}
+{"version":3,"file":"glass.d.ts","sourceRoot":"","sources":["../../src/Button/glass.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,yEAAyE;AACzE,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC,CAAC;AAEH,oFAAoF;AACpF,MAAM,MAAM,uBAAuB,GAAG,aAAa,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC,CAAC;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAU7C;;;;GAIG;AACH,wBAAgB,aAAa,IAAI,kBAAkB,GAAG,IAAI,CAEzD;AAED,oEAAoE;AACpE,wBAAgB,kBAAkB,IAAI,uBAAuB,GAAG,IAAI,CAEnE"}

package/types/Button/glass.native.d.ts

@@ -1,17 +1,29 @@
 import type { GlassContainerComponent, GlassViewComponent } from "./glass";
 export type { GlassContainerComponent, GlassViewComponent } from "./glass";
+export interface GlassSources {
+    core: () => {
+        requireOptionalNativeModule?: (moduleName: string) => unknown;
+    };
+    glass: () => {
+        GlassView?: GlassViewComponent;
+        GlassContainer?: GlassContainerComponent;
+        isLiquidGlassAvailable?: () => boolean;
+        isGlassEffectAPIAvailable?: () => boolean;
+    };
+}
+export interface SystemGlass {
+    view: GlassViewComponent;
+    container: GlassContainerComponent | null;
+}
 /**
- * LC-176: expo-glass-effect's `GlassView`, when this binary links its native
- * module and the OS draws Liquid Glass (iOS 26+); Android never links it. The module is probed through
- * `requireOptionalNativeModule` BEFORE the guarded `require`, so an OTA on a
- * binary built without it, or an older iOS, falls back to the bare tinted
- * glyph instead of throwing mid-render (the `nativePickerLoader.ts` contract).
+ * LC-176: expo-glass-effect's views, when this binary links the native module
+ * and the OS draws Liquid Glass (iOS 26+); Android never links it. The module
+ * is probed through `requireOptionalNativeModule` BEFORE the guarded `require`,
+ * so an OTA on a binary built without it, or an older iOS, falls back to the
+ * bare tinted glyph instead of throwing mid-render (the `nativePickerLoader.ts`
+ * contract). A binary whose module predates the container keeps its capsule.
  */
+export declare function resolveSystemGlass(sources?: GlassSources): SystemGlass | null;
 export declare function loadGlassView(): GlassViewComponent | null;
-/**
- * LC-176: expo-glass-effect's `GlassContainer`, present exactly when
- * `loadGlassView` found Liquid Glass. A binary whose module predates the
- * container keeps separate circles rather than throwing.
- */
 export declare function loadGlassContainer(): GlassContainerComponent | null;
 //# sourceMappingURL=glass.native.d.ts.map

package/types/Button/glass.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glass.native.d.ts","sourceRoot":"","sources":["../../src/Button/glass.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE3E,YAAY,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAK3E;;;;;;GAMG;AACH,wBAAgB,aAAa,IAAI,kBAAkB,GAAG,IAAI,CA0BzD;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,uBAAuB,GAAG,IAAI,CAGnE"}
+{"version":3,"file":"glass.native.d.ts","sourceRoot":"","sources":["../../src/Button/glass.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE3E,YAAY,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE3E,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM;QAAE,2BAA2B,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAA;KAAE,CAAC;IAC9E,KAAK,EAAE,MAAM;QACX,SAAS,CAAC,EAAE,kBAAkB,CAAC;QAC/B,cAAc,CAAC,EAAE,uBAAuB,CAAC;QACzC,sBAAsB,CAAC,EAAE,MAAM,OAAO,CAAC;QACvC,yBAAyB,CAAC,EAAE,MAAM,OAAO,CAAC;KAC3C,CAAC;CACH;AAqBD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,kBAAkB,CAAC;IACzB,SAAS,EAAE,uBAAuB,GAAG,IAAI,CAAC;CAC3C;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,YAA0B,GAAG,WAAW,GAAG,IAAI,CAU1F;AASD,wBAAgB,aAAa,IAAI,kBAAkB,GAAG,IAAI,CAEzD;AAED,wBAAgB,kBAAkB,IAAI,uBAAuB,GAAG,IAAI,CAEnE"}