@multiplatform.one/forms 7.67.0 → 7.69.0

package/src/fields/FileUpload/index.tsx

@@ -5,7 +5,8 @@ import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { type DragEvent, type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { useMedia, useProps, type SizeTokens } from "tamagui";
 import { Image, isWeb, Text, XStack, YStack, styled } from "tamagui";
-import { Button } from "../../Button";
+import { Button, IconButton, IconButtonGroup } from "../../Button";
+import { standardActions } from "../../standardActions";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
 import {
@@ -756,25 +757,16 @@ export function FileUpload<
   const existingName = existing?.name || fileNameFromSrc(existing?.src ?? "");
   const hasRows = selectedFiles.length > 0 || transfers.length > 0 || showExisting;
 
-  const renderRemoveDisc = (ariaLabel: string, onPress: () => void) =>
+  // LC-176 ICON-BUTTON: a row's remove is a bare ✕; on an image tile it
+  // floats over the picture on the media plate. Painted at nestedControl with
+  // hitSlop restoring the 44 floor via `nested` (held exception).
+  const renderRemoveDisc = (ariaLabel: string, onPress: () => void, overMedia = false) =>
     canInteract ? (
       <Button
-        // Bento remove: a filled $color12 disc with the inverse
-        // ✕ — painted at nestedControl (32) with hitSlop
-        // restoring the 44 floor via `nested` (held exception);
-        // the nested icon step lands the board's 14px ✕.
         nested
-        circular
+        {...(overMedia ? { plate: "media" as const } : undefined)}
         icon={XIcon}
         aria-label={ariaLabel}
-        backgroundColor={formDropzoneColors.removeDisc.background.base}
-        color={formDropzoneColors.removeDisc.ink}
-        hoverStyle={{
-          backgroundColor: formDropzoneColors.removeDisc.background.hover,
-        }}
-        pressStyle={{
-          backgroundColor: formDropzoneColors.removeDisc.background.press,
-        }}
         onPress={(e) => {
           e.stopPropagation();
           onPress();
@@ -782,6 +774,61 @@ export function FileUpload<
       />
     ) : null;
 
+  // LC-260 ICONS-OVER-WORDS: the preview's Replace and Remove are their
+  // symbols; over an image they float at its top-right on the LC-176 media
+  // plate. While replacing, the one ✕ backs out of the source choices.
+  const previewActions = (overMedia: boolean, onValueChange?: (nextValue: TData) => void) => {
+    const plate = overMedia ? { plate: "media" as const } : undefined;
+    const stop = (event: { stopPropagation: () => void }) => event.stopPropagation();
+    if (replacing)
+      return (
+        <IconButton
+          {...plate}
+          icon={standardActions.cancel.icon}
+          aria-label={t("Cancel replacement")}
+          aria-expanded
+          onPress={(event) => {
+            stop(event);
+            transfersRef.current.forEach((item) => item.controller.abort());
+            setTransfersAndRef(() => []);
+            if (fileInputRef.current) fileInputRef.current.value = "";
+            if (isWeb)
+              replaceRef.current?.querySelector<HTMLElement>('button, [role="button"]')?.focus();
+            setReplacing(false);
+          }}
+        />
+      );
+    return (
+      <>
+        <IconButton
+          {...plate}
+          icon={standardActions.replace.icon}
+          aria-label={t("Replace")}
+          aria-expanded={false}
+          onPress={(event) => {
+            stop(event);
+            setReplacing(true);
+          }}
+        />
+        {singleFile || onExistingRemove ? (
+          <IconButton
+            {...plate}
+            icon={standardActions.remove.icon}
+            aria-label={t("Remove {{name}}", { name: singleFile?.name ?? existingName })}
+            onPress={(event) => {
+              stop(event);
+              transfersRef.current.forEach((item) => item.controller.abort());
+              setTransfersAndRef(() => []);
+              if (singleFile) handleFileRemove(singleFile, onValueChange);
+              else onExistingRemove?.();
+              setReplacing(false);
+            }}
+          />
+        ) : null}
+      </>
+    );
+  };
+
   const renderFileMeta = (file: File, preview: string | null, extra?: ReactNode) => (
     <XStack flex={1} gap="$2" alignItems="center">
       {preview ? (
@@ -846,8 +893,10 @@ export function FileUpload<
           right={tileRemoveInset}
           zIndex={1}
         >
-          {renderRemoveDisc(t("Remove {{name}}", { name: file.name }), () =>
-            handleFileRemove(file, onValueChange),
+          {renderRemoveDisc(
+            t("Remove {{name}}", { name: file.name }),
+            () => handleFileRemove(file, onValueChange),
+            true,
           )}
         </YStack>
       ) : null}
@@ -1016,22 +1065,39 @@ export function FileUpload<
                 width="100%"
               >
                 {singlePreview ? (
-                  <Image
-                    src={singlePreview}
-                    alt={singleFile?.name ?? existingName}
-                    width="$14"
-                    height="$14"
-                    maxWidth="100%"
-                    objectFit="contain"
-                    onLoad={(event) => {
-                      if (!isWeb) return;
-                      const image = event.currentTarget as unknown as HTMLImageElement;
-                      setPixelated(image.naturalWidth > 0 && image.naturalWidth < image.width);
-                    }}
-                    {...(isWeb && pixelated
-                      ? { style: { imageRendering: "pixelated" } as any }
-                      : {})}
-                  />
+                  <YStack position="relative" maxWidth="100%">
+                    <Image
+                      src={singlePreview}
+                      alt={singleFile?.name ?? existingName}
+                      width="$14"
+                      height="$14"
+                      maxWidth="100%"
+                      objectFit="contain"
+                      onLoad={(event) => {
+                        if (!isWeb) return;
+                        const image = event.currentTarget as unknown as HTMLImageElement;
+                        setPixelated(image.naturalWidth > 0 && image.naturalWidth < image.width);
+                      }}
+                      {...(isWeb && pixelated
+                        ? { style: { imageRendering: "pixelated" } as any }
+                        : {})}
+                    />
+                    {canInteract ? (
+                      <XStack
+                        ref={replaceRef as any}
+                        data-file-upload="preview-actions"
+                        position="absolute"
+                        top={-tileRemoveInset}
+                        right={-tileRemoveInset}
+                        zIndex={1}
+                        {...knobProps.gap}
+                      >
+                        <IconButtonGroup plate="media">
+                          {previewActions(true, onValueChange)}
+                        </IconButtonGroup>
+                      </XStack>
+                    ) : null}
+                  </YStack>
                 ) : (
                   <YStack alignItems="center" {...knobProps.gap}>
                     <FileIcon size={rowGlyphSize} />
@@ -1041,50 +1107,9 @@ export function FileUpload<
                   </YStack>
                 )}
               </YStack>
-              {canInteract ? (
-                <XStack
-                  ref={replaceRef as any}
-                  {...knobProps.gap}
-                  justifyContent="center"
-                  flexWrap="wrap"
-                >
-                  <Button
-                    size={knobProps.sizeToken}
-                    aria-label={replacing ? t("Cancel replacement") : t("Replace")}
-                    aria-expanded={replacing}
-                    onPress={(event) => {
-                      event.stopPropagation();
-                      if (replacing) {
-                        transfersRef.current.forEach((item) => item.controller.abort());
-                        setTransfersAndRef(() => []);
-                        if (fileInputRef.current) fileInputRef.current.value = "";
-                        if (isWeb)
-                          replaceRef.current
-                            ?.querySelector<HTMLElement>('button, [role="button"]')
-                            ?.focus();
-                      }
-                      setReplacing(!replacing);
-                    }}
-                  >
-                    {replacing ? t("Cancel") : t("Replace")}
-                  </Button>
-                  {singleFile || onExistingRemove ? (
-                    <Button
-                      size={knobProps.sizeToken}
-                      outlined
-                      aria-label={t("Remove {{name}}", { name: singleFile?.name ?? existingName })}
-                      onPress={(event) => {
-                        event.stopPropagation();
-                        transfersRef.current.forEach((item) => item.controller.abort());
-                        setTransfersAndRef(() => []);
-                        if (singleFile) handleFileRemove(singleFile, onValueChange);
-                        else onExistingRemove?.();
-                        setReplacing(false);
-                      }}
-                    >
-                      {t("Remove")}
-                    </Button>
-                  ) : null}
+              {canInteract && !singlePreview ? (
+                <XStack ref={replaceRef as any} {...knobProps.gap} justifyContent="center">
+                  {previewActions(false, onValueChange)}
                 </XStack>
               ) : null}
             </YStack>
@@ -1175,6 +1200,7 @@ export function FileUpload<
                       {renderRemoveDisc(
                         t("Remove {{name}}", { name: existingName }),
                         onExistingRemove,
+                        true,
                       )}
                     </YStack>
                   ) : null}

package/src/fields/Geolocation/index.tsx

@@ -15,7 +15,8 @@ import { useCallback, useEffect, useId, useRef, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { ScrollView, Spinner, Text as TamaguiText, View, XStack, YStack, isWeb } from "tamagui";
 import { AdaptivePopup } from "../../AdaptivePopup";
-import { Button } from "../../Button";
+import { Button, IconButton } from "../../Button";
+import { standardActions } from "../../standardActions";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { FloatingPanel, useViewportGtSm } from "../../FloatingPanel";
 import { Input as InputParts } from "../../InputParts";
@@ -699,12 +700,16 @@ function GeoMapSurface({
             {locateError}
           </TamaguiText>
           <XStack gap="$2">
-            <Button size="$2" onPress={onRetryLocate} aria-label={t("Retry location")}>
-              {t("Retry")}
-            </Button>
-            <Button size="$2" onPress={onCloseLocate} aria-label={t("Close location")}>
-              {t("Close")}
-            </Button>
+            <IconButton
+              icon={standardActions.retry.icon}
+              onPress={onRetryLocate}
+              aria-label={t("Retry location")}
+            />
+            <IconButton
+              icon={standardActions.close.icon}
+              onPress={onCloseLocate}
+              aria-label={t("Close location")}
+            />
           </XStack>
         </YStack>
       ) : null}

package/src/fields/ImageField/ImageField.spec.tsx

@@ -106,7 +106,7 @@ describe("ImageField", () => {
         if (img) fireEvent.error(img);
       });
       expect(result.findTextElement("Image failed to load")).toBeDefined();
-      expect(result.findTextElement("Remove")).toBeDefined();
+      expect(result.container.querySelector('[aria-label="Remove image"]')).toBeTruthy();
     });
 
     it("clears the value from the Remove action", async () => {
@@ -121,7 +121,7 @@ describe("ImageField", () => {
           imageHeight={96}
         />,
       );
-      const remove = result.findTextElement("Remove");
+      const remove = result.container.querySelector('[aria-label="Remove image"]');
       expect(remove).toBeDefined();
       await act(async () => {
         if (remove) fireEvent.click(remove);
@@ -197,8 +197,8 @@ describe("ImageField", () => {
       );
       const tile = mediaTile(result.container);
       expect(tile).not.toBeNull();
-      expect(tile?.textContent ?? "").not.toMatch(/Remove/);
-      expect(result.findTextElement("Remove")).toBeDefined();
+      expect(tile?.querySelector('[aria-label="Remove image"]')).toBeNull();
+      expect(result.container.querySelector('[aria-label="Remove image"]')).toBeTruthy();
     });
 
     it("rides the unclamped radius knob including full", () => {
@@ -231,7 +231,7 @@ describe("ImageField", () => {
         </TableCellContext.Provider>,
       );
       expect(mediaTile(result.container)).not.toBeNull();
-      expect(result.findTextElement("Remove")).toBeFalsy();
+      expect(result.container.querySelector('[aria-label="Remove image"]')).toBeFalsy();
     });
   });
 });

package/src/fields/ImageField/ImageField.stories.tsx

@@ -4,9 +4,9 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { YStack, XStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { ImageField } from "./index";
+import { ActionButton } from "@multiplatform.one/components";
 
 const ATTACHED = `data:image/svg+xml;utf8,${encodeURIComponent(
   '<svg xmlns="http://www.w3.org/2000/svg" width="240" height="120"><rect width="240" height="120" fill="#4a90d9"/><circle cx="120" cy="60" r="36" fill="#fff"/></svg>',
@@ -77,7 +77,7 @@ export const Main: Story = {
                 objectFit: "contain",
               } as any)}
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/ImageField/index.tsx

@@ -10,7 +10,7 @@
  */
 
 import { edgeColorAt, transitionProps, Text } from "@multiplatform.one/theme";
-import { ImageSquareIcon, XIcon } from "@phosphor-icons/react";
+import { ImageSquareIcon } from "@phosphor-icons/react";
 import {
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
@@ -22,7 +22,8 @@ import type { DragEvent, ReactNode } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Image, Text as TamaguiText, View, YStack, isWeb, styled } from "tamagui";
-import { Button } from "../../Button";
+import { IconButton } from "../../Button";
+import { standardActions } from "../../standardActions";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
 import { t } from "../../shared/t";
@@ -422,15 +423,11 @@ function ImageControl({
       </ImageFrame>
 
       {showRemove && hasValue && canInteract && !inTableCell && (
-        <Button
-          chromeless
-          size="$2"
-          icon={XIcon}
+        <IconButton
+          icon={standardActions.remove.icon}
           aria-label={t("Remove image")}
           onPress={() => handleRemove()}
-        >
-          {t("Remove")}
-        </Button>
+        />
       )}
     </YStack>
   );

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

@@ -5,11 +5,11 @@ import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 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";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Input> = {
   title: "Forms/Input",
@@ -64,7 +64,7 @@ export const Main: Story = {
                 },
               }}
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/MentionInput/MentionInput.stories.tsx

@@ -8,6 +8,7 @@ import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { MentionInput } from "./index";
 import type { MentionConfig } from "./index";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof MentionInput> = {
   title: "Forms/MentionInput",
@@ -120,7 +121,7 @@ export const Main: Story = {
               helperText="Write a message to your team"
               placeholder="Type @ to mention someone"
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/Progress/Progress.stories.tsx

@@ -8,6 +8,7 @@ import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Progress } from "./index";
 import { Paragraph } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Progress> = {
   title: "Forms/Progress",
@@ -59,7 +60,7 @@ export const Main: Story = {
               name="completion"
               helperText="Read from form state"
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/RadioGroup/RadioGroup.stories.tsx

@@ -12,6 +12,7 @@ import { Form } from "../../Form";
 import { Checkbox } from "../Checkbox";
 import { Switch } from "../Switch";
 import { RadioGroup } from "./index";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof RadioGroup> = {
   title: "Forms/RadioGroup",
@@ -395,7 +396,7 @@ export const RowPressInSheet: Story = {
       return (
         <YStack gap="$3">
           <Text>{summary}</Text>
-          <Button onPress={() => setOpen(true)}>Filter</Button>
+          <ActionButton kind="filter" onPress={() => setOpen(true)} />
           <AdaptivePopup open={open} onOpenChange={setOpen} title="Filter">
             <YStack gap="$4">
               <RadioGroup

package/src/fields/Signature/Signature.stories.tsx

@@ -5,10 +5,10 @@ import { EraserIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Signature } from "./index";
 import { Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Signature> = {
   title: "Forms/Signature",
@@ -61,7 +61,7 @@ export const Main: Story = {
               required
               clearIcon={<EraserIcon size={16} />}
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/Stepper/Stepper.stories.tsx

@@ -5,10 +5,10 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Stepper } from "./index";
 import { Paragraph } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Stepper> = {
   title: "Forms/Stepper",
@@ -60,7 +60,7 @@ export const Main: Story = {
             <Stepper label="Quantity" name="quantity" min={1} max={100} buttonPosition="both" />
             <Stepper label="Price" name="price" step={0.01} precision={2} min={0} />
             <Stepper label="Discount (%)" name="discount" min={0} max={50} step={5} />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/TextArea/TextArea.stories.tsx

@@ -4,10 +4,10 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { TextArea as TamaguiTextArea, XStack, YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { TextArea } from "./index";
 import { Paragraph } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof TextArea> = {
   title: "Forms/TextArea",
@@ -82,7 +82,7 @@ export const Main: Story = {
               }}
             />
 
-            <Button action="submit">Save</Button>
+            <ActionButton kind="save" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/ToggleGroup/ToggleGroup.stories.tsx

@@ -3,10 +3,10 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { ToggleGroup as TamaguiToggleGroup, XStack, YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { ToggleGroup } from "./index";
 import { Paragraph, SizableText, Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof ToggleGroup> = {
   title: "Forms/ToggleGroup",
@@ -99,7 +99,7 @@ export const Main: Story = {
                 { label: "Attachments", value: "attachments" },
               ]}
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/nativeDateTime/OsDateTimeSheet.presentation.spec.tsx

@@ -70,10 +70,11 @@ const norm = (value: string) => value.replace(/\s+/gu, " ").trim();
 async function press(text: string) {
   let target: Element | null = null;
   await waitFor(() => {
-    const node = Array.from(document.body.querySelectorAll("*")).find(
-      (el) => el.children.length === 0 && norm(el.textContent ?? "") === norm(text),
-    );
-    if (!node) throw new Error(`no element with text "${text}"`);
+    const node =
+      Array.from(document.body.querySelectorAll("*")).find(
+        (el) => el.children.length === 0 && norm(el.textContent ?? "") === norm(text),
+      ) ?? document.body.querySelector(`[aria-label="${text}"]`);
+    if (!node) throw new Error(`no element with text or label "${text}"`);
     target = node.closest('button, [role="button"]') ?? node;
   });
   fireEvent.click(target!);
@@ -142,7 +143,7 @@ describe("OS date/time sheet — Android presentation", () => {
     open("date", new Date(2026, 2, 15));
     expect(lastPick().mode).toBe("date");
     expect(lastPick().display).toBe("default");
-    expect(document.body.textContent).not.toContain("Done");
+    expect(document.querySelector('[aria-label="Done"]')).toBeNull();
   });
 
   it("a datetime advances from date to time after the first commit", async () => {

package/src/fields/nativeDateTime/OsDateTimeSheet.tsx

@@ -23,6 +23,9 @@ import { platform } from "@multiplatform.one/platform";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
 import { useResolvedKnobs, Text } from "@multiplatform.one/theme";
 import { View, XStack, YStack, useTheme, useThemeName } from "tamagui";
+import { ArrowRightIcon } from "@phosphor-icons/react";
+import { IconButton } from "../../Button";
+import { standardActions } from "../../standardActions";
 import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import { type DateTimePickerEvent, loadDateTimePicker } from "./dateTimePickerLoader";
@@ -164,9 +167,11 @@ export function OsDateTimeSheet({
             <Text color={formCommonColors.muted}>
               {t("Date picker unavailable — requires @react-native-community/datetimepicker")}
             </Text>
-            <Pressable onPress={onCancel} accessibilityRole="button">
-              <Text color="$accentColor">{t("Cancel")}</Text>
-            </Pressable>
+            <IconButton
+              icon={standardActions.cancel.icon}
+              aria-label={t(standardActions.cancel.label)}
+              onPress={onCancel}
+            />
           </YStack>
         </Pressable>
       </Modal>
@@ -209,17 +214,24 @@ export function OsDateTimeSheet({
             paddingBottom={dateSheetBottomPadding(keyboardInset, isIOS)}
           >
             <XStack justifyContent="space-between" {...knobProps.panelPadding}>
-              <Pressable onPress={onCancel} accessibilityRole="button">
-                <Text color={formCommonColors.text}>{t("Cancel")}</Text>
-              </Pressable>
+              <IconButton
+                icon={standardActions.cancel.icon}
+                aria-label={t(standardActions.cancel.label)}
+                onPress={onCancel}
+              />
               {mode === "datetime" && !showTimePicker ? (
-                <Pressable onPress={() => setShowTimePicker(true)} accessibilityRole="button">
-                  <Text color="$accentColor">{t("Next")}</Text>
-                </Pressable>
+                <IconButton
+                  icon={ArrowRightIcon}
+                  aria-label={t("Next")}
+                  onPress={() => setShowTimePicker(true)}
+                />
               ) : (
-                <Pressable onPress={confirm} accessibilityRole="button">
-                  <Text color="$accentColor">{t("Done")}</Text>
-                </Pressable>
+                <IconButton
+                  icon={standardActions.done.icon}
+                  plate="primary"
+                  aria-label={t(standardActions.done.label)}
+                  onPress={confirm}
+                />
               )}
             </XStack>
             <YStack {...knobProps.panelPadding} flexShrink={1} minHeight={0}>

package/src/index.ts

@@ -112,8 +112,22 @@ export { formatActionLabel } from "./actionLabel";
 export type { ActionLabelParts } from "./actionLabel";
 
 // ── Core Primitives ──────────────────────────────────────────
-export { Button } from "./Button";
-export type { ButtonProps, ButtonActionRole } from "./Button";
+export {
+  Button,
+  IconButton,
+  IconButtonGroup,
+  iconButtonGlyphPx,
+  ICON_BUTTON_GLASS_MERGE_PX,
+  ICON_BUTTON_GLYPH_PX,
+  ICON_BUTTON_NEUTRAL_GLYPH_PX,
+  ICON_BUTTON_PRESS_OPACITY,
+} from "./Button";
+export type {
+  ButtonProps,
+  ButtonActionRole,
+  IconButtonGroupProps,
+  IconButtonProps,
+} from "./Button";
 
 export { Input } from "./fields/Input";
 export type { InputProps } from "./fields/Input";
@@ -460,3 +474,5 @@ export type {
   PickedMedia,
   MediaPickerErrorCode,
 } from "./MediaPicker/types";
+export { standardActions, standardActionWords } from "./standardActions";
+export type { StandardAction, StandardActionKind } from "./standardActions";