@zidian-ui/core 0.1.4 → 0.2.0

package/lib/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./collection";
+export * from "./common";
+export * from "./modal";
+export * from "./other";
+export * from "./input";

package/lib/components/input/SelectWrapper/SelectWrapper.css.d.ts

@@ -0,0 +1,2 @@
+export declare const selectWrapperTrigger: string;
+export declare const selectWrapperContent: string;

package/lib/components/input/SelectWrapper/SelectWrapper.d.ts

@@ -0,0 +1,2 @@
+import { SelectWrapperProps } from "./SelectWrapper.props";
+export declare const SelectWrapper: import("react").ForwardRefExoticComponent<Omit<SelectWrapperProps, "ref"> & import("react").RefAttributes<any>>;

package/lib/components/input/SelectWrapper/SelectWrapper.props.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+import { InputInnerProps } from "../components/inputInner/inputInner.props";
+import { ValueRenderProps } from "./components/SelectWrapperValue/SelectWrapperValue";
+/**--------------------------------------------
+ *                  Base
+ *---------------------------------------------**/
+export interface SelectOption {
+    value: string;
+    label: React.ReactNode;
+}
+/**--------------------------------------------
+ *                  Slot
+ *---------------------------------------------**/
+export interface PortalRenderProps {
+    open: boolean;
+    children: ReactNode;
+}
+/**--------------------------------------------
+ *                 Props
+ *---------------------------------------------**/
+export type SelectWrapperProps = Omit<InputInnerProps, "slot" | "variants"> & {
+    optionRender: React.ComponentType<{
+        closePortal: () => void;
+    }>;
+    slot?: Omit<InputInnerProps["slot"], "content"> & {
+        value?: (args: ValueRenderProps) => ReactNode;
+    };
+    variants?: Omit<NonNullable<InputInnerProps["variants"]>, "color">;
+    placeholder?: string;
+    selectValue?: SelectOption[] | SelectOption;
+    portalRender?: (args: PortalRenderProps) => ReactNode;
+};

package/lib/components/input/SelectWrapper/components/SelectWrapperPortal/SelectWrapperPortal.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+interface SelectPortalProps {
+    open: boolean;
+    children?: ReactNode;
+}
+export declare const SelectWrapperPortal: {
+    ({ open, children }: SelectPortalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/lib/components/input/SelectWrapper/components/SelectWrapperValue/SelectWrapperValue.d.ts

@@ -0,0 +1,7 @@
+import { SelectOption } from "../../SelectWrapper.props";
+export interface ValueRenderProps {
+    state?: any;
+    value?: SelectOption[] | SelectOption;
+    placeholder?: string;
+}
+export declare const SelectWrapperValue: import("react").ForwardRefExoticComponent<ValueRenderProps & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/components/input/SelectWrapper/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SelectWrapper";
+export type { SelectWrapperProps } from "./SelectWrapper.props";

package/lib/components/input/components/inputInner/InputInner.css.d.ts

@@ -0,0 +1,92 @@
+import { ComplexStyleRule } from '@vanilla-extract/css';
+import { ColorVariantName } from '../../../../theme/contract/colorContract.css';
+export declare const innerContent: string;
+export declare const innerFix: string;
+export declare const colorStyle: Record<string, any>;
+export declare const inputInnerToken: {
+    borderColor: `var(--${string})`;
+    contentColor: `var(--${string})`;
+    contentGap: `var(--${string})`;
+    backgroundColor: `var(--${string})`;
+    placeholderColor: `var(--${string})`;
+    boxShadow: `var(--${string})`;
+    fontSize: `var(--${string})`;
+    paddingX: `var(--${string})`;
+    paddingY: `var(--${string})`;
+    height: `var(--${string})`;
+    borderRadius: `var(--${string})`;
+};
+export declare const inputInnerRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: Record<ColorVariantName, string>;
+    variant: {
+        filled: {
+            vars: {
+                [inputInnerToken.contentColor]: `var(--${string})`;
+                [inputInnerToken.backgroundColor]: `var(--${string})`;
+                [inputInnerToken.borderColor]: string;
+                [inputInnerToken.placeholderColor]: `var(--${string})`;
+            };
+            selectors: {
+                '&:focus-within, &[data-state="open"]': {
+                    backgroundColor: "transparent";
+                };
+            };
+        };
+        outlined: {
+            vars: {
+                [inputInnerToken.contentColor]: `var(--${string})`;
+                [inputInnerToken.backgroundColor]: string;
+                [inputInnerToken.borderColor]: `var(--${string})`;
+            };
+        };
+        styleLess: {
+            border: "none";
+            backgroundColor: "transparent";
+            vars: {
+                [inputInnerToken.contentColor]: `var(--${string})`;
+                [inputInnerToken.placeholderColor]: string;
+            };
+            selectors: {
+                '&:focus-within, &[data-state="open"]': {
+                    backgroundColor: "transparent";
+                    vars: {
+                        [inputInnerToken.boxShadow]: string;
+                    };
+                };
+            };
+        };
+    };
+    size: {
+        small: {
+            vars: Record<string, string> | undefined;
+            minHeight: `var(--${string})`;
+            paddingInline: `var(--${string})`;
+            paddingBlock: `var(--${string})`;
+            fontSize: `var(--${string})`;
+        } & ComplexStyleRule;
+        normal: {
+            vars: Record<string, string> | undefined;
+            minHeight: `var(--${string})`;
+            paddingInline: `var(--${string})`;
+            paddingBlock: `var(--${string})`;
+            fontSize: `var(--${string})`;
+        } & ComplexStyleRule;
+        large: {
+            vars: Record<string, string> | undefined;
+            minHeight: `var(--${string})`;
+            paddingInline: `var(--${string})`;
+            paddingBlock: `var(--${string})`;
+            fontSize: `var(--${string})`;
+        } & ComplexStyleRule;
+    };
+    shape: {
+        round: {
+            vars: Record<string, string> | undefined;
+            borderRadius: `var(--${string})`;
+        } & ComplexStyleRule;
+        square: {
+            vars: Record<string, string> | undefined;
+            borderRadius: `var(--${string})`;
+        } & ComplexStyleRule;
+    };
+}>;

package/lib/components/input/components/inputInner/InputInner.d.ts

@@ -0,0 +1,2 @@
+import { InputInnerProps } from "./inputInner.props";
+export declare const InputInner: import("react").ForwardRefExoticComponent<Omit<InputInnerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/components/input/components/inputInner/inputInner.props.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps, ReactNode } from "react";
+import { inputInnerRecipe } from "./InputInner.css";
+import { RecipeVariants } from "@vanilla-extract/recipes";
+export interface InputInnerProps extends Omit<ComponentProps<'div'>, "slot"> {
+    variants?: RecipeVariants<typeof inputInnerRecipe>;
+    slot: {
+        prefix?: ReactNode;
+        suffix?: ReactNode;
+        content: ReactNode;
+    };
+}

