@ldkj/web-ui 0.2.2 → 0.4.0

package/components/data-display/card/Card.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { type BoxProps } from "@/components/layout/box";
+export type CardVariant = "outlined" | "elevated" | "filled" | "ghost";
+export type CardPadding = "none" | "sm" | "md" | "lg";
+export type CardDivided = boolean | "x" | "y";
+export type CardSlotProps = BoxProps<React.ElementType>;
+type CardSlotComponent = React.FC<CardSlotProps>;
+export type CardProps = BoxProps<React.ElementType> & {
+    variant?: CardVariant;
+    padding?: CardPadding;
+    divided?: CardDivided;
+    hoverable?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    start?: React.ReactNode;
+    end?: React.ReactNode;
+    contentLoading?: boolean;
+    headerProps?: CardSlotProps;
+    footerProps?: CardSlotProps;
+    leftProps?: CardSlotProps;
+    rightProps?: CardSlotProps;
+    startProps?: CardSlotProps;
+    endProps?: CardSlotProps;
+    contentProps?: CardSlotProps;
+};
+type CardCompound = {
+    Header: CardSlotComponent;
+    Content: CardSlotComponent;
+    Footer: CardSlotComponent;
+    Left: CardSlotComponent;
+    Right: CardSlotComponent;
+    Start: CardSlotComponent;
+    End: CardSlotComponent;
+};
+type CardComponent = React.FC<CardProps> & CardCompound;
+export declare const Card: CardComponent;
+export {};

package/components/data-display/card/index.d.ts

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

package/components/{ui → data-display}/chip/Chip.d.ts

@@ -1,12 +1,18 @@
 import * as React from "react";
 import type { ElementType } from "react";
-import { type ChipVariants } from "./variants";
+import { type ChipRounded, type ChipShadow, type ChipVariants } from "./variants";
+import { type SxProps } from "@/styling";
 type PolymorphicProps<T extends ElementType> = {
     component?: T;
     className?: string;
     class?: string;
 } & Omit<React.ComponentPropsWithoutRef<T>, "as" | "className">;
