@ldkj/web-ui 0.3.0 → 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,14 +1,15 @@
 import * as React from "react";
 import type { ElementType } from "react";
-import { type ChipRounded, 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">;
-type ChipOwnProps = Omit<ChipVariants, "rounded"> & {
+type ChipOwnProps = Omit<ChipVariants, "rounded" | "shadow"> & {
     rounded?: ChipRounded;
+    shadow?: ChipShadow;
     sx?: SxProps;
 };
 export type ChipProps<T extends ElementType = "span"> = PolymorphicProps<T> & ChipOwnProps;

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

@@ -1,11 +1,15 @@
 import { type VariantProps } from "class-variance-authority";
-import { type Rounded, type RoundedPreset } from "../shared/rounded";
+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/{ui → interact}/button/Button.d.ts

@@ -1,14 +1,15 @@
 import * as React from "react";
 import type { ElementType } from "react";
-import { type ButtonRounded, 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">;
-type ButtonOwnProps = Omit<ButtonVariants, "rounded"> & {
+type ButtonOwnProps = Omit<ButtonVariants, "rounded" | "shadow"> & {
     rounded?: ButtonRounded;
+    shadow?: ButtonShadow;
     sx?: SxProps;
 };
 export type ButtonProps<T extends ElementType = "button"> = PolymorphicProps<T> & ButtonOwnProps;

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

@@ -1,12 +1,16 @@
 import { type VariantProps } from "class-variance-authority";
-import { type Rounded, type RoundedPreset } from "../shared/rounded";
+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/flex/Flex.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type SxProps } from "@/styling";
+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";
@@ -8,7 +8,7 @@ export type FlexSize = number | string;
 /**
  * Flex 容器属性。
  */
-export type FlexProps = React.ComponentPropsWithoutRef<"div"> & {
+export type FlexProps = BoxProps<React.ElementType> & {
     direction?: FlexDirection;
     justify?: React.CSSProperties["justifyContent"];
     items?: React.CSSProperties["alignItems"];
@@ -17,7 +17,6 @@ export type FlexProps = React.ComponentPropsWithoutRef<"div"> & {
     gap?: FlexGap;
     width?: FlexSize;
     height?: FlexSize;
-    sx?: SxProps;
 };
 /**
  * Flex 是基于 CSS Flexbox 的对齐布局容器。

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

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { type SxProps } from "@/styling";
+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 = React.ComponentPropsWithoutRef<"div"> & {
+export type GridProps = BoxProps<React.ElementType> & {
     container?: boolean;
     size?: GridSize;
     offset?: GridOffset;
@@ -15,7 +15,6 @@ export type GridProps = React.ComponentPropsWithoutRef<"div"> & {
     columnSpacing?: GridSpacing;
     wrap?: GridWrap;
     direction?: GridDirection;
-    sx?: SxProps;
 };
 /**
  * Grid 是基于 Flexbox 的 12 列布局容器。

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

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

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;
+};