@ldkj/web-ui 0.2.1 → 0.3.0

package/README.md

@@ -1,23 +1,27 @@
-# @ldkj/web-ui
-
-由 shadcn-ui, Tailwind CSS 和 VitePress 构建的 React 组件库.
-
-## 立即开始
-
-```bash
-npm install --save @ldkj/web-ui
-```
-
-## 使用示例
-
-```tsx
-import { Button } from "@ldkj/web-ui";
-
-export default function App() {
-  return (
-    <div className="p-4">
-      <Button variant="primary">Hello World</Button>
-    </div>
-  );
-}
-```
+# @ldkj/web-ui
+
+由 shadcn-ui, Tailwind CSS 和 VitePress 构建的 React 组件库.
+
+## 立即开始
+
+```bash
+pnpm add @ldkj/web-ui
+```
+
+## 使用示例
+
+```tsx
+import "@ldkj/web-ui/style.css";
+import { Button, Chip } from "@ldkj/web-ui";
+
+export default function App() {
+  return (
+    <div className="p-4">
+      <Button variant="primary">Hello World</Button>
+      <Chip variant="success" size="sm">
+        Ready
+      </Chip>
+    </div>
+  );
+}
+```

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,28 @@
+import * as React from "react";
+import { type SxProps } from "@/styling";
+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 = React.ComponentPropsWithoutRef<"div"> & {
+    direction?: FlexDirection;
+    justify?: React.CSSProperties["justifyContent"];
+    items?: React.CSSProperties["alignItems"];
+    flex?: React.CSSProperties["flex"];
+    wrap?: FlexWrap;
+    gap?: FlexGap;
+    width?: FlexSize;
+    height?: FlexSize;
+    sx?: SxProps;
+};
+/**
+ * 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,26 @@
+import * as React from "react";
+import { type SxProps } from "@/styling";
+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"> & {
+    container?: boolean;
+    size?: GridSize;
+    offset?: GridOffset;
+    columns?: number;
+    spacing?: GridSpacing;
+    rowSpacing?: GridSpacing;
+    columnSpacing?: GridSpacing;
+    wrap?: GridWrap;
+    direction?: GridDirection;
+    sx?: SxProps;
+};
+/**
+ * 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,38 @@
+import * as React from "react";
+import type { ElementType } from "react";
+import { type SxProps } from "@/styling";
+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;
+/**
+ * SafeArea 用于适配移动端刘海屏，灵动岛和手势区域等的安全区容器。
+ */
+export declare function SafeArea<T extends ElementType = "div">(props: SafeAreaProps<T>): 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">;
+/**
+ * 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/ui/button/Button.d.ts

@@ -1,12 +1,17 @@
 import * as React from "react";
 import type { ElementType } from "react";
-import { type ButtonVariants } from "./variants";
+import { type ButtonRounded, 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"> & {
+    rounded?: ButtonRounded;
+    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/button/variants.d.ts

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

package/components/ui/chip/Chip.d.ts

@@ -1,12 +1,17 @@
 import * as React from "react";
 import type { ElementType } from "react";
-import { type ChipVariants } from "./variants";
+import { type ChipRounded, 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"> & {
+    rounded?: ChipRounded;
+    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/chip/variants.d.ts

@@ -1,7 +1,11 @@
 import { type VariantProps } from "class-variance-authority";
+import { type Rounded, type RoundedPreset } from "../shared/rounded";
 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;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ChipVariants = VariantProps<typeof chipVariants>;
+export type ChipRoundedPreset = RoundedPreset;
+export type ChipRounded = Rounded;

package/components/ui/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/ui/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/ui/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/ui/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/ui/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/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;
+};