-export type ChipProps<T extends ElementType = "span"> = PolymorphicProps<T> & ChipVariants;
+type ChipOwnProps = Omit<ChipVariants, "rounded" | "shadow"> & {
+    rounded?: ChipRounded;
+    shadow?: ChipShadow;
+    sx?: SxProps;
+};
+export type ChipProps<T extends ElementType = "span"> = PolymorphicProps<T> & ChipOwnProps;
 export declare function Chip<T extends ElementType = "span">(props: ChipProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Chip {
     var displayName: string;

package/components/{ui → data-display}/chip/variants.d.ts

@@ -1,7 +1,15 @@
 import { type VariantProps } from "class-variance-authority";
+import { type Rounded, type RoundedPreset } from "../../shared/rounded";
+import { type Shadow, type ShadowPreset } from "../../shared/shadow";
 export declare const chipVariants: (props?: ({
     variant?: "dark" | "primary" | "minor" | "success" | "warning" | "danger" | "text" | "light" | null | undefined;
     outline?: boolean | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    rounded?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+    shadow?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "inner" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ChipVariants = VariantProps<typeof chipVariants>;
+export type ChipRoundedPreset = RoundedPreset;
+export type ChipRounded = Rounded;
+export type ChipShadowPreset = ShadowPreset;
+export type ChipShadow = Shadow;

package/components/data-display/qrcodes/QRCode.d.ts

@@ -0,0 +1,16 @@
+import { type QRCodeCanvasProps } from "./QRCodeCanvas";
+import { type QRCodeSizableProps } from "./QRCodeSizable";
+export type QRCodeProps = ({
+    canvas: true;
+} & QRCodeCanvasProps) | ({
+    canvas?: false;
+} & QRCodeSizableProps);
+/**
+ * 渲染二维码组件
+ * - `canvas: true` -> QRCodeCanvas rendered with canvas
+ * - `canvas: false` -> QRCodeSizable rendered with image
+ * - `value: string` -> the value to be displayed in the QR code
+ * - `size: number|string` -> the size of the QR code
+ * - `fullWidth: boolean` -> whether to fill the parent container
+ */
+export default function QRCode({ canvas, ...props }: QRCodeProps): import("react/jsx-runtime").JSX.Element;

package/components/data-display/qrcodes/QRCodeBase.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+interface QRCodeBaseProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    size?: number;
+    value: string;
+    useful?: boolean;
+    /**
+     * - 前景色
+     * - 默认："#000000"
+     */
+    foregroundColor?: string;
+    /**
+     * - 背景色
+     * - 默认："#ffffff"
+     */
+    backgroundColor?: string;
+    /**
+     * - 二维码四周的留白（单位是 px）
+     * - 默认：`0`
+     */
+    margin?: number;
+    /**
+     * - 二维码识别容错率（部分区域被遮挡仍可识别）
+     * - `low`：7% 或更少
+     * - `medium`：15% 或更少
+     * - `quartile`：25% 或更少
+     * - `high`：30% 或更少，二维码中间放 logo 图像时推荐
+     */
+    errorCorrectionLevel?: "low" | "medium" | "quartile" | "high";
+    unload?: React.ReactNode;
+}
+declare const QRCodeBase: React.FC<QRCodeBaseProps>;
+export default QRCodeBase;

package/components/data-display/qrcodes/QRCodeCanvas.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import { type SxProps } from "@/styling";
+export interface QRCodeCanvasProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    value: string;
+    useful?: boolean;
+    uselessElem?: React.ReactNode;
+    uselessProps?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * - 前景色
+     * - 默认："#000000"
+     */
+    foregroundColor?: string;
+    /**
+     * - 背景色
+     * - 默认："#ffffff"
+     */
+    backgroundColor?: string;
+    /**
+     * - 二维码四周的留白（单位是 px）
+     * - 默认：`4`（qrcode 不设置 margin 默认值是 4）
+     */
+    margin?: number;
+    /**
+     * - 二维码识别容错率（部分区域被遮挡仍可识别）
+     * - `low`：7% 或更少
+     * - `medium`：15% 或更少
+     * - `quartile`：25% 或更少
+     * - `high`：30% 或更少，二维码中间放 logo 图像时推荐
+     */
+    errorCorrectionLevel?: "low" | "medium" | "quartile" | "high";
+    /**
+     * - 二维码尺寸
+     * - 默认：`200`
+     */
+    size?: number | string;
+    fullWidth?: boolean;
+    sx?: SxProps;
+}
+export declare const QRCodeCanvas: React.FC<QRCodeCanvasProps>;

package/components/data-display/qrcodes/QRCodeSizable.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import { type SxProps } from "@/styling";
+export interface QRCodeSizableProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * - 二维码尺寸
+     * - 默认：`200`
+     */
+    size?: number | string;
+    value: string;
+    useful?: boolean;
+    uselessElem?: React.ReactNode;
+    uselessProps?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * - 前景色
+     * - 默认："#000000"
+     */
+    foregroundColor?: string;
+    /**
+     * - 背景色
+     * - 默认："#ffffff"
+     */
+    backgroundColor?: string;
+    /**
+     * - 二维码四周的留白（单位是 px）
+     * - 默认：`4`（qrcode 不设置 margin 默认值是 4）
+     */
+    margin?: number;
+    /**
+     * - 二维码识别容错率（部分区域被遮挡仍可识别）
+     * - `low`：7% 或更少
+     * - `medium`：15% 或更少
+     * - `quartile`：25% 或更少
+     * - `high`：30% 或更少，二维码中间放 logo 图像时推荐
+     */
+    errorCorrectionLevel?: "low" | "medium" | "quartile" | "high";
+    unload?: React.ReactNode;
+    fullWidth?: boolean;
+    sx?: SxProps;
+}
+export declare const QRCodeSizable: React.FC<QRCodeSizableProps>;

package/components/data-display/qrcodes/index.d.ts

@@ -0,0 +1,7 @@
+export { default as QRCode } from "./QRCode";
+export type { QRCodeProps } from "./QRCode";
+export { QRCodeCanvas } from "./QRCodeCanvas";
+export type { QRCodeCanvasProps } from "./QRCodeCanvas";
+export { QRCodeSizable } from "./QRCodeSizable";
+export type { QRCodeSizableProps } from "./QRCodeSizable";
+export { default as QRCodeBase } from "./QRCodeBase";

package/components/{ui → interact}/button/Button.d.ts

@@ -1,12 +1,18 @@
 import * as React from "react";
 import type { ElementType } from "react";
-import { type ButtonVariants } from "./variants";
+import { type ButtonRounded, type ButtonShadow, type ButtonVariants } from "./variants";
+import { type SxProps } from "@/styling";
 type PolymorphicProps<T extends ElementType> = {
     component?: T;
     className?: string;
     class?: string;
 } & Omit<React.ComponentPropsWithoutRef<T>, "as" | "className">;
-export type ButtonProps<T extends ElementType = "button"> = PolymorphicProps<T> & ButtonVariants;
+type ButtonOwnProps = Omit<ButtonVariants, "rounded" | "shadow"> & {
+    rounded?: ButtonRounded;
+    shadow?: ButtonShadow;
+    sx?: SxProps;
+};
+export type ButtonProps<T extends ElementType = "button"> = PolymorphicProps<T> & ButtonOwnProps;
 export declare function Button<T extends ElementType = "button">(props: ButtonProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Button {
     var displayName: string;

package/components/{ui → interact}/button/variants.d.ts

@@ -1,8 +1,16 @@
 import { type VariantProps } from "class-variance-authority";
+import { type Rounded, type RoundedPreset } from "../../shared/rounded";
+import { type Shadow, type ShadowPreset } from "../../shared/shadow";
 export declare const buttonVariants: (props?: ({
     variant?: "dark" | "primary" | "secondary" | "minor" | "success" | "warning" | "danger" | "outline" | "ghost" | "link" | "text" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon" | null | undefined;
+    rounded?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+    shadow?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "inner" | null | undefined;
     bounce?: boolean | null | undefined;
     splash?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonVariants = VariantProps<typeof buttonVariants>;
+export type ButtonRoundedPreset = RoundedPreset;
+export type ButtonRounded = Rounded;
+export type ButtonShadowPreset = ShadowPreset;
+export type ButtonShadow = Shadow;

package/components/layout/box/Box.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import type { ElementType } from "react";
+import { type Rounded } from "@/components/shared/rounded";
+import { type Shadow } from "@/components/shared/shadow";
+import { type SxProps } from "@/styling";
+type PolymorphicProps<T extends ElementType> = {
+    component?: T;
+    className?: string;
+    class?: string;
+} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "className">;
+type BoxOwnProps = {
+    sx?: SxProps;
+    rounded?: Rounded;
+    shadow?: Shadow;
+    loading?: boolean;
+    loadingContent?: React.ReactNode;
+    modal?: boolean;
+    modalContent?: React.ReactNode;
+    onModalMaskClick?: React.MouseEventHandler<HTMLDivElement>;
+};
+/**
+ * Box 是通用基础容器组件，支持多态渲染、sx 样式入口，以及元素范围内的 loading/modal 遮罩层。
+ */
+export type BoxProps<T extends ElementType = "div"> = PolymorphicProps<T> & BoxOwnProps;
+export declare function Box<T extends ElementType = "div">(props: BoxProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Box {
+    var displayName: string;
+}
+export {};

package/components/layout/box/index.d.ts

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

package/components/layout/divider/Divider.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type SxProps } from "@/styling";
+export type DividerVariant = "full" | "middle" | "inset";
+export type DividerAlign = "center" | "left" | "right";
+export type DividerProps = React.ComponentPropsWithoutRef<"div"> & {
+    vertical?: boolean;
+    variant?: DividerVariant;
+    align?: DividerAlign;
+    type?: React.CSSProperties["borderStyle"];
+    color?: string;
+    sx?: SxProps;
+};
+export declare function Divider(props: DividerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Divider {
+    var displayName: string;
+}

package/components/layout/divider/index.d.ts

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

package/components/layout/flex/Flex.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { type BoxProps } from "../box";
+export type FlexDirection = "row" | "row-reverse" | "col" | "col-reverse";
+export type FlexWrap = boolean | React.CSSProperties["flexWrap"];
+export type FlexGapPreset = "xs" | "sm" | "md" | "lg" | "xl";
+export type FlexGap = FlexGapPreset | number | string;
+export type FlexSize = number | string;
+/**
+ * Flex 容器属性。
+ */
+export type FlexProps = BoxProps<React.ElementType> & {
+    direction?: FlexDirection;
+    justify?: React.CSSProperties["justifyContent"];
+    items?: React.CSSProperties["alignItems"];
+    flex?: React.CSSProperties["flex"];
+    wrap?: FlexWrap;
+    gap?: FlexGap;
+    width?: FlexSize;
+    height?: FlexSize;
+};
+/**
+ * Flex 是基于 CSS Flexbox 的对齐布局容器。
+ */
+export declare function Flex(props: FlexProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Flex {
+    var displayName: string;
+}

package/components/layout/flex/index.d.ts

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

package/components/layout/grid/Grid.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { type BoxProps } from "../box";
+export type GridSize = number | "grow";
+export type GridOffset = number | "auto";
+export type GridSpacing = number | string;
+export type GridDirection = "row" | "row-reverse";
+export type GridWrap = boolean | React.CSSProperties["flexWrap"];
+export type GridProps = BoxProps<React.ElementType> & {
+    container?: boolean;
+    size?: GridSize;
+    offset?: GridOffset;
+    columns?: number;
+    spacing?: GridSpacing;
+    rowSpacing?: GridSpacing;
+    columnSpacing?: GridSpacing;
+    wrap?: GridWrap;
+    direction?: GridDirection;
+};
+/**
+ * Grid 是基于 Flexbox 的 12 列布局容器。
+ */
+export declare function Grid(props: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Grid {
+    var displayName: string;
+}

package/components/layout/grid/index.d.ts

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

package/components/layout/safe-area/SafeArea.d.ts

@@ -0,0 +1,32 @@
+import type { ElementType } from "react";
+import { type BoxProps } from "../box";
+export type SafeAreaPosition = "top" | "bottom" | "both" | "none";
+type SafeAreaOwnProps = {
+    position?: SafeAreaPosition;
+    horizontal?: boolean;
+};
+export type SafeAreaProps = BoxProps<ElementType> & SafeAreaOwnProps;
+/**
+ * SafeArea 用于适配移动端刘海屏，灵动岛和手势区域等的安全区容器。
+ */
+export declare function SafeArea(props: SafeAreaProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SafeArea {
+    var displayName: string;
+}
+export type SafeAreaTopProps = Omit<SafeAreaProps, "position">;
+export type SafeAreaBottomProps = Omit<SafeAreaProps, "position">;
+/**
+ * SafeAreaTop 仅应用顶部安全区内边距。
+ */
+export declare function SafeAreaTop(props: SafeAreaTopProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SafeAreaTop {
+    var displayName: string;
+}
+/**
+ * SafeAreaBottom 仅应用底部安全区内边距。
+ */
+export declare function SafeAreaBottom(props: SafeAreaBottomProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SafeAreaBottom {
+    var displayName: string;
+}
+export {};

package/components/layout/safe-area/index.d.ts

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

package/components/shared/rounded.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from "react";
+export declare const roundedPresetClasses: {
+    readonly xs: "rounded-[2px]";
+    readonly sm: "rounded-sm";
+    readonly md: "rounded-md";
+    readonly lg: "rounded-lg";
+    readonly xl: "rounded-xl";
+    readonly full: "rounded-full";
+};
+export type RoundedPreset = keyof typeof roundedPresetClasses;
+export type Rounded = RoundedPreset | number | string;
+export declare function resolveRounded(rounded?: Rounded): {
+    roundedPreset?: RoundedPreset;
+    roundedStyle?: CSSProperties;
+};

package/components/shared/shadow.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from "react";
+export declare const shadowPresetClasses: {
+    readonly none: "shadow-none";
+    readonly xs: "shadow-[0_1px_2px_rgba(15,23,42,0.08)]";
+    readonly sm: "shadow-sm";
+    readonly md: "shadow-md";
+    readonly lg: "shadow-lg";
+    readonly xl: "shadow-xl";
+    readonly inner: "shadow-inner";
+};
+export type ShadowPreset = keyof typeof shadowPresetClasses;
+export type Shadow = ShadowPreset | string;
+export declare function resolveShadow(shadow?: Shadow): {
+    shadowPreset?: ShadowPreset;
+    shadowStyle?: CSSProperties;
+};