@pieai/swimmer-ui-kit 3.0.0 → 3.2.0

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
@@ -1146,12 +1202,21 @@ export declare interface GameToggleProps extends Pick<ButtonHTMLAttributes<HTMLB
     hue?: GameUiHue;
 }
 
-export declare function GameTooltip({ children, label }: GameTooltipProps): ReactNode;
+export declare function GameTooltip({ children, label, align, placement, }: GameTooltipProps): ReactNode;
 
 export declare interface GameTooltipProps {
     /** A single focusable trigger element (e.g. GameIconButton). */
     children: ReactNode;
+    /** Plain text; an explicit line break (\n) is kept. */
     label: string;
+    /**
+     * Which edges meet the trigger. `center` (default) centres the bubble; `start`
+     * aligns its left edge with the trigger and extends right; `end` aligns right
+     * edges and extends left.
+     */
+    align?: 'center' | 'start' | 'end';
+    /** Above the trigger (default) or below it. */
+    placement?: 'top' | 'bottom';
 }
 
 export declare interface GameUiHistoryEntry {