@multiplatform.one/forms 7.46.0 → 7.47.0

package/src/InputParts/index.tsx

@@ -1,7 +1,15 @@
 import { transitionProps } from "@multiplatform.one/theme";
 import { getFontSized } from "@tamagui/get-font-sized";
 import type { SizeVariantSpreadFunction } from "@tamagui/web";
-import { useCallback, useEffect, useState, type ReactNode } from "react";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
 import type { ComponentProps, Ref, RefObject } from "react";
 import { Pressable as RNPressable } from "react-native";
 import type {
@@ -51,6 +59,7 @@ import {
 import { formButtonColors, formCommonColors, formInputColors } from "../shared/colorRamps";
 import { useControlGrouped } from "../shared/groupContext";
 import { nativeAutoFocus } from "../shared/nativeAutoFocus";
+import { pressSlopProps } from "../shared/pressSlopProps";
 import { useIsInTableCell } from "../shared/tableCellContext";
 import { useFieldA11y, useFieldDescribedBy } from "../fieldLayout";
 
@@ -286,6 +295,27 @@ const InputGroupFrame = styled(XGroup, {
   },
 });
 
+/**
+ * LC-149 FIELD-TRAILING-ACTION: true while a field's trigger has an action
+ * overlaid on its trailing edge from outside the Box (FloatingPanel
+ * `triggerEnd`). The Box then keeps that end cap empty for it.
+ */
+const FieldTrailingOverlayContext = createContext(false);
+
+export function FieldTrailingOverlay({
+  active,
+  children,
+}: {
+  active: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <FieldTrailingOverlayContext.Provider value={active}>
+      {children}
+    </FieldTrailingOverlayContext.Provider>
+  );
+}
+
 /**
  * Fabric + Tamagui XGroup often claims the responder without firing `onPress`,
  * so Select/Date/Combobox triggers look tappable but never open. On native,
@@ -440,6 +470,21 @@ const InputGroupImpl = InputGroupFrame.styleable<{
     (typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null)
       ? undefined
       : { paddingHorizontal: fieldInset };
+  // LC-149: an action overlaid from outside the Box (a picker's native clear,
+  // which must sit outside the trigger's press capture) still lands in the
+  // trailing slot. The Box reserves the end cap and drops its end inset so
+  // the overlay reads as part of the field.
+  const trailingOverlay = useContext(FieldTrailingOverlayContext);
+  const trailingSlot = trailingOverlay ? (
+    <View
+      aria-hidden
+      data-field-action-slot=""
+      width={familyRecipe.height}
+      flexShrink={0}
+      pointerEvents="none"
+    />
+  ) : null;
+  const trailingPadProps = trailingOverlay ? { paddingInlineEnd: 0 } : undefined;
 
   // Chromeless rendering inside table cells
   if (inTableCell) {
@@ -472,12 +517,14 @@ const InputGroupImpl = InputGroupFrame.styleable<{
             {...controlFragment}
             {...passthroughSizeProps}
             {...insetPadProps}
+            {...trailingPadProps}
             {...sizeRecipeEscapeOverride}
             {...framePressProps}
             {...boxRingAttrs}
             overflow={boxOverflow}
           >
             {children}
+            {trailingSlot}
           </InputGroupFrame>,
         )}
       </FocusContext.Provider>
@@ -537,6 +584,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           {...props}
           {...passthroughSizeProps}
           {...insetPadProps}
+          {...trailingPadProps}
           {...sizeRecipeEscapeOverride}
           {...framePressProps}
           {...boxRingAttrs}
@@ -554,6 +602,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           overflow={boxOverflow}
         >
           {children}
+          {trailingSlot}
         </InputGroupFrame>,
       )}
     </FocusContext.Provider>
@@ -969,7 +1018,11 @@ const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonPr
     // knob's: a $2 field inside a $4 knob would otherwise ship a 44px stop
     // on a 32px frame. LC-77 keeps the sub-floor case pressable via the
     // caller's hitSlop, never by inflating the cap.
-    const square = sizeRecipeForToken(String(size ?? "$true"), { touch: hydrationTouch }).height;
+    const measured = (props as { height?: unknown }).height;
+    const square =
+      typeof measured === "number"
+        ? measured
+        : sizeRecipeForToken(String(size ?? "$true"), { touch: hydrationTouch }).height;
     const disabled = (props as { disabled?: boolean }).disabled === true;
     if (isWeb) ensureCompositeFocusRing();
     return (
@@ -1026,6 +1079,94 @@ const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonPr
   );
 });
 
+// ---------------------------------------------------------------------------
+// Input.Action
+// ---------------------------------------------------------------------------
+
+export interface InputActionProps {
+  /** Accessible name; the glyph is decorative. */
+  label: string;
+  onPress?: () => void;
+  disabled?: boolean;
+  /** Toggle state for a two-state action (reveal). Web announces aria-pressed. */
+  pressed?: boolean;
+  /** id of the input this action drives (aria-controls). */
+  controls?: string;
+  size?: SizeTokens | FontSizeTokens;
+  /**
+   * The field's measured height, when the action sits outside the Box (a
+   * picker clear overlaid from FloatingPanel `triggerEnd`). Inside a Box the
+   * square comes from `size`.
+   */
+  height?: number;
+  tabIndex?: number;
+  testID?: string;
+  /** Web: swallow the mousedown a picker trigger would open on. */
+  onMouseDown?: (e: { stopPropagation: () => void; preventDefault: () => void }) => void;
+  [data: `data-${string}`]: string | undefined;
+  children: ReactNode;
+}
+
+/**
+ * LC-149 FIELD-TRAILING-ACTION: the field's own action (reveal, clear, copy,
+ * eyedropper) is a chromeless glyph on the Box's trailing edge, never a
+ * bordered button beside the field. It squares off the field height and pads
+ * its press target to MIN_PRESS_TARGET when the field is shorter. It is the
+ * field's second tab stop and rings its glyph (the `glyphRing` end cap).
+ */
+const InputActionImpl = forwardRef<TamaguiElement, InputActionProps>(function InputAction(
+  { label, onPress, disabled, pressed, controls, size, height, tabIndex, children, ...rest },
+  ref,
+) {
+  const { size: contextSize } = InputContext.useStyledContext();
+  const hydrationTouch = useTouchSurface();
+  const token = (size ?? contextSize ?? "$true") as FontSizeTokens;
+  const square = height ?? sizeRecipeForToken(String(token), { touch: hydrationTouch }).height;
+  const activate = () => {
+    if (!disabled) onPress?.();
+  };
+  return (
+    <InputButtonImpl
+      ref={ref as never}
+      glyphRing
+      size={token}
+      disabled={disabled}
+      tabIndex={tabIndex}
+      aria-label={label}
+      accessibilityLabel={label}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: !!disabled }}
+      {...(isWeb && pressed !== undefined ? { "aria-pressed": pressed } : undefined)}
+      {...(controls ? { "aria-controls": controls } : undefined)}
+      height={square}
+      width={square}
+      {...pressSlopProps(square, true)}
+      data-field-action="trailing"
+      onPress={
+        disabled
+          ? undefined
+          : (e?: { stopPropagation?: () => void }) => {
+              e?.stopPropagation?.();
+              activate();
+            }
+      }
+      onKeyDown={
+        ((e: KeyboardEvent) => {
+          if (e.key !== "Enter" && e.key !== " ") return;
+          e.preventDefault();
+          e.stopPropagation();
+          activate();
+        }) as unknown as () => void
+      }
+      {...rest}
+    >
+      <InputIcon aria-hidden color={formCommonColors.muted}>
+        {children}
+      </InputIcon>
+    </InputButtonImpl>
+  );
+});
+
 // ---------------------------------------------------------------------------
 // Input.Icon
 // ---------------------------------------------------------------------------
