@ldkj/web-ui 0.12.0 → 0.14.0

package/components/interact/modal/Modal.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { type SxProps } from "@/styling";
+export type ModalBlur = boolean | number | string;
+export type ModalProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "onClose" | "onOpen"> & {
+    open?: boolean;
+    destroyOnClose?: boolean;
+    closeOnMaskClick?: boolean;
+    scrollable?: boolean;
+    alpha?: number;
+    blur?: ModalBlur;
+    x?: string;
+    y?: string;
+    translateX?: string;
+    translateY?: string;
+    onClose?: () => void;
+    onOpen?: () => void;
+    className?: string;
+    class?: string;
+    style?: React.CSSProperties;
+    sx?: SxProps;
+    contentClassName?: string;
+    contentClass?: string;
+    contentStyle?: React.CSSProperties;
+    contentSx?: SxProps;
+};
+/**
+ * Modal 全屏遮罩容器，适用于轻量弹层和临时聚焦内容。
+ */
+export declare function Modal(props: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Modal {
+    var displayName: string;
+}

package/components/interact/modal/index.d.ts

@@ -0,0 +1,2 @@
+export { Modal } from "./Modal";
+export type { ModalProps, ModalBlur } from "./Modal";

package/components/interact/popover/Popover.d.ts

@@ -0,0 +1,119 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type Rounded } from "@/components/shared/rounded";
+import { type Shadow } from "@/components/shared/shadow";
+import { type SxProps } from "@/styling";
+type RadixPopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>;
+type RadixPopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;
+type RadixPopoverCloseProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Close>;
+type PopoverWrapperProps<TProps> = Omit<TProps, "className" | "style"> & {
+    className?: string;
+    class?: string;
+    style?: React.CSSProperties;
+    sx?: SxProps;
+};
+export type PopoverTriggerProps = PopoverWrapperProps<RadixPopoverTriggerProps>;
+export type PopoverCloseProps = PopoverWrapperProps<RadixPopoverCloseProps>;
+/**
+ * Popover 根组件，管理弹层的打开状态。
+ *
+ * 该组件保留 Radix Popover Root 的完整能力，支持非受控与受控两种用法。
+ */
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+/**
+ * Popover 触发器。
+ *
+ * 使用 `asChild` 时会由本组件生成一层触发容器，业务子组件无需转发 ref。
+ */
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref">, "className" | "style"> & {
+    className?: string;
+    class?: string;
+    style?: React.CSSProperties;
+    sx?: SxProps;
+} & React.RefAttributes<HTMLElement>>;
+/**
+ * Popover 锚点。
+ *
+ * 当弹层定位目标与触发器不是同一个元素时，可以使用 Anchor 明确定位参考元素。
+ */
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Popover 关闭按钮。
+ *
+ * 使用 `asChild` 时会由本组件生成一层关闭容器，业务子组件无需转发 ref。
+ */
+declare const PopoverClose: React.ForwardRefExoticComponent<Omit<Omit<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>, "ref">, "className" | "style"> & {
+    className?: string;
+    class?: string;
+    style?: React.CSSProperties;
+    sx?: SxProps;
+} & React.RefAttributes<HTMLElement>>;
+/**
+ * PopoverContent 的属性。
+ */
+export type PopoverContentProps = Omit<RadixPopoverContentProps, "className" | "style"> & {
+    /**
+     * 弹层宽度。传入数字时自动转换为 px。
+     *
+     * @default 288
+     */
+    width?: number | string;
+    /**
+     * 弹层圆角，支持本库圆角预设或任意 CSS border-radius 值。
+     *
+     * @default "lg"
+     */
+    rounded?: Rounded;
+    /**
+     * 弹层阴影，支持本库阴影预设或任意 CSS box-shadow 值。
+     *
+     * @default "md"
+     */
+    shadow?: Shadow;
+    /**
+     * 本库 sx 样式入口，支持对象、数组、函数与嵌套选择器。
+     */
+    sx?: SxProps;
+    /**
+     * 兼容历史 class 写法。
+     */
+    class?: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+/**
+ * Popover 内容面板。
+ *
+ * 默认通过 Portal 渲染到 body，并保留 Radix Content 的定位、碰撞检测与焦点管理能力。
+ */
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref">, "className" | "style"> & {
+    /**
+     * 弹层宽度。传入数字时自动转换为 px。
+     *
+     * @default 288
+     */
+    width?: number | string;
+    /**
+     * 弹层圆角，支持本库圆角预设或任意 CSS border-radius 值。
+     *
+     * @default "lg"
+     */
+    rounded?: Rounded;
+    /**
+     * 弹层阴影，支持本库阴影预设或任意 CSS box-shadow 值。
+     *
+     * @default "md"
+     */
+    shadow?: Shadow;
+    /**
+     * 本库 sx 样式入口，支持对象、数组、函数与嵌套选择器。
+     */
+    sx?: SxProps;
+    /**
+     * 兼容历史 class 写法。
+     */
+    class?: string;
+    className?: string;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, };

