@multiplatform.one/forms 7.65.0 → 7.65.2

package/src/InputParts/index.tsx

@@ -11,7 +11,7 @@ import {
   type ReactNode,
 } from "react";
 import type { ComponentProps, Ref, RefObject } from "react";
-import { Pressable as RNPressable } from "react-native";
+import { Platform, Pressable as RNPressable } from "react-native";
 import type {
   ColorTokens,
   FontSizeTokens,
@@ -57,7 +57,7 @@ import {
   type RecipeFamilyName,
 } from "@multiplatform.one/theme";
 import { formButtonColors, formCommonColors, formInputColors } from "../shared/colorRamps";
-import { useControlGrouped } from "../shared/groupContext";
+import { useControlGroupVertical, useControlGrouped } from "../shared/groupContext";
 import { nativeAutoFocus } from "../shared/nativeAutoFocus";
 import { pressSlopProps } from "../shared/pressSlopProps";
 import { useIsInTableCell } from "../shared/tableCellContext";
@@ -382,6 +382,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
   const hydrationTouch = useTouchSurface();
   const { knobProps, control, disabledState } = useResolvedKnobs();
   const grouped = useControlGrouped();
+  const groupedVertical = useControlGroupVertical();
   const inTableCell = useIsInTableCell();
   // Native Pressable owns onPress; do not also pass it to XGroup (double-fire).
   const framePressProps = isWeb ? { onPress, disabled } : { disabled };
@@ -550,7 +551,9 @@ const InputGroupImpl = InputGroupFrame.styleable<{
         borderWidth={0}
         borderRadius={0}
         backgroundColor="transparent"
-        flex={1}
+        {...(groupedVertical
+          ? { flexGrow: 0, flexShrink: 0, flexBasis: "auto", height: controlFragment.height }
+          : { flex: 1 })}
         elevation={undefined}
         {...props}
         {...passthroughSizeProps}
@@ -717,6 +720,62 @@ const InputFrame = styled(TInput, {
   } as const,
 });
 
+const InputPlaceholderText = styled(Text, {
+  context: InputContext,
+  variants: {
+    touch: { true: {}, false: {} },
+    size: {
+      ...(recipeFamilies.control.typeVariants ?? sizeRecipeTypeVariants),
+      "...size": sizeRecipeTypeFallback,
+    },
+  } as const,
+});
+
+/**
+ * FZ-8144: an iOS update moved UIKit's own placeholder 3pt below the typed
+ * line on Clay's phone, while RN Text stayed put. On iOS a single-line Area
+ * paints its visible placeholder as Text centred like the typed line, and
+ * keeps the native one transparent so VoiceOver still reads it. Multiline
+ * stays native: RN draws that placeholder itself, not UIKit.
+ */
+export function areaPaintsPlaceholderOverlay(multiline?: boolean): boolean {
+  return !isWeb && Platform.OS === "ios" && !multiline;
+}
+
+const PLACEHOLDER_FONT_PROPS = [
+  "fontSize",
+  "fontFamily",
+  "fontWeight",
+  "fontStyle",
+  "letterSpacing",
+  "textAlign",
+  "writingDirection",
+  "allowFontScaling",
+  "maxFontSizeMultiplier",
+] as const;
+
+const PLACEHOLDER_INSET_PROPS = [
+  "padding",
+  "paddingHorizontal",
+  "paddingLeft",
+  "paddingRight",
+  "paddingStart",
+  "paddingEnd",
+] as const;
+
+function pickDefined(
+  source: Record<string, unknown>,
+  keys: readonly string[],
+): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const key of keys) if (source[key] !== undefined) out[key] = source[key];
+  return out;
+}
+
+function textOf(value: unknown): string {
+  return value == null ? "" : String(value);
+}
+
 const InputAreaImpl = InputFrame.styleable<{
   secureTextEntry?: boolean;
   keyboardType?: InputKeyboardType;
@@ -781,6 +840,27 @@ const InputAreaImpl = InputFrame.styleable<{
   // pins width on Box, not Area, so it keeps the grow wrapper.
   const hugWidth = flexProp === 0 || typeof widthProp === "number";
 
+  const {
+    placeholder,
+    placeholderTextColor: placeholderTextColorProp,
+    value,
+    defaultValue,
+    multiline,
+  } = props as {
+    placeholder?: string;
+    placeholderTextColor?: string;
+    value?: unknown;
+    defaultValue?: unknown;
+    multiline?: boolean;
+  };
+  const placeholderColor =
+    placeholderTextColorProp ?? theme.placeholderColor?.val ?? "$placeholderColor";
+  const overlay = areaPaintsPlaceholderOverlay(multiline);
+  const [liveText, setLiveText] = useState(() => textOf(defaultValue));
+  const shownText = value !== undefined ? textOf(value) : liveText;
+  const showOverlay = overlay && Boolean(placeholder) && shownText === "";
+  const fontProps = props as Record<string, unknown>;
+
   return (
     // LC-06/LC-10 (UX-P12, FZ-7853): in a table cell and in a form column
     // alike, the flex wrapper and the raw input must be allowed to shrink
@@ -810,7 +890,6 @@ const InputAreaImpl = InputFrame.styleable<{
         size={size}
         {...knobProps.controlType}
         color={knobProps.textAccentColor}
-        placeholderTextColor={theme.placeholderColor?.val ?? "$placeholderColor"}
         {...(inTableCell || !hugWidth ? { width: "100%" as const, minWidth: 0 } : undefined)}
         {...knobProps.body}
         type={secureTextEntry ? "password" : props.type}
@@ -834,6 +913,7 @@ const InputAreaImpl = InputFrame.styleable<{
         }
         {...props}
         {...nativeAutoFocus(props as { autoFocus?: boolean; autoFocusNative?: boolean })}
+        placeholderTextColor={overlay ? "transparent" : placeholderColor}
         {...(flexProp != null ? { flex: flexProp } : undefined)}
         {...(widthProp != null
           ? { width: widthProp, minWidth: minWidthProp, maxWidth: maxWidthProp }
@@ -862,18 +942,52 @@ const InputAreaImpl = InputFrame.styleable<{
         }}
         onBlur={(e: any) => {
           setFocused(false);
+          if (overlay && typeof e?.nativeEvent?.text === "string") {
+            setLiveText(e.nativeEvent.text);
+          }
           (onBlurProp as any)?.(e);
         }}
         onChange={
-          onChangeText || onChangeProp
+          onChangeText || onChangeProp || overlay
             ? (e: any) => {
                 const text = e.target?.value ?? e.nativeEvent?.text ?? "";
+                if (overlay) setLiveText(textOf(text));
                 onChangeText?.(text);
                 onChangeProp?.(e);
               }
             : undefined
         }
       />
+      {showOverlay ? (
+        <View
+          aria-hidden
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          position="absolute"
+          top={0}
+          bottom={0}
+          left={0}
+          right={0}
+          justifyContent="center"
+          {...pickDefined(fontProps, PLACEHOLDER_INSET_PROPS)}
+          testID="mp-placeholder-overlay"
+        >
+          <InputPlaceholderText
+            touch={hydrationTouch}
+            size={size}
+            {...knobProps.controlType}
+            {...knobProps.body}
+            {...pickDefined(fontProps, PLACEHOLDER_FONT_PROPS)}
+            color={placeholderColor as ColorTokens}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            accessible={false}
+          >
+            {placeholder}
+          </InputPlaceholderText>
+        </View>
+      ) : null}
     </View>
   );
 });

package/src/InputParts/placeholderOverlay.native.spec.tsx

@@ -0,0 +1,229 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent } from "@testing-library/react";
+import { useState } from "react";
+import type { ColorTokens } from "tamagui";
+import { Platform } from "react-native";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Input, areaPaintsPlaceholderOverlay } from "./index";
+
+const env = vi.hoisted(() => ({ isWeb: false }));
+
+vi.mock("tamagui", async (importOriginal) => {
+  const original = await importOriginal<typeof import("tamagui")>();
+  return Object.defineProperty({ ...original }, "isWeb", { get: () => env.isWeb });
+});
+
+const platform = Platform as { OS: string };
+const webOS = platform.OS;
+const overlayId = "mp-placeholder-overlay";
+const hint = "8080=web, 8443=api, 9000=minio";
+
+function field(container: HTMLElement): HTMLInputElement {
+  const input = container.querySelector("input");
+  if (!input) throw new Error("no input rendered");
+  return input;
+}
+
+function nativePlaceholderColor(container: HTMLElement): string {
+  return field(container).style.getPropertyValue("--t_placeholderColor").trim();
+}
+
+function Controlled({ initial = "" }: { initial?: string }) {
+  const [value, setValue] = useState(initial);
+  return (
+    <Input size="$3">
+      <Input.Area placeholder={hint} value={value} onChangeText={setValue} />
+      <button type="button" onClick={() => setValue("")}>
+        reset
+      </button>
+    </Input>
+  );
+}
+
+beforeEach(() => {
+  env.isWeb = false;
+  platform.OS = "ios";
+});
+
+afterEach(() => {
+  platform.OS = webOS;
+  env.isWeb = true;
+});
+
+describe("FZ-8144 iOS placeholder on the typed line", () => {
+  it("paints only on iOS, single-line, never on web or Android", () => {
+    expect(areaPaintsPlaceholderOverlay()).toBe(true);
+    expect(areaPaintsPlaceholderOverlay(true)).toBe(false);
+    platform.OS = "android";
+    expect(areaPaintsPlaceholderOverlay()).toBe(false);
+    platform.OS = "ios";
+    env.isWeb = true;
+    expect(areaPaintsPlaceholderOverlay()).toBe(false);
+  });
+
+  it("an empty Area draws the overlay and keeps the native placeholder transparent for VoiceOver", () => {
+    const { container, getByTestId } = renderWithProviders(
+      <Input size="$3">
+        <Input.Area placeholder={hint} />
+      </Input>,
+    );
+    const overlay = getByTestId(overlayId);
+    expect(overlay.textContent).toBe(hint);
+    expect(nativePlaceholderColor(container)).toBe("transparent");
+    expect(field(container).getAttribute("placeholder")).toBe(hint);
+  });
+
+  it("the overlay is hidden from accessibility and takes no touches", () => {
+    const { getByTestId, queryByText } = renderWithProviders(
+      <Input size="$3">
+        <Input.Area placeholder={hint} />
+      </Input>,
+    );
+    const overlay = getByTestId(overlayId);
+    expect(overlay.getAttribute("aria-hidden")).toBe("true");
+    expect(getComputedStyle(overlay).pointerEvents).toBe("none");
+    expect(getComputedStyle(overlay).position).toBe("absolute");
+    expect(queryByText(hint, { ignore: "[aria-hidden] *, [aria-hidden]" })).toBeNull();
+  });
+
+  it("follows the consumer's placeholder colour, the native one stays transparent", () => {
+    const { container, getByTestId } = renderWithProviders(
+      <Input size="$3">
+        <Input.Area placeholder={hint} placeholderTextColor={"rgb(1, 2, 3)" as ColorTokens} />
+      </Input>,
+    );
+    expect(nativePlaceholderColor(container)).toBe("transparent");
+    const text = getByTestId(overlayId).firstElementChild as HTMLElement;
+    expect(getComputedStyle(text).color).toBe("rgb(1, 2, 3)");
+  });
+
+  it("a filled Area renders no overlay", () => {
+    const { queryByTestId } = renderWithProviders(
+      <Input size="$3">
+        <Input.Area placeholder={hint} defaultValue="app.example.com" />
+      </Input>,
+    );
+    expect(queryByTestId(overlayId)).toBeNull();
+  });
+
+  it("hides on the first typed character and returns when the field empties", () => {
+    const { container, queryByTestId } = renderWithProviders(
+      <Input size="$3">
+        <Input.Area placeholder={hint} />
+      </Input>,
+    );
+    expect(queryByTestId(overlayId)).not.toBeNull();
+    act(() => {
+      fireEvent.change(field(container), { target: { value: "a" } });
+    });
+    expect(queryByTestId(overlayId)).toBeNull();
+    act(() => {
+      fireEvent.change(field(container), { target: { value: "" } });
+    });
+    expect(queryByTestId(overlayId)).not.toBeNull();
+  });
+
+  it("hides while an IME composes, before any character commits", () => {
+    const { container, queryByTestId } = renderWithProviders(<Controlled />);
+    act(() => {
+      fireEvent.change(field(container), { target: { value: "か" } });
+    });
+    expect(queryByTestId(overlayId)).toBeNull();
+  });
+
+  it("tracks a controlled value both ways", () => {
+    const { container, getByText, queryByTestId } = renderWithProviders(
+      <Controlled initial="web" />,
+    );
+    expect(queryByTestId(overlayId)).toBeNull();
+    act(() => {
+      fireEvent.click(getByText("reset"));
+    });
+    expect(queryByTestId(overlayId)).not.toBeNull();
+    act(() => {
+      fireEvent.change(field(container), { target: { value: "x" } });
+    });
+    expect(queryByTestId(overlayId)).toBeNull();
+  });
+
+  it("multiline keeps the native placeholder, which RN draws itself", () => {
+    const { container, queryByTestId } = renderWithProviders(
+      <Input size="$3">
+        <Input.Area placeholder={hint} multiline />
+      </Input>,
+    );
+    expect(queryByTestId(overlayId)).toBeNull();
+    expect(nativePlaceholderColor(container)).not.toBe("transparent");
+  });
+
+  it("Android and web keep the native placeholder", () => {
+    platform.OS = "android";
+    const android = renderWithProviders(
+      <Input size="$3">
+        <Input.Area placeholder={hint} />
+      </Input>,
+    );
+    expect(android.queryByTestId(overlayId)).toBeNull();
+    expect(nativePlaceholderColor(android.container)).not.toBe("transparent");
+    android.unmount();
+    platform.OS = "ios";
+    env.isWeb = true;
+    const web = renderWithProviders(
+      <Input size="$3">
+        <Input.Area placeholder={hint} />
+      </Input>,
+    );
+    expect(web.queryByTestId(overlayId)).toBeNull();
+    expect(nativePlaceholderColor(web.container)).not.toBe("transparent");
+  });
+
+  it("sits on the typed line: fills the Area, centred, in the field's own font and size", () => {
+    for (const size of ["$3", "$4"] as const) {
+      const { container, getByTestId, unmount } = renderWithProviders(
+        <Input size={size}>
+          <Input.Area placeholder={hint} />
+        </Input>,
+      );
+      const overlay = getByTestId(overlayId);
+      const box = getComputedStyle(overlay);
+      expect(box.position).toBe("absolute");
+      for (const edge of ["top", "bottom", "left", "right"] as const) {
+        expect(box[edge]).toBe("0px");
+      }
+      expect(box.justifyContent).toBe("center");
+      const typed = getComputedStyle(field(container));
+      const text = getComputedStyle(overlay.firstElementChild as HTMLElement);
+      expect(text.fontSize).not.toBe("");
+      expect(text.fontSize).toBe(typed.fontSize);
+      expect(text.fontFamily).toBe(typed.fontFamily);
+      expect(text.fontWeight).toBe(typed.fontWeight);
+      expect(text.lineHeight).toBe(typed.lineHeight);
+      unmount();
+    }
+  });
+
+  it("follows the Area's inset and RTL alignment", () => {
+    const { getByTestId } = renderWithProviders(
+      <Input size="$3">
+        <Input.Area placeholder={hint} paddingHorizontal={12} textAlign="right" />
+      </Input>,
+    );
+    const overlay = getByTestId(overlayId);
+    expect(getComputedStyle(overlay).paddingLeft).toBe("12px");
+    expect(getComputedStyle(overlay).paddingRight).toBe("12px");
+    const text = getComputedStyle(overlay.firstElementChild as HTMLElement);
+    expect(text.textAlign).toBe("right");
+  });
+
+  it("the overlay text truncates to one line with a tail ellipsis", () => {
+    const { getByTestId } = renderWithProviders(
+      <Input size="$3">
+        <Input.Area placeholder={hint} />
+      </Input>,
+    );
+    const text = getByTestId(overlayId).firstElementChild as HTMLElement;
+    const style = getComputedStyle(text);
+    expect(style.whiteSpace).toBe("nowrap");
+    expect(style.textOverflow).toBe("ellipsis");
+  });
+});

