@antscorp/ui 0.1.4 → 0.1.5

package/src/molecules/TokenTextField.tsx

@@ -14,6 +14,7 @@ import { mergeProps, themeProps } from "@astryxdesign/core/utils";
 import * as stylex from "@stylexjs/stylex";
 import { lazy, type ReactNode, Suspense, useId, useRef, useState } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
 import type { TokenLook } from "../lib/tokenEditorConfig";
 import { FieldSkeleton } from "./FieldSkeleton";
 import { TokenEditorBoundary } from "./token-editor-boundary";
@@ -24,9 +25,8 @@ const Editor = lazy(() => import("./token-editor"));
 export type { TokenLook } from "../lib/tokenEditorConfig";
 
 /** What `TokenTextField` takes. */
-export type TokenTextFieldProps = Pick<
-  FieldProps,
-  "label" | "description" | "isLabelHidden" | "isDisabled" | "isRequired"
+export type TokenTextFieldProps = Forwardable<
+  Pick<FieldProps, "label" | "description" | "isLabelHidden" | "isDisabled" | "isRequired">
 > & {
   /** The committed string; outside changes replace the local draft. */
   readonly value: string;

package/src/organisms/TokenPickerDialog.tsx

@@ -6,6 +6,7 @@ import { TextInput } from "@astryxdesign/core/TextInput";
 import { VStack } from "@astryxdesign/core/VStack";
 import { type ReactNode, useState } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
 import { useLoadingShown } from "../lib/useLoadingShown";
 import { FieldSkeleton } from "../molecules/FieldSkeleton";
 import { leafOf, type TreeItem } from "../molecules/TreeOptions";
@@ -22,7 +23,7 @@ export type TokenPickerValue = {
 };
 
 /** What `TokenPickerDialog` takes. */
-export type TokenPickerDialogProps = Pick<DialogProps, "isOpen"> & {
+export type TokenPickerDialogProps = Forwardable<Pick<DialogProps, "isOpen">> & {
   /** Closes or cancels the dialog. */
   readonly onClose: () => void;
   /** Dialog heading. */

package/src/organisms/TransferPicker.tsx

@@ -10,6 +10,7 @@ import { InfoTip } from "../atoms/InfoTip";
 import { PanelSearchInput } from "../atoms/PanelSearchInput";
 import { RowSkeletons } from "../atoms/RowSkeletons";
 import { TextAction } from "../atoms/TextAction";
+import type { Forwardable } from "../lib/forwardable";
 import { useLoadingShown } from "../lib/useLoadingShown";
 import { type LoadMoreOptions, useLoadMore } from "../lib/useLoadMore";
 import { CheckRow } from "../molecules/CheckRow";
@@ -34,9 +35,8 @@ export type TransferPickerOption<V extends string> = {
 };
 
 /** What `TransferPicker` takes. */
-export type TransferPickerProps<V extends string> = Pick<
-  LoadMoreOptions,
-  "onLoadMore" | "hasMore" | "isLoadingMore"
+export type TransferPickerProps<V extends string> = Forwardable<
+  Pick<LoadMoreOptions, "onLoadMore" | "hasMore" | "isLoadingMore">
 > & {
   /** Names the list of options (the start column). */
   readonly label: string;

package/src/theme/AntsomiTheme.tsx

@@ -2,11 +2,13 @@ import { antsomiTheme } from "@antscorp/astryx-theme-antsomi";
 import { Theme } from "@astryxdesign/core/theme";
 import type { ComponentProps, ReactElement } from "react";
 
+import type { Forwardable } from "../lib/forwardable";
+
 /**
  * Astryx Theme props with the Antsomi base theme as the default.
  * Inherited `children` renders the themed subtree; `mode` selects light, dark or system mode.
  */
-export type AntsomiThemeProps = Omit<ComponentProps<typeof Theme>, "theme"> & {
+export type AntsomiThemeProps = Forwardable<Omit<ComponentProps<typeof Theme>, "theme">> & {
   /** Optional override created with `defineTheme({ extends: antsomiTheme, … })`. */
   readonly theme?: ComponentProps<typeof Theme>["theme"];
 };
@@ -16,6 +18,10 @@ export type AntsomiThemeProps = Omit<ComponentProps<typeof Theme>, "theme"> & {
  * Import `@antscorp/ui/theme.css` separately. Extend the base with Astryx's
  * `defineTheme({ name: "custom", extends: antsomiTheme, tokens: { … } })` and pass it as `theme`.
  */
-export function AntsomiTheme({ theme, ...rest }: AntsomiThemeProps): ReactElement {
-  return <Theme theme={theme ?? antsomiTheme} {...rest} />;
+export function AntsomiTheme({ theme, mode, children }: AntsomiThemeProps): ReactElement {
+  return (
+    <Theme theme={theme ?? antsomiTheme} {...(mode !== undefined && { mode })}>
+      {children}
+    </Theme>
+  );
 }