package/components/interact/popover/index.d.ts

@@ -0,0 +1 @@
+export * from "./Popover";

package/components/interact/tooltip/Tooltip.d.ts

@@ -0,0 +1,93 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { type SxProps } from "@/styling";
+export type TooltipTone = "dark" | "light" | "primary";
+type WithStyleProps = {
+    className?: string;
+    class?: string;
+    sx?: SxProps;
+};
+export type TooltipTriggerProps = Omit<React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>, "className" | "style"> & WithStyleProps & {
+    style?: React.CSSProperties;
+    /**
+     * 当 `asChild` 为 true 时，指定用于包裹 children 的元素或组件。
+     *
+     * @default "span"
+     */
+    asChildWrapper?: React.ElementType;
+};
+export type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & WithStyleProps & {
+    /**
+     * 控制 Tooltip 内容的视觉语气。
+     *
+     * @default "dark"
+     */
+    tone?: TooltipTone;
+    /**
+     * 是否显示指向触发元素的箭头。
+     *
+     * @default false
+     */
+    arrow?: boolean;
+};
+export type TooltipArrowProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow> & WithStyleProps & {
+    /**
+     * 箭头颜色语气；通常与 TooltipContent 的 tone 保持一致。
+     *
+     * @default "dark"
+     */
+    tone?: TooltipTone;
+};
+/**
+ * TooltipProvider 用于配置当前 React 子树内 Tooltip 的延迟和跳过延迟行为。
+ */
+declare const TooltipProvider: ({ delayDuration, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Tooltip 是 Radix Tooltip Root 的组件库导出，用于包裹单个提示实例。
+ */
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+/**
+ * TooltipPortal 用于将 TooltipContent 渲染到独立 Portal 容器。
+ */
+declare const TooltipPortal: React.FC<TooltipPrimitive.TooltipPortalProps>;
+/**
+ * TooltipTrigger 用于声明 Tooltip 的触发元素，支持 `asChild` 组合业务组件。
+ */
+declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref">, "className" | "style"> & WithStyleProps & {
+    style?: React.CSSProperties;
+    /**
+     * 当 `asChild` 为 true 时，指定用于包裹 children 的元素或组件。
+     *
+     * @default "span"
+     */
+    asChildWrapper?: React.ElementType;
+} & React.RefAttributes<HTMLElement>>;
+/**
+ * TooltipArrow 渲染 Tooltip 的箭头，可单独用于自定义 Content 结构。
+ */
+declare const TooltipArrow: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & WithStyleProps & {
+    /**
+     * 箭头颜色语气；通常与 TooltipContent 的 tone 保持一致。
+     *
+     * @default "dark"
+     */
+    tone?: TooltipTone;
+} & React.RefAttributes<SVGSVGElement>>;
+/**
+ * TooltipContent 渲染提示内容，内置基础动画、tone 语气和可选 arrow。
+ */
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & WithStyleProps & {
+    /**
+     * 控制 Tooltip 内容的视觉语气。
+     *
+     * @default "dark"
+     */
+    tone?: TooltipTone;
+    /**
+     * 是否显示指向触发元素的箭头。
+     *
+     * @default false
+     */
+    arrow?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, TooltipPortal, TooltipArrow, };

package/components/interact/tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from "./Tooltip";