package/lib/components/input/index.d.ts

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

package/lib/components/modal/Drawer/Drawer.css.d.ts

@@ -0,0 +1,34 @@
+export declare const drawerToken: {
+    contentRatio: `var(--${string})`;
+};
+export declare const drawerOverlayStyle: string;
+export declare const drawerRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    position: {
+        left: {
+            top: number;
+            left: number;
+            height: "100vh";
+            width: `var(--${string})`;
+        };
+        right: {
+            top: number;
+            right: number;
+            height: "100vh";
+            width: `var(--${string})`;
+        };
+        top: {
+            top: number;
+            left: number;
+            right: number;
+            height: `var(--${string})`;
+            width: "100%";
+        };
+        bottom: {
+            bottom: number;
+            left: number;
+            right: number;
+            height: `var(--${string})`;
+            width: "100%";
+        };
+    };
+}>;

package/lib/components/modal/Drawer/Drawer.d.ts

@@ -0,0 +1,2 @@
+import type { DrawerProps } from "./Drawer.props";
+export declare const Drawer: import("react").ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/components/modal/Drawer/Drawer.props.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+export interface DrawerProps extends ComponentPropsWithRef<'div'> {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onClosedMotionEnd?: () => void;
+    children?: ReactNode;
+    overlay?: boolean;
+    position?: 'left' | 'right' | 'top' | 'bottom';
+    motion?: any;
+}

package/lib/components/modal/Drawer/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Drawer";
+export * from "./Drawer.props";

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

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

package/lib/components/other/Cascader/Cascader.css.d.ts

@@ -0,0 +1,6 @@
+export declare const cascaderContainerStyle: string;
+export declare const cascaderColumnStyle: string;
+export declare const cascaderPanelStyle: string;
+export declare const cascaderPanelIndicatorStyle: string;
+export declare const cascaderPanelHeaderStyle: string;
+export declare const cascaderNodeStyle: string;

package/lib/components/other/Cascader/Cascader.d.ts

@@ -0,0 +1,2 @@
+import { CascaderProps } from "./Cascader.props";
+export declare const Cascader: import("react").ForwardRefExoticComponent<Omit<CascaderProps, "ref"> & import("react").RefAttributes<any>>;

package/lib/components/other/Cascader/Cascader.props.d.ts

