@pieai/swimmer-ui-kit 3.1.0 → 3.2.1

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
 import { JSX } from 'react';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { Ref } from 'react';
 import { RefAttributes } from 'react';
@@ -691,6 +692,61 @@ export declare interface GameFieldProps {
     className?: string;
 }
 
+/**
+ * A non-modal hover/focus/tap card that teaches one short idea. Floating UI owns
+ * collision, hover intent, focus order and dismissal, as in GameHelpTip. The
+ * card is portalled into the closest native dialog and built on the static
+ * droplet surface, so it adds no liquid engine and no LiquidPopover.
+ */
+export declare function GameHelpCard({ children, label, topics, link, placement, align, openDelay, }: GameHelpCardProps): ReactNode;
+
+export declare interface GameHelpCardProps {
+    /** One focusable trigger element (e.g. a GameIconButton link or button). */
+    children: ReactElement;
+    /** Accessible name of the card, e.g. "怎么用". */
+    label: string;
+    /** 1 to 4 topics; more than one shows tabs. */
+    topics: readonly GameHelpCardTopic[];
+    /** Optional link at the bottom, e.g. the full guide. */
+    link?: {
+        href: string;
+        label: string;
+    };
+    placement?: 'top' | 'bottom';
+    align?: 'start' | 'center' | 'end';
+    /** Hover intent delay in ms; default 200. */
+    openDelay?: number;
+}
+
+export declare interface GameHelpCardTopic {
+    id: string;
+    /** Tab label when there are several topics. */
+    label: string;
+    title: string;
+    /** 1–3 short lines; "\n" breaks a line. */
+    body: string;
+    media?: GameHelpMedia;
+}
+
+export declare type GameHelpMedia = {
+    kind: 'video';
+    /** Ordered sources, e.g. webm then mp4. */
+    sources: readonly {
+        src: string;
+        type: 'video/webm' | 'video/mp4';
+    }[];
+    poster: string;
+    alt: string;
+    width: number;
+    height: number;
+} | {
+    kind: 'image';
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+};
+
 /** Optional help, not an action menu or a place to hide required information.
  * Floating UI owns collision avoidance, hover/focus/click and dismissal. The
  * native help button never submits its surrounding form. Inside a native modal