@@ -1321,6 +1462,7 @@ const InputCompound = Object.assign(InputContainerImpl, {
   TextArea: FocusWiredTextArea,
   Section: InputSection,
   Button: InputButtonImpl,
+  Action: InputActionImpl,
   Icon: InputIcon,
   Info: InputInfo,
   Meta: InputFieldMeta,

package/src/InputParts/inputPartsStories.spec.tsx

@@ -74,10 +74,12 @@ describe("Forms/InputParts stories", () => {
     expect(placeholders).toEqual(["Leading icon", "Trailing icon", "Both ends"]);
   });
 
-  it("TrailingButton exposes a labelled reveal toggle beside the field", () => {
+  it("TrailingButton puts a labelled reveal toggle inside the field (LC-149)", () => {
     const { container } = mount(TrailingButton as StoryLike);
     const button = container.querySelector("[aria-label='Show password']");
     expect(button).toBeTruthy();
+    expect(button?.getAttribute("data-field-action")).toBe("trailing");
+    expect(button?.closest("[data-mp-input-box]")).toBeTruthy();
     expect(container.querySelector("#parts-password")).toBeTruthy();
   });
 

package/src/Skeleton/Skeleton.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Preset } from "@multiplatform.one/theme";
-import { Paragraph, XStack, YStack } from "tamagui";
+import { Preset, Paragraph } from "@multiplatform.one/theme";
+import { XStack, YStack } from "tamagui";
 import { Skeleton, SkeletonCircle, SkeletonText } from "./index";
 
 const meta: Meta<typeof Skeleton> = {

package/src/Spinner/Spinner.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
-import { Preset, Surface } from "@multiplatform.one/theme";
-import { XStack, YStack, Paragraph } from "tamagui";
+import { Preset, Surface, Paragraph } from "@multiplatform.one/theme";
+import { XStack, YStack } from "tamagui";
 import { Button } from "../Button";
 import { Spinner } from "./index";
 

package/src/Wheel/Wheel.stories.tsx

@@ -1,8 +1,8 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, Paragraph } from "@multiplatform.one/theme";
 import { useState } from "react";
-import { Paragraph, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 import { Wheel } from "./index";
 
 const numbers = Array.from({ length: 24 }, (_, i) => i);

package/src/fieldTrailingAction.spec.tsx

@@ -0,0 +1,188 @@
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { fireEvent } from "@testing-library/react";
+import { inspectDesign } from "@multiplatform.one/config/design-lint";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { FloatingPanel } from "./FloatingPanel";
+import { Input } from "./fields/Input";
+import { Input as InputParts } from "./InputParts";
+
+const src = join(process.cwd(), "src");
+
+function sources(dir: string): string[] {
+  return readdirSync(dir).flatMap((entry) => {
+    const path = join(dir, entry);
+    if (statSync(path).isDirectory()) return sources(path);
+    return /\.tsx?$/.test(entry) && !/\.(spec|stories|test)\./.test(entry) ? [path] : [];
+  });
+}
+
+function revealOf(container: HTMLElement) {
+  return container.querySelector(
+    "[aria-label='Show password'], [aria-label='Hide password']",
+  ) as HTMLElement | null;
+}
+
+describe("LC-149 FIELD-TRAILING-ACTION", () => {
+  describe("password reveal", () => {
+    it("is a chromeless trailing action inside the field, not a button beside it", () => {
+      const result = renderWithProviders(
+        <Input label="Password" secureTextEntry defaultValue="hunter22" />,
+      );
+      const box = result.container.querySelector("[data-mp-input-box]") as HTMLElement;
+      const reveal = revealOf(result.container);
+      if (!box || !reveal) throw new Error("box or reveal missing");
+      expect(box.contains(reveal)).toBe(true);
+      expect(reveal.getAttribute("data-field-action")).toBe("trailing");
+      expect(reveal.getAttribute("data-end-cap")).toBe(box.getAttribute("data-visual-height"));
+      expect(reveal.className).toMatch(/mp-chip-dismiss/);
+      expect(box.lastElementChild?.contains(reveal)).toBe(true);
+    });
+
+    it("toggles eye / eye-slash with Show password / Hide password", () => {
+      const result = renderWithProviders(
+        <Input label="Password" secureTextEntry defaultValue="hunter22" />,
+      );
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      const reveal = revealOf(result.container);
+      if (!input || !reveal) throw new Error("anatomy missing");
+      expect(input.getAttribute("type")).toBe("password");
+      expect(reveal.getAttribute("aria-label")).toBe("Show password");
+      expect(reveal.getAttribute("aria-pressed")).toBe("false");
+      const maskedGlyph = reveal.querySelector("svg")?.innerHTML;
+
+      fireEvent.click(reveal);
+      const shown = revealOf(result.container);
+      if (!shown) throw new Error("reveal missing after toggle");
+      expect(input.getAttribute("type")).not.toBe("password");
+      expect(shown.getAttribute("aria-label")).toBe("Hide password");
+      expect(shown.getAttribute("aria-pressed")).toBe("true");
+      expect(shown.querySelector("svg")?.innerHTML).not.toBe(maskedGlyph);
+
+      fireEvent.click(shown);
+      expect(input.getAttribute("type")).toBe("password");
+      expect(revealOf(result.container)?.getAttribute("aria-label")).toBe("Show password");
+    });
+
+    it("rides inputProps.secureTextEntry too, and reveal={false} drops it", () => {
+      const viaProps = renderWithProviders(
+        <Input label="Password" inputProps={{ secureTextEntry: true }} />,
+      );
+      expect(revealOf(viaProps.container)).not.toBeNull();
+      const opted = renderWithProviders(<Input label="PIN" secureTextEntry reveal={false} />);
+      expect(revealOf(opted.container)).toBeNull();
+    });
+  });
+
+  describe("error with a trailing action", () => {
+    it("shows the message and no in-field glyph when an action owns the slot", () => {
+      const result = renderWithProviders(
+        <Input label="Password" secureTextEntry error="Passwords do not match" />,
+      );
+      expect(result.container.querySelector("[data-field-error-glyph]")).toBeNull();
+      expect(revealOf(result.container)).not.toBeNull();
+      expect(result.findTextElement("Passwords do not match")).toBeDefined();
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      expect(input.getAttribute("aria-invalid")).toBe("true");
+    });
+
+    it("drops the glyph for the copy action too", () => {
+      const result = renderWithProviders(
+        <Input label="Token" readOnly copy value="mpo_live" error="Token expired" />,
+      );
+      expect(result.container.querySelector("[data-field-error-glyph]")).toBeNull();
+    });
+
+    it("keeps the glyph when the trailing slot is empty", () => {
+      const result = renderWithProviders(<Input label="Name" error="Enter your name" />);
+      expect(result.container.querySelector("[data-field-error-glyph]")).not.toBeNull();
+    });
+  });
+
+  describe("picker clears overlaid from outside the trigger", () => {
+    it("land in the Box's trailing end cap, which the Box keeps empty for them", () => {
+      const result = renderWithProviders(
+        <FloatingPanel
+          open={false}
+          onOpenChange={() => {}}
+          sheet
+          trigger={
+            <InputParts size="$4">
+              <InputParts.Box>
+                <InputParts.Area value="2026-10-25" readOnly />
+              </InputParts.Box>
+            </InputParts>
+          }
+          triggerEnd={
+            <InputParts.Action label="Clear date" onPress={() => {}}>
+              <svg />
+            </InputParts.Action>
+          }
+        >
+          <span />
+        </FloatingPanel>,
+      );
+      const box = result.container.querySelector("[data-mp-input-box]") as HTMLElement;
+      const slot = box?.querySelector("[data-field-action-slot]") as HTMLElement | null;
+      const overlay = result.container.querySelector("[data-field-action-overlay]");
+      const clear = result.container.querySelector("[aria-label='Clear date']");
+      expect(slot).not.toBeNull();
+      expect(overlay?.contains(clear)).toBe(true);
+      expect(box.contains(clear)).toBe(false);
+    });
+
+    it("leave the Box alone when there is nothing to overlay", () => {
+      const result = renderWithProviders(
+        <FloatingPanel
+          open={false}
+          onOpenChange={() => {}}
+          sheet
+          trigger={
+            <InputParts size="$4">
+              <InputParts.Box>
+                <InputParts.Area value="" readOnly />
+              </InputParts.Box>
+            </InputParts>
+          }
+        >
+          <span />
+        </FloatingPanel>,
+      );
+      expect(result.container.querySelector("[data-field-action-slot]")).toBeNull();
+      expect(result.container.querySelector("[data-field-action-overlay]")).toBeNull();
+    });
+  });
+
+  describe("every MPO field keeps its own action in the trailing slot", () => {
+    const files = [
+      ...sources(join(src, "fields")),
+      ...sources(join(src, "InputParts")),
+      ...sources(join(src, "FloatingPanel")),
+      ...sources(join(src, "..", "..", "frappe-ui", "src", "fields")),
+      ...sources(join(src, "..", "..", "components", "src", "CopyField")),
+    ];
+
+    it("no field renders its action as a sibling button", () => {
+      const hits = files.flatMap((file) =>
+        (inspectDesign(readFileSync(file, "utf8"), file) as string[]).filter((error) =>
+          error.includes("[field-action]"),
+        ),
+      );
+      expect(hits).toEqual([]);
+    });
+
+    it("the detector flags an icon button beside a field", () => {
+      const sibling = inspectDesign(
+        `const x = (
+          <XStack>
+            <Input label="Password" secureTextEntry />
+            <Button icon={<EyeIcon />} aria-label="Show password" />
+          </XStack>
+        );`,
+        "Sibling.tsx",
+      ) as string[];
+      expect(sibling.join("\n")).toMatch(/\[field-action\]/);
+    });
+  });
+});

package/src/fields/Barcode/Barcode.stories.tsx

@@ -3,10 +3,11 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { BarcodeIcon, CameraIcon, XIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Barcode } from "./index";
+import { Text } from "@multiplatform.one/theme";
 
 const iconProps = {
   barcodeIcon: <BarcodeIcon size={18} />,

package/src/fields/Barcode/BarcodePreview.stories.tsx

@@ -8,8 +8,9 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Text, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 import { BarcodePreview } from "./BarcodePreview";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof BarcodePreview> = {
   title: "Forms/BarcodePreview",

package/src/fields/Checkbox/Checkbox.stories.tsx

@@ -4,10 +4,12 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { CheckIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Checkbox as TamaguiCheckbox, Label, Paragraph, XStack, YStack } from "tamagui";
+import { Checkbox as TamaguiCheckbox, XStack, YStack } from "tamagui";
+import { Label } from "../../Label";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Checkbox, Checkboxes, CheckboxGroup } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Checkbox> = {
   title: "Forms/Checkbox",

package/src/fields/Checkbox/CheckboxGroup.stories.tsx

@@ -1,8 +1,8 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, Paragraph } from "@multiplatform.one/theme";
 import { useForm } from "@tanstack/react-form";
-import { Paragraph, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { CheckboxGroup } from "./CheckboxGroup";

package/src/fields/Checkbox/Checkboxes.stories.tsx

@@ -1,9 +1,10 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
-import { Paragraph, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 import { CheckboxGroup } from "./CheckboxGroup";
 import { Checkboxes } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta = {
   title: "Forms/Checkboxes",

package/src/fields/ColorPicker/PresetSwatches.stories.tsx

@@ -7,8 +7,9 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { PresetSwatches } from "./parts";
+import { Text } from "@multiplatform.one/theme";
 
 const BRAND = ["#1E40AF", "#1D4ED8", "#2563EB", "#3B82F6", "#60A5FA", "#93C5FD", "#BFDBFE"];
 

package/src/fields/ColorPicker/index.tsx

@@ -8,7 +8,6 @@ import {
 } from "@multiplatform.one/theme";
 import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { type Popover, View, XStack, YStack, isWeb, useProps, useTheme } from "tamagui";
-import { Button } from "../../Button";
 
 import { Field, FieldLayout } from "../../fieldLayout";
 import {
@@ -425,19 +424,13 @@ function ColorBody({
               placeholder="#000000"
               maxLength={showAlpha ? 9 : 7}
             />
+            {hasEyeDropper && (
+              <InputParts.Action label={t("Eyedropper")} onPress={handleEyeDropper}>
+                <Pipette />
+              </InputParts.Action>
+            )}
           </InputParts.Box>
         </InputParts>
-        {hasEyeDropper && (
-          <Button
-            size={knobProps.sizeToken}
-            chromeless
-            icon={<Pipette size={CHIP_PX[sizeTokenStop(knobProps.sizeToken)] ?? 18} />}
-            onPress={handleEyeDropper}
-            cursor="pointer"
-            aria-label={t("Eyedropper")}
-            hoverStyle={{ opacity: 0.7 }}
-          />
-        )}
       </XStack>
     </YStack>
   );
@@ -500,6 +493,7 @@ function ColorPickerControl({
       // Focus can still be parked on a control inside the closing panel while
       // it animates out — treat that the same as focus already being lost.
       const inClosingPanel =
+        typeof HTMLElement !== "undefined" &&
         active instanceof HTMLElement &&
         !!active.closest('[data-testid="floating-panel-viewport"]');
       if (active && active !== document.body && !inClosingPanel) return;

package/src/fields/Combobox/Combobox.stories.tsx

@@ -3,11 +3,12 @@ import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Text, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Combobox, type ComboboxOption } from "./index";
 import { authorOptions } from "./authorOptions";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Combobox> = {
   title: "Forms/Combobox",