@@ -0,0 +1,17 @@
+import { CascaderItem, NodeSlotType, PanelHeaderSlot, PanelIndicatorSlot, SelectOption } from "@zidian-primitive/cascader";
+import { ComponentPropsWithRef } from "react";
+export type { CheckStatus } from "@zidian-primitive/cascader";
+export interface CascaderProps extends Omit<ComponentPropsWithRef<'div'>, "slot"> {
+    list: any[];
+    levelFields: string[];
+    defaultList?: any[];
+    selectOption?: SelectOption;
+    showHeader?: boolean;
+    showIndicator?: boolean;
+    slot?: {
+        node?: NodeSlotType;
+        panelHeader?: PanelHeaderSlot;
+        panelIndicator?: PanelIndicatorSlot;
+    };
+    onLeafNodeClick?: (node: CascaderItem<any>) => void;
+}

package/lib/components/other/Cascader/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Cascader";
+export type { CascaderProps } from "./Cascader.props";

package/lib/components/other/index.d.ts

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

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./components";
+export * from "./theme";

package/lib/theme/common/common.css.d.ts

@@ -0,0 +1 @@
+export declare const focusRing: string;

package/lib/theme/contract/colorContract.css.d.ts

@@ -0,0 +1,8 @@
+export declare const colorMainContract: {
+    main: `var(--${string})`;
+    onMain: `var(--${string})`;
+    container: `var(--${string})`;
+    onContainer: `var(--${string})`;
+};
+export declare const defaultColorVariantName: string[];
+export type ColorVariantName = typeof defaultColorVariantName[number];

package/lib/theme/contract/themeContract.css.d.ts

@@ -0,0 +1,134 @@
+export declare const themeContract: {
+    font: {
+        size: {
+            title: {
+                xs: `var(--${string})`;
+                sm: `var(--${string})`;
+                md: `var(--${string})`;
+                lg: `var(--${string})`;
+                xl: `var(--${string})`;
+            };
+            label: {
+                xs: `var(--${string})`;
+                sm: `var(--${string})`;
+                md: `var(--${string})`;
+                lg: `var(--${string})`;
+                xl: `var(--${string})`;
+            };
+        };
+        weight: {
+            lighter: `var(--${string})`;
+            light: `var(--${string})`;
+            normal: `var(--${string})`;
+            medium: `var(--${string})`;
+            bold: `var(--${string})`;
+            bolder: `var(--${string})`;
+        };
+        lineHeight: {
+            xs: `var(--${string})`;
+            sm: `var(--${string})`;
+            md: `var(--${string})`;
+            lg: `var(--${string})`;
+            xl: `var(--${string})`;
+        };
+    };
+    spacing: {
+        layout: {
+            xs: `var(--${string})`;
+            sm: `var(--${string})`;
+            md: `var(--${string})`;
+            lg: `var(--${string})`;
+            xl: `var(--${string})`;
+        };
+        content: {
+            xs: `var(--${string})`;
+            sm: `var(--${string})`;
+            md: `var(--${string})`;
+            lg: `var(--${string})`;
+            xl: `var(--${string})`;
+        };
+    };
+    radius: {
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+        xl: `var(--${string})`;
+        full: `var(--${string})`;
+    };
+    state: {
+        hover: `var(--${string})`;
+        focus: `var(--${string})`;
+        pressed: `var(--${string})`;
+        dragged: `var(--${string})`;
+    };
+    color: {
+        inverse: {
+            surface: `var(--${string})`;
+            onSurface: `var(--${string})`;
+            primary: `var(--${string})`;
+        };
+        elevation: {
+            scrim: `var(--${string})`;
+            shadow: `var(--${string})`;
+        };
+        outline: {
+            main: `var(--${string})`;
+            variant: `var(--${string})`;
+            onSurfaceVariant: `var(--${string})`;
+            outlineVariant: `var(--${string})`;
+        };
+        surface: {
+            dim: `var(--${string})`;
+            main: `var(--${string})`;
+            bright: `var(--${string})`;
+            onMain: `var(--${string})`;
+            containerHighest: `var(--${string})`;
+            containerHigh: `var(--${string})`;
+            container: `var(--${string})`;
+            containerLow: `var(--${string})`;
+            containerLowest: `var(--${string})`;
+        };
+        info: {
+            main: `var(--${string})`;
+            onMain: `var(--${string})`;
+            container: `var(--${string})`;
+            onContainer: `var(--${string})`;
+        };
+        error: {
+            main: `var(--${string})`;
+            onMain: `var(--${string})`;
+            container: `var(--${string})`;
+            onContainer: `var(--${string})`;
+        };
+        warning: {
+            main: `var(--${string})`;
+            onMain: `var(--${string})`;
+            container: `var(--${string})`;
+            onContainer: `var(--${string})`;
+        };
+        success: {
+            main: `var(--${string})`;
+            onMain: `var(--${string})`;
+            container: `var(--${string})`;
+            onContainer: `var(--${string})`;
+        };
+        primary: {
+            main: `var(--${string})`;
+            onMain: `var(--${string})`;
+            container: `var(--${string})`;
+            onContainer: `var(--${string})`;
+        };
+        secondary: {
+            main: `var(--${string})`;
+            onMain: `var(--${string})`;
+            container: `var(--${string})`;
+            onContainer: `var(--${string})`;
+        };
+        tertiary: {
+            main: `var(--${string})`;
+            onMain: `var(--${string})`;
+            container: `var(--${string})`;
+            onContainer: `var(--${string})`;
+        };
+    };
+};