package/src/fields/ColorPicker/SystemColorField.tsx

@@ -84,6 +84,7 @@ export function SystemColorField({
       {!inTableCell && presetColors.length > 0 ? (
         <ScrollView
           horizontal
+          keyboardShouldPersistTaps="handled"
           showsHorizontalScrollIndicator={false}
           testID="color-picker-system-presets"
         >

package/src/fields/Input/Input.stories.tsx

@@ -7,6 +7,7 @@ import { useState } from "react";
 import { Input as TamaguiInput, XStack, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
+import { SearchInput } from "../SearchInput";
 import { Input } from "./index";
 import { Paragraph } from "@multiplatform.one/theme";
 
@@ -114,6 +115,41 @@ export const Sizes: Story = {
   ),
 };
 
+/** FZ-8144: each row pairs an empty field with a typed one; the placeholder sits on the typed line. */
+export const PlaceholderOnTypedLine: Story = {
+  name: "Placeholder on the typed line",
+  render: () => (
+    <YStack gap="$3" maxWidth={400}>
+      {(["$3", "$4"] as const).map((size) => (
+        <XStack key={`input${size}`} gap="$2">
+          <YStack flex={1}>
+            <Input size={size} label={`Empty ${size}`} labelHidden placeholder="8080=web" />
+          </YStack>
+          <YStack flex={1}>
+            <Input size={size} label={`Typed ${size}`} labelHidden defaultValue="8080=web" />
+          </YStack>
+        </XStack>
+      ))}
+      {(["$3", "$4"] as const).map((size) => (
+        <XStack key={`search${size}`} gap="$2">
+          <YStack flex={1}>
+            <SearchInput size={size} placeholder="8080=web" clearable={false} />
+          </YStack>
+          <YStack flex={1}>
+            <SearchInput size={size} defaultValue="8080=web" clearable={false} />
+          </YStack>
+        </XStack>
+      ))}
+      <Input
+        size="$3"
+        label="Long placeholder"
+        labelHidden
+        placeholder="8080=web, 8443=api, 9000=minio, 5432=postgres, 6379=redis"
+      />
+    </YStack>
+  ),
+};
+
 export const ReadOnly: Story = {
   args: {
     label: "Account id",

package/src/shared/groupContext.ts

@@ -2,3 +2,6 @@ import { createContext, useContext } from "react";
 
 export const ControlGroupCtx = createContext(false);
 export const useControlGrouped = () => useContext(ControlGroupCtx);
+
+export const ControlGroupVerticalCtx = createContext(false);
+export const useControlGroupVertical = () => useContext(ControlGroupVerticalCtx);

package/types/ControlGroup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ControlGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAe,IAAI,EAAiB,MAAM,SAAS,CAAC;AAC3D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAmBxC,QAAA,MAAM,iBAAiB;;;6CAsBrB,CAAC;AAgCH,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,GAAG;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,qBAAqB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAgC5E;AAED,eAAO,MAAM,iBAAiB;;CAE5B,CAAC;AAMH,MAAM,WAAW,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,iBAAiB,CAAC;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAyK9F;AAED,eAAO,MAAM,YAAY;;;;CAEvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ControlGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAe,IAAI,EAAiB,MAAM,SAAS,CAAC;AAC3D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAmBxC,QAAA,MAAM,iBAAiB;;;6CAsBrB,CAAC;AAgCH,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,GAAG;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,qBAAqB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAgC5E;AAED,eAAO,MAAM,iBAAiB;;CAE5B,CAAC;AAMH,MAAM,WAAW,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,iBAAiB,CAAC;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CA6K9F;AAED,eAAO,MAAM,YAAY;;;;CAEvB,CAAC"}

package/types/InputParts/index.d.ts

@@ -111,6 +111,14 @@ export type InputModeValue = ComponentProps<typeof TInput>["inputMode"];
 export declare function mapKeyboardTypeToInputMode(keyboardType?: string): MappedInputMode | undefined;
 export declare function mapInputModeToKeyboardType(inputMode?: string): MappedKeyboardType | undefined;
 export declare const inputSizeVariant: SizeVariantSpreadFunction<any>;
+/**
+ * FZ-8144: an iOS update moved UIKit's own placeholder 3pt below the typed
+ * line on Clay's phone, while RN Text stayed put. On iOS a single-line Area
+ * paints its visible placeholder as Text centred like the typed line, and
+ * keeps the native one transparent so VoiceOver still reads it. Multiline
+ * stays native: RN draws that placeholder itself, not UIKit.
+ */
+export declare function areaPaintsPlaceholderOverlay(multiline?: boolean): boolean;
 export interface InputActionProps {
     /** Accessible name; the glyph is decorative. */
     label: string;

package/types/InputParts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InputParts/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InputParts/index.tsx"],"names":[],"mappings":"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"}

package/types/fields/ColorPicker/SystemColorField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemColorField.d.ts","sourceRoot":"","sources":["../../../src/fields/ColorPicker/SystemColorField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAMrE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC1C,yDAAyD;IACzD,OAAO,EAAE,SAAS,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,aAAa,EACb,KAAK,EACL,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,MAAM,EACN,cAAc,GACf,EAAE,qBAAqB,2CA6DvB"}
+{"version":3,"file":"SystemColorField.d.ts","sourceRoot":"","sources":["../../../src/fields/ColorPicker/SystemColorField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAMrE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC1C,yDAAyD;IACzD,OAAO,EAAE,SAAS,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,aAAa,EACb,KAAK,EACL,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,MAAM,EACN,cAAc,GACf,EAAE,qBAAqB,2CA8DvB"}

package/types/shared/groupContext.d.ts

@@ -1,3 +1,5 @@
 export declare const ControlGroupCtx: import("react").Context<boolean>;
 export declare const useControlGrouped: () => boolean;
+export declare const ControlGroupVerticalCtx: import("react").Context<boolean>;
+export declare const useControlGroupVertical: () => boolean;
 //# sourceMappingURL=groupContext.d.ts.map

package/types/shared/groupContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"groupContext.d.ts","sourceRoot":"","sources":["../../src/shared/groupContext.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,kCAAuB,CAAC;AACpD,eAAO,MAAM,iBAAiB,eAAoC,CAAC"}
+{"version":3,"file":"groupContext.d.ts","sourceRoot":"","sources":["../../src/shared/groupContext.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,kCAAuB,CAAC;AACpD,eAAO,MAAM,iBAAiB,eAAoC,CAAC;AAEnE,eAAO,MAAM,uBAAuB,kCAAuB,CAAC;AAC5D,eAAO,MAAM,uBAAuB,eAA4C,CAAC"}