@endfield-ui/react 1.0.1 → 1.2.0

package/dist/game.d.ts

@@ -0,0 +1,384 @@
+
+import { Dialog } from "@base-ui/react/dialog";
+import { CSSProperties, ComponentProps, HTMLAttributes, ReactElement, ReactNode, Ref, RefObject } from "react";
+import { SplashScreenProps } from "./index.js";
+//#region src/game/animated-dialog/AnimatedDialog.d.ts
+type PopupProps$1 = ComponentProps<typeof Dialog.Popup>;
+type PortalProps$1 = ComponentProps<typeof Dialog.Portal>;
+type CloseAction = () => boolean | void | PromiseLike<boolean | void>;
+type SlotClassName = string | ((open: boolean) => string);
+type AnimatedDialogClassNames = {
+  backdrop?: SlotClassName;
+  alert?: SlotClassName;
+  contentContainer?: SlotClassName;
+  header?: SlotClassName;
+  title?: SlotClassName;
+  footer?: SlotClassName;
+  close?: SlotClassName;
+};
+type AnimatedDialogProps = Omit<ComponentProps<"div">, "title" | "children" | "onClose" | "className" | "style"> & {
+  trigger?: ReactElement<Record<string, unknown>>;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  width?: CSSProperties["width"];
+  height?: CSSProperties["height"];
+  className?: string;
+  classNames?: AnimatedDialogClassNames;
+  /** 点遮罩是否请求关闭。默认允许。 */
+  dismissible?: boolean;
+  /** Esc 是否请求关闭。未传时跟随 dismissible。 */
+  keyboardCloseable?: boolean;
+  /** 所有内部关闭请求都会执行；返回 false 或失败时保持打开。 */
+  onClose?: CloseAction;
+  /** 遮罩与 Esc 请求先执行此回调，再执行 onClose。 */
+  onDismiss?: CloseAction;
+  closeLabel?: string;
+  initialFocus?: PopupProps$1["initialFocus"];
+  finalFocus?: PopupProps$1["finalFocus"];
+  keepMounted?: boolean;
+  /**
+   * 是不是模态。默认是。传 `false` 时不锁焦点、不锁页面滚动，页面的其余部分照常能用——
+   * 配上 `container` 可以把弹窗嵌在页面的一块区域里展示。
+   */
+  modal?: boolean;
+  /** 弹层挂到哪个元素里。默认挂在 `<body>` 下 */
+  container?: PortalProps$1["container"];
+  children?: ReactNode;
+};
+export declare function AnimatedDialog({ trigger, open: controlledOpen, defaultOpen, onOpenChange, title, description, icon, width, height, className, classNames, dismissible, keyboardCloseable, onClose, onDismiss, closeLabel, initialFocus, finalFocus, keepMounted, modal, container, children, ...popupProps }: AnimatedDialogProps): import("react").JSX.Element;
+//#endregion
+//#region src/game/banner-alert/types.d.ts
+type PopupProps = ComponentProps<typeof Dialog.Popup>;
+type PortalProps = ComponentProps<typeof Dialog.Portal>;
+type AlertAction = () => boolean | void | PromiseLike<boolean | void>;
+type AlertClassName = string | ((open: boolean) => string);
+type AlertClassNames = {
+  backdrop?: AlertClassName;
+  alert?: AlertClassName;
+  content?: AlertClassName;
+};
+type AlertModalProps = Omit<ComponentProps<"div">, "title" | "children" | "onClose" | "onCancel" | "style"> & {
+  trigger?: ReactElement<Record<string, unknown>>;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title: ReactNode;
+  description?: ReactNode;
+  dismissible?: boolean;
+  keyboardCloseable?: boolean;
+  hideCancel?: boolean;
+  cancelText?: string;
+  confirmText?: string;
+  loading?: boolean;
+  showIcon?: boolean;
+  width?: CSSProperties["width"];
+  height?: CSSProperties["height"];
+  classNames?: AlertClassNames;
+  onConfirm?: AlertAction;
+  onCancel?: AlertAction;
+  onDismiss?: AlertAction;
+  onClose?: AlertAction;
+  initialFocus?: PopupProps["initialFocus"];
+  finalFocus?: PopupProps["finalFocus"];
+  keepMounted?: boolean;
+  /**
+   * 是不是模态。默认是。传 `false` 时不锁焦点、不锁页面滚动，页面的其余部分照常能用——
+   * 配上 `container` 可以把弹窗嵌在页面的一块区域里展示。
+   */
+  modal?: boolean;
+  /** 弹层挂到哪个元素里。默认挂在 `<body>` 下 */
+  container?: PortalProps["container"];
+  children?: ReactNode;
+};
+//#endregion
+//#region src/game/banner-alert/BannerAlert.d.ts
+type BannerAlertProps = AlertModalProps;
+export declare function BannerAlert({ children, width, hideCancel, cancelText, confirmText, showIcon, classNames, ...props }: BannerAlertProps): import("react").JSX.Element;
+//#endregion
+//#region src/game/full-width-alert/FullWidthAlert.d.ts
+type FullWidthAlertProps = Omit<AlertModalProps, "width">;
+/** 横贯视口的确认面板，底部按钮突出于面板下沿。 */
+export declare function FullWidthAlert({ hideCancel, cancelText, confirmText, showIcon, height, classNames, children, ...props }: FullWidthAlertProps): import("react").JSX.Element;
+//#endregion
+//#region src/game/item-icon/types.d.ts
+type ItemIconTrans = "" | "formula" | "bigGem";
+interface ItemIconLayers {
+  iconUrl: string;
+  iconBgUrl?: string;
+  iconMarkUrl?: string;
+  iconOverlayUrl?: string;
+  iconContentUrl?: string;
+  iconTrans?: ItemIconTrans;
+  iconShowRarity?: boolean;
+}
+interface ItemIconImageProps {
+  src: string;
+  alt: string;
+  className?: string;
+  style?: CSSProperties;
+  fallback?: ReactNode;
+  loading?: "lazy" | "eager";
+}
+type ItemIconImageRenderer = (props: ItemIconImageProps) => ReactNode;
+interface ItemIconProps {
+  layers: ItemIconLayers;
+  alt: string;
+  className?: string;
+  style?: CSSProperties;
+  fallback?: ReactNode;
+  loading?: "lazy" | "eager";
+  renderImage?: ItemIconImageRenderer;
+}
+//#endregion
+//#region src/game/item-icon/ItemIcon.d.ts
+export declare function ItemIcon({ layers, alt, className, style, fallback, loading, renderImage }: ItemIconProps): import("react").JSX.Element;
+//#endregion
+//#region src/game/item-icon/helpers.d.ts
+export declare const EMPTY_ITEM_ICON_LAYERS: Readonly<Required<ItemIconLayers>>;
+export declare const ITEM_ICON_TRANSFORMS: {
+  readonly formula: {
+    readonly scale: 0.72;
+    readonly pivotX: 1;
+    readonly pivotY: 0.5;
+  };
+  readonly bigGem: {
+    readonly scale: 1;
+    readonly offsetX: 3;
+    readonly offsetY: 4;
+  };
+};
+type ItemIconTransformKey = keyof typeof ITEM_ICON_TRANSFORMS;
+export declare function itemIconTransformStyle(key: ItemIconTransformKey): CSSProperties;
+export declare function coerceItemIconTrans(value: unknown): ItemIconTrans;
+export declare function pickItemIconLayers(source: object | null | undefined, prefix?: string): Required<ItemIconLayers>;
+//#endregion
+//#region src/game/item-card/ItemCard.d.ts
+type ItemCardKind = "weapon" | "item" | "enemy" | "";
+type ItemCardVariant = "banner" | "inventory";
+type ItemCardSelectionAction = {
+  onSelect: () => void;
+  ariaLabel?: string;
+  selected?: boolean;
+  disabled?: boolean;
+  disabledReason?: string;
+};
+type ItemCardLinkProps = {
+  href: string;
+  children: ReactNode;
+  className: string;
+  "aria-label": string;
+  "data-item-tooltip-id"?: string;
+};
+type ItemCardLinkRenderer = (props: ItemCardLinkProps) => ReactNode;
+type ItemCardProps = {
+  kind: ItemCardKind;
+  name: string;
+  imageUrl: string;
+  rarity: number;
+  itemId?: string;
+  /** 实际链接地址；组件不转换 Wiki 文章标题。 */
+  href?: string;
+  variant?: ItemCardVariant;
+  count?: number;
+  showName?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  icon?: ItemIconLayers;
+  action?: ItemCardSelectionAction;
+  badges?: ReactNode;
+  ariaLabel?: string;
+  fallback?: ReactNode;
+  renderImage?: ItemIconImageRenderer;
+  renderLink?: ItemCardLinkRenderer;
+  renderName?: (name: string) => ReactNode;
+  renderCount?: (count: number) => ReactNode;
+};
+/** Wiki 物品卡片：名称横条或库存数量横条，共用完整图层图标。 */
+export declare const ItemCard: import("react").MemoExoticComponent<({ kind, name, imageUrl, rarity, itemId, href, variant, count, showName, className, style, icon, action, badges, ariaLabel, fallback, renderImage, renderLink, renderName, renderCount }: ItemCardProps) => string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined>;
+//#endregion
+//#region src/game/item-tooltip-card/types.d.ts
+type ItemTooltipObtainWay = {
+  id?: string;
+  name: string;
+  iconUrl?: string;
+  href?: string;
+};
+type ItemTooltipItem = ItemIconLayers & {
+  name: string;
+  rarity: number;
+  category?: string;
+  usage?: string;
+  description?: string;
+  /** 实际 URL，由使用方转换自己的文章或路由地址。 */
+  href?: string;
+  obtainWays?: readonly ItemTooltipObtainWay[];
+  noObtainWayHint?: string;
+};
+type ItemTooltipLinkProps = {
+  href: string;
+  className: string;
+  children: ReactNode;
+  "aria-label"?: string;
+};
+type ItemTooltipLinkRenderer = (props: ItemTooltipLinkProps) => ReactNode;
+type ItemTooltipCardProps = {
+  item: ItemTooltipItem;
+  className?: string;
+  style?: CSSProperties;
+  fontFamily?: string;
+  obtainLabel?: string;
+  renderText?: (text: string) => ReactNode;
+  renderImage?: ItemIconImageRenderer;
+  renderLink?: ItemTooltipLinkRenderer;
+};
+//#endregion
+//#region src/game/item-tooltip-card/ItemTooltipCard.d.ts
+/** 固定灰色游戏皮肤的物品详情；文章路由与富文本由使用方接入。 */
+export declare function ItemTooltipCard({ item, className, style, fontFamily, obtainLabel, renderText, renderImage, renderLink }: ItemTooltipCardProps): import("react").JSX.Element;
+//#endregion
+//#region src/game/item-hover-card/ItemHoverCard.d.ts
+type ItemHoverCardLayerProps = {
+  /** 由使用方的本地数据或缓存解析；组件不发请求。 */
+  resolveItem: (itemId: string, host: HTMLElement) => ItemTooltipItem | null | undefined;
+  root?: HTMLElement | Document;
+  rootRef?: RefObject<HTMLElement | null>;
+  disabled?: boolean;
+  /** 默认只在 768px 以上、支持精细指针悬停的设备启用。 */
+  disableOnMobile?: boolean;
+  openDelay?: number;
+  closeDelay?: number;
+  gap?: number;
+  width?: CSSProperties["width"];
+  className?: string;
+  style?: CSSProperties;
+  cardProps?: Omit<ItemTooltipCardProps, "item">;
+  onOpenChange?: (open: boolean, itemId: string | null) => void;
+};
+/** 一个监听层为网格内所有 data-item-tooltip-id 提供物品预览。 */
+export declare function ItemHoverCardLayer({ resolveItem, root, rootRef, disabled, disableOnMobile, openDelay, closeDelay, gap, width, className, style, cardProps, onOpenChange }: ItemHoverCardLayerProps): import("react").JSX.Element | null;
+type ItemHoverCardProps = Omit<ItemHoverCardLayerProps, "resolveItem" | "root" | "rootRef"> & {
+  item: ItemTooltipItem;
+  children: ReactNode;
+  triggerProps?: Omit<HTMLAttributes<HTMLSpanElement>, "children">;
+};
+export declare function ItemHoverCard({ item, children, triggerProps, ...layerProps }: ItemHoverCardProps): import("react").JSX.Element;
+//#endregion
+//#region src/game/rounded-button/RoundedButton.d.ts
+type RoundedButtonVariant = "primary" | "default";
+type RoundedButtonSlotClass = string | ((isPrimary: boolean) => string);
+type RoundedButtonProps = ComponentProps<"button"> & {
+  variant?: RoundedButtonVariant;
+  text?: string;
+  icon?: ReactNode;
+  showIcon?: boolean;
+  iconPosition?: "left" | "right";
+  loading?: boolean;
+  classNames?: {
+    button?: RoundedButtonSlotClass;
+    text?: RoundedButtonSlotClass;
+    icon?: RoundedButtonSlotClass;
+  };
+};
+/** 原灰色圆角按钮；悬停闪动由浏览器动画执行。 */
+export declare function RoundedButton({ variant, type, text, children, icon, showIcon, iconPosition, loading, disabled, className, classNames, onClick, onPointerEnter, onPointerLeave, ...props }: RoundedButtonProps): import("react").JSX.Element;
+//#endregion
+//#region src/game/rounded-button/RoundedIconButton.d.ts
+type RoundedIconButtonProps = ComponentProps<"button"> & {
+  "aria-label": string;
+  children: ReactNode;
+};
+/** 24px 圆形图标按钮；纹理与双边线只作装饰。 */
+export declare function RoundedIconButton({ type, disabled, children, className, ...props }: RoundedIconButtonProps): import("react").JSX.Element;
+//#endregion
+//#region src/game/rounded-select/RoundedSelect.d.ts
+type RoundedSelectOption<T extends string = string> = {
+  value: T;
+  label: ReactNode;
+  disabled?: boolean;
+  hidden?: boolean;
+  left?: ReactNode | ((selected: boolean) => ReactNode);
+  right?: ReactNode | ((selected: boolean) => ReactNode);
+  /** 自定义标签的键盘文字匹配名称。 */
+  textValue?: string;
+};
+type RoundedSelectProps<T extends string = string> = {
+  options: readonly RoundedSelectOption<T>[];
+  value?: T | null;
+  defaultValue?: T | null;
+  onValueChange?: (value: T) => void;
+  placeholder?: ReactNode;
+  name?: string;
+  form?: string;
+  required?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  id?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  className?: string;
+  classNames?: {
+    container?: string;
+    trigger?: string;
+    option?: string;
+    optionContainer?: string;
+    optionScrollArea?: string;
+  };
+  ref?: Ref<HTMLButtonElement>;
+};
+/** 圆角触发器与半覆盖面板；隐藏项不进入列表，禁用项不能选择。 */
+export declare function RoundedSelect<T extends string = string>({ options, value, defaultValue, onValueChange, placeholder, name, form, required: requiredProp, disabled: disabledProp, invalid: invalidProp, open, defaultOpen, onOpenChange, id: idProp, "aria-label": ariaLabel, "aria-describedby": describedByProp, className, classNames, ref }: RoundedSelectProps<T>): import("react").JSX.Element;
+//#endregion
+//#region src/game/rounded-switch/RoundedSwitch.d.ts
+type RoundedSwitchProps = Omit<ComponentProps<"div">, "defaultChecked" | "defaultValue" | "onChange" | "children"> & {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  onText?: ReactNode;
+  offText?: ReactNode;
+  name?: string;
+  form?: string;
+  disabled?: boolean;
+  required?: boolean;
+};
+export declare function RoundedSwitch({ checked, defaultChecked, onCheckedChange, onText, offText, name, form, disabled: disabledProp, required: requiredProp, className, onKeyDown, ...props }: RoundedSwitchProps): import("react").JSX.Element;
+//#endregion
+//#region src/game/rounded-toggle/RoundedToggle.d.ts
+type RoundedToggleOption = {
+  value: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+  "aria-label"?: string;
+};
+type RoundedToggleProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "children"> & {
+  options: readonly RoundedToggleOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  label?: string;
+  name?: string;
+  form?: string;
+  required?: boolean;
+  disabled?: boolean;
+};
+export declare function RoundedToggle({ options, value, defaultValue, onValueChange, label, name, form, required: requiredProp, disabled: disabledProp, className, onKeyDown, "aria-label": ariaLabel, ...props }: RoundedToggleProps): import("react").JSX.Element;
+//#endregion
+//#region src/game/splash-screen/EndfieldSplashScreen.d.ts
+type EndfieldSplashScreenProps = Omit<SplashScreenProps, "backdrop" | "caption" | "decor">;
+/**
+ * 官网的开屏页：主入口的 `SplashScreen` 填上官方的标志、底图和微标。
+ * 排法、动画、属性都是 `SplashScreen` 的，这里只管把图放进它的插槽。
+ *
+ * 标志、标语、状态字可以换（`logo`、`tagline`、`status`）；底图和微标经变量换，
+ * 或者用 `data-ef-game-images="off"` 整类关掉，见 docs/design/game/splash-screen.md
+ */
+export declare function EndfieldSplashScreen({ logo, tagline, status, className, ...props }: EndfieldSplashScreenProps): import("react").JSX.Element;
+//#endregion
+export type { AnimatedDialogClassNames, AnimatedDialogProps, BannerAlertProps, EndfieldSplashScreenProps, FullWidthAlertProps, ItemCardKind, ItemCardLinkProps, ItemCardLinkRenderer, ItemCardProps, ItemCardSelectionAction, ItemCardVariant, ItemHoverCardLayerProps, ItemHoverCardProps, ItemIconImageProps, ItemIconImageRenderer, ItemIconLayers, ItemIconProps, ItemIconTrans, ItemIconTransformKey, ItemTooltipCardProps, ItemTooltipItem, ItemTooltipLinkProps, ItemTooltipLinkRenderer, ItemTooltipObtainWay, RoundedButtonProps, RoundedButtonVariant, RoundedIconButtonProps, RoundedSelectOption, RoundedSelectProps, RoundedSwitchProps, RoundedToggleOption, RoundedToggleProps };