package/lib/theme/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./utils/color";
+export * from "./utils/token";
+export * from "./utils/contract";
+export * from "./provider/ThemeProvider";
+export type * from "./types/token";
+export * from "./token/contract";
+export * from "./token/tokenMap";
+export * from "./token/tokenSetup";

package/lib/theme/provider/ThemeProvider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Token } from '../types/token';
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    tokens: Token;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export declare const useTheme: () => Token;
+export {};

package/lib/theme/token/contract.d.ts

@@ -0,0 +1,169 @@
+import { TokenStructure } from "../types/token";
+export declare const mainColorContractStruct: {
+    main: null;
+    onMain: null;
+    container: null;
+    onContainer: null;
+};
+export declare const neutralColorContractStruct: {
+    dim: null;
+    main: null;
+    bright: null;
+    onMain: null;
+    containerHighest: null;
+    containerHigh: null;
+    container: null;
+    containerLow: null;
+    containerLowest: null;
+};
+export declare const neutralVariantColorContractStruct: {
+    main: null;
+    variant: null;
+    onSurfaceVariant: null;
+    outlineVariant: null;
+};
+export declare const inverseColorContractStruct: {
+    surface: null;
+    onSurface: null;
+    primary: null;
+};
+export declare const elevationColorContractStruct: {
+    scrim: null;
+    shadow: null;
+};
+export declare const tokenContractStruct: {
+    font: {
+        size: {
+            title: {
+                xs: null;
+                sm: null;
+                md: null;
+                lg: null;
+                xl: null;
+            };
+            label: {
+                xs: null;
+                sm: null;
+                md: null;
+                lg: null;
+                xl: null;
+            };
+        };
+        weight: {
+            lighter: null;
+            light: null;
+            normal: null;
+            medium: null;
+            bold: null;
+            bolder: null;
+        };
+        lineHeight: {
+            xs: null;
+            sm: null;
+            md: null;
+            lg: null;
+            xl: null;
+        };
+    };
+    spacing: {
+        layout: {
+            xs: null;
+            sm: null;
+            md: null;
+            lg: null;
+            xl: null;
+        };
+        content: {
+            xs: null;
+            sm: null;
+            md: null;
+            lg: null;
+            xl: null;
+        };
+    };
+    radius: {
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+        full: null;
+    };
+    state: {
+        hover: null;
+        focus: null;
+        pressed: null;
+        dragged: null;
+    };
+    color: {
+        inverse: {
+            surface: null;
+            onSurface: null;
+            primary: null;
+        };
+        elevation: {
+            scrim: null;
+            shadow: null;
+        };
+        outline: {
+            main: null;
+            variant: null;
+            onSurfaceVariant: null;
+            outlineVariant: null;
+        };
+        surface: {
+            dim: null;
+            main: null;
+            bright: null;
+            onMain: null;
+            containerHighest: null;
+            containerHigh: null;
+            container: null;
+            containerLow: null;
+            containerLowest: null;
+        };
+        info: {
+            main: null;
+            onMain: null;
+            container: null;
+            onContainer: null;
+        };
+        error: {
+            main: null;
+            onMain: null;
+            container: null;
+            onContainer: null;
+        };
+        warning: {
+            main: null;
+            onMain: null;
+            container: null;
+            onContainer: null;
+        };
+        success: {
+            main: null;
+            onMain: null;
+            container: null;
+            onContainer: null;
+        };
+        primary: {
+            main: null;
+            onMain: null;
+            container: null;
+            onContainer: null;
+        };
+        secondary: {
+            main: null;
+            onMain: null;
+            container: null;
+            onContainer: null;
+        };
+        tertiary: {
+            main: null;
+            onMain: null;
+            container: null;
+            onContainer: null;
+        };
+    };
+};
+export type TokenContractStruct = typeof tokenContractStruct;
+export type TokenContract = TokenStructure<TokenContractStruct>;