UNPKG

@loke/design-system

Version:

A design system with individually importable components

design.loke.global/docs/design-system

LOKE/merchant-frontends

72 lines (71 loc) • 11.9 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { type ResponsiveProps } from "@loke/design-system/responsive"; import type { NODES } from "@loke/ui/primitive"; import { type VariantProps } from "class-variance-authority"; import type React from "react"; declare const boxVariants: (props?: ({ alignItems?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined; background?: ("neutral-50" | "neutral-100" | "neutral-200" | "neutral-300" | "neutral-400" | "neutral-500" | "neutral-600" | "neutral-700" | "neutral-800" | "neutral-900" | "neutral-950" | ("destructive" | "secondary" | "card" | "primary" | "accent" | "background" | "foreground" | "white" | "sidebar-accent" | "sidebar")) | null | undefined; border?: boolean | null | undefined; borderBottom?: boolean | null | undefined; borderColor?: ("neutral-50" | "neutral-100" | "neutral-200" | "neutral-300" | "neutral-400" | "neutral-500" | "neutral-600" | "neutral-700" | "neutral-800" | "neutral-900" | "neutral-950" | ("destructive" | "secondary" | "card" | "primary" | "accent" | "background" | "foreground" | "white" | "sidebar-accent" | "sidebar")) | null | undefined; borderLeft?: boolean | null | undefined; borderRadius?: "none" | "lg" | "sm" | "full" | "md" | "xl" | "2xl" | "3xl" | null | undefined; borderRight?: boolean | null | undefined; borderTop?: boolean | null | undefined; bottom?: 0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | "-0" | "-1" | "-small" | "-none" | "-2" | "-3" | "-4" | "-5" | "-6" | "-12" | "-7" | "-8" | "-24" | "-9" | "-10" | "-16" | "-20" | "-28" | "-32" | "-large" | "-medium" | "-xlarge" | "-xsmall" | "-xxlarge" | "-xxsmall" | null | undefined; boxShadow?: "none" | "lg" | "sm" | "md" | "xl" | "2xl" | "inner" | null | undefined; container?: boolean | null | undefined; cursor?: "text" | "auto" | "move" | "default" | "not-allowed" | "pointer" | "wait" | null | undefined; display?: "hidden" | "grid" | "inline" | "flex" | "block" | "table-cell" | "inline-block" | "inline-flex" | "inline-grid" | null | undefined; flexDirection?: "col" | "row" | "row-reverse" | "col-reverse" | null | undefined; flexGrow?: boolean | null | undefined; flexShrink?: boolean | null | undefined; flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | null | undefined; gap?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | null | undefined; gapX?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | null | undefined; gapY?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | null | undefined; height?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | ("1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | ("auto" | "max" | "min" | "lg" | "sm" | "fit" | "full" | "md" | "screen" | "xl" | "2xl" | "3xl" | "4xl" | "xs" | "5xl") | null | undefined; justifyContent?: "center" | "end" | "between" | "start" | "around" | "evenly" | null | undefined; left?: 0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | "-0" | "-1" | "-small" | "-none" | "-2" | "-3" | "-4" | "-5" | "-6" | "-12" | "-7" | "-8" | "-24" | "-9" | "-10" | "-16" | "-20" | "-28" | "-32" | "-large" | "-medium" | "-xlarge" | "-xsmall" | "-xxlarge" | "-xxsmall" | null | undefined; margin?: 0 | 1 | "small" | "none" | "auto" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | null | undefined; marginBottom?: 0 | 1 | "small" | "none" | "auto" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | null | undefined; marginLeft?: 0 | 1 | "small" | "none" | "auto" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | null | undefined; marginRight?: 0 | 1 | "small" | "none" | "auto" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | null | undefined; marginTop?: 0 | 1 | "small" | "none" | "auto" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | null | undefined; marginX?: 0 | 1 | "small" | "none" | "auto" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | null | undefined; marginY?: 0 | 1 | "small" | "none" | "auto" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | null | undefined; maxHeight?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | ("1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | ("auto" | "max" | "min" | "lg" | "sm" | "fit" | "full" | "md" | "screen" | "xl" | "2xl" | "3xl" | "4xl" | "xs" | "5xl") | null | undefined; maxWidth?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | ("1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | ("auto" | "max" | "min" | "lg" | "sm" | "fit" | "full" | "md" | "screen" | "xl" | "2xl" | "3xl" | "4xl" | "xs" | "5xl") | null | undefined; minHeight?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | ("1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | ("auto" | "max" | "min" | "lg" | "sm" | "fit" | "full" | "md" | "screen" | "xl" | "2xl" | "3xl" | "4xl" | "xs" | "5xl") | null | undefined; minWidth?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | ("1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | ("auto" | "max" | "min" | "lg" | "sm" | "fit" | "full" | "md" | "screen" | "xl" | "2xl" | "3xl" | "4xl" | "xs" | "5xl") | null | undefined; overflow?: "hidden" | "auto" | "scroll" | "visible" | null | undefined; overflowX?: "hidden" | "auto" | "scroll" | "visible" | null | undefined; overflowY?: "hidden" | "auto" | "scroll" | "visible" | null | undefined; padding?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | null | undefined; paddingBottom?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | null | undefined; paddingLeft?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | null | undefined; paddingRight?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | null | undefined; paddingTop?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | null | undefined; paddingX?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | null | undefined; paddingY?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | null | undefined; pointerEvents?: "none" | "auto" | null | undefined; position?: "fixed" | "sticky" | "relative" | "absolute" | "static" | null | undefined; right?: 0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | "-0" | "-1" | "-small" | "-none" | "-2" | "-3" | "-4" | "-5" | "-6" | "-12" | "-7" | "-8" | "-24" | "-9" | "-10" | "-16" | "-20" | "-28" | "-32" | "-large" | "-medium" | "-xlarge" | "-xsmall" | "-xxlarge" | "-xxsmall" | null | undefined; spaceX?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | null | undefined; spaceY?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | null | undefined; textAlign?: "center" | "justify" | "right" | "left" | null | undefined; top?: 0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall" | "-0" | "-1" | "-small" | "-none" | "-2" | "-3" | "-4" | "-5" | "-6" | "-12" | "-7" | "-8" | "-24" | "-9" | "-10" | "-16" | "-20" | "-28" | "-32" | "-large" | "-medium" | "-xlarge" | "-xsmall" | "-xxlarge" | "-xxsmall" | null | undefined; width?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | ("1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | ("auto" | "max" | "min" | "lg" | "sm" | "fit" | "full" | "md" | "screen" | "xl" | "2xl" | "3xl" | "4xl" | "xs" | "5xl") | null | undefined; zIndex?: (0 | 1 | "small" | "none" | 2 | 3 | 4 | 5 | 6 | 12 | 7 | 8 | 24 | 9 | 10 | 16 | 20 | 28 | 32 | "large" | "medium" | "xlarge" | "xsmall" | "xxlarge" | "xxsmall") | null | undefined; } & import("class-variance-authority/types").ClassProp) | undefined) => string; type BoxVariants = VariantProps<typeof boxVariants>; interface BoxProps extends ResponsiveProps<BoxVariants> { as?: (typeof NODES)[number]; asChild?: boolean; children?: React.ReactNode; className?: string; style?: React.CSSProperties; } declare function Box({ children, className, as, style, asChild, ...props }: BoxProps): import("react/jsx-runtime").JSX.Element; export { Box, boxVariants }; export type { BoxProps, BoxVariants };