@telepix-lab/telepix-ui 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +74 -0
- package/dist/cjs/button/index.d.ts +25 -0
- package/dist/cjs/button/styles.d.ts +95 -0
- package/dist/cjs/card/index.d.ts +27 -0
- package/dist/cjs/card/styles.d.ts +29 -0
- package/dist/cjs/checkbox/index.d.ts +24 -0
- package/dist/cjs/checkbox/styles.d.ts +43 -0
- package/dist/cjs/dialog/index.d.ts +34 -0
- package/dist/cjs/dialog/styles.d.ts +23 -0
- package/dist/cjs/horizontal-tab/index.d.ts +16 -0
- package/dist/cjs/horizontal-tab/styles.d.ts +74 -0
- package/dist/cjs/index.d.ts +37 -0
- package/dist/cjs/index.js +11067 -0
- package/dist/cjs/index.js.map +1 -0
- package/dist/cjs/input/index.d.ts +28 -0
- package/dist/cjs/input/styles.d.ts +75 -0
- package/dist/cjs/mode-tab/index.d.ts +14 -0
- package/dist/cjs/mode-tab/styles.d.ts +49 -0
- package/dist/cjs/radio-group/index.d.ts +32 -0
- package/dist/cjs/radio-group/styles.d.ts +47 -0
- package/dist/cjs/select/index.d.ts +61 -0
- package/dist/cjs/select/styles.d.ts +107 -0
- package/dist/cjs/styles/common.d.ts +7 -0
- package/dist/cjs/styles/layout.stylex.d.ts +19 -0
- package/dist/cjs/styles/primitiveColors.stylex.d.ts +175 -0
- package/dist/cjs/styles/semanticColors.stylex.d.ts +50 -0
- package/dist/cjs/styles/shadow.stylex.d.ts +11 -0
- package/dist/cjs/styles/transitions.stylex.d.ts +6 -0
- package/dist/cjs/styles/typography.stylex.d.ts +43 -0
- package/dist/cjs/styles.css +1265 -0
- package/dist/cjs/tag/index.d.ts +32 -0
- package/dist/cjs/tag/styles.d.ts +82 -0
- package/dist/cjs/text/index.d.ts +31 -0
- package/dist/cjs/text/styles.d.ts +290 -0
- package/dist/cjs/textarea/index.d.ts +20 -0
- package/dist/cjs/textarea/styles.d.ts +30 -0
- package/dist/cjs/tooltip/index.d.ts +20 -0
- package/dist/cjs/tooltip/styles.d.ts +59 -0
- package/dist/cjs/vertical-menu/index.d.ts +17 -0
- package/dist/cjs/vertical-menu/styles.d.ts +84 -0
- package/dist/esm/button/index.d.ts +25 -0
- package/dist/esm/button/styles.d.ts +95 -0
- package/dist/esm/card/index.d.ts +27 -0
- package/dist/esm/card/styles.d.ts +29 -0
- package/dist/esm/checkbox/index.d.ts +24 -0
- package/dist/esm/checkbox/styles.d.ts +43 -0
- package/dist/esm/dialog/index.d.ts +34 -0
- package/dist/esm/dialog/styles.d.ts +23 -0
- package/dist/esm/horizontal-tab/index.d.ts +16 -0
- package/dist/esm/horizontal-tab/styles.d.ts +74 -0
- package/dist/esm/index.d.ts +37 -0
- package/dist/esm/index.js +10954 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/input/index.d.ts +28 -0
- package/dist/esm/input/styles.d.ts +75 -0
- package/dist/esm/mode-tab/index.d.ts +14 -0
- package/dist/esm/mode-tab/styles.d.ts +49 -0
- package/dist/esm/radio-group/index.d.ts +32 -0
- package/dist/esm/radio-group/styles.d.ts +47 -0
- package/dist/esm/select/index.d.ts +61 -0
- package/dist/esm/select/styles.d.ts +107 -0
- package/dist/esm/styles/common.d.ts +7 -0
- package/dist/esm/styles/layout.stylex.d.ts +19 -0
- package/dist/esm/styles/primitiveColors.stylex.d.ts +175 -0
- package/dist/esm/styles/semanticColors.stylex.d.ts +50 -0
- package/dist/esm/styles/shadow.stylex.d.ts +11 -0
- package/dist/esm/styles/transitions.stylex.d.ts +6 -0
- package/dist/esm/styles/typography.stylex.d.ts +43 -0
- package/dist/esm/styles.css +1265 -0
- package/dist/esm/tag/index.d.ts +32 -0
- package/dist/esm/tag/styles.d.ts +82 -0
- package/dist/esm/text/index.d.ts +31 -0
- package/dist/esm/text/styles.d.ts +290 -0
- package/dist/esm/textarea/index.d.ts +20 -0
- package/dist/esm/textarea/styles.d.ts +30 -0
- package/dist/esm/tooltip/index.d.ts +20 -0
- package/dist/esm/tooltip/styles.d.ts +59 -0
- package/dist/esm/vertical-menu/index.d.ts +17 -0
- package/dist/esm/vertical-menu/styles.d.ts +84 -0
- package/dist/index.d.ts +1762 -0
- package/package.json +115 -0
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { VerticalMenuSizeStyles, VerticalMenuVariantStyles } from "./styles";
|
|
3
|
+
interface VerticalMenusProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
value?: string;
|
|
6
|
+
onValueChange?: (value: string) => void;
|
|
7
|
+
}
|
|
8
|
+
export declare const VerticalMenus: React.ForwardRefExoticComponent<VerticalMenusProps & React.RefAttributes<HTMLDivElement>>;
|
|
9
|
+
interface VerticalMenuProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
|
10
|
+
value: string;
|
|
11
|
+
label?: string;
|
|
12
|
+
icon?: React.ReactNode;
|
|
13
|
+
variant?: VerticalMenuVariantStyles;
|
|
14
|
+
size?: VerticalMenuSizeStyles;
|
|
15
|
+
}
|
|
16
|
+
export declare const VerticalMenu: React.ForwardRefExoticComponent<Omit<VerticalMenuProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
export declare const verticalMenusWrapperStyles: Readonly<{
|
|
2
|
+
readonly base: Readonly<{
|
|
3
|
+
readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
|
|
4
|
+
readonly flexDirection: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"flexDirection", "column">;
|
|
5
|
+
readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "100%">;
|
|
6
|
+
readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "8px">;
|
|
7
|
+
readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "8px">;
|
|
8
|
+
}>;
|
|
9
|
+
}>;
|
|
10
|
+
export declare const verticalMenuIconStyles: Readonly<{
|
|
11
|
+
readonly base: Readonly<{
|
|
12
|
+
readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
|
|
13
|
+
readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
|
|
14
|
+
readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
|
|
15
|
+
readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "20px">;
|
|
16
|
+
readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "20px">;
|
|
17
|
+
}>;
|
|
18
|
+
}>;
|
|
19
|
+
export declare const verticalMenuStyles: Readonly<{
|
|
20
|
+
readonly base: Readonly<{
|
|
21
|
+
readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "100%">;
|
|
22
|
+
readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
|
|
23
|
+
readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
|
|
24
|
+
readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", "6px">;
|
|
25
|
+
readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
|
|
26
|
+
readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
|
|
27
|
+
readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
|
|
28
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
|
|
29
|
+
readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", "none">;
|
|
30
|
+
readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
|
|
31
|
+
}>;
|
|
32
|
+
readonly small: Readonly<{
|
|
33
|
+
readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "12px">;
|
|
34
|
+
readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "4px">;
|
|
35
|
+
}>;
|
|
36
|
+
readonly regular: Readonly<{
|
|
37
|
+
readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "18px">;
|
|
38
|
+
readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "10px">;
|
|
39
|
+
}>;
|
|
40
|
+
readonly accent: Readonly<{
|
|
41
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
|
|
42
|
+
readonly ":hover:not(:is([data-selected='true'])):not(:disabled)": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":hover:not(:is([data-selected='true'])):not(:disabled)", {
|
|
43
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
44
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
45
|
+
}>;
|
|
46
|
+
readonly ":active:not(:disabled)": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":active:not(:disabled)", {
|
|
47
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
48
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
49
|
+
}>;
|
|
50
|
+
readonly ":is([data-selected='true'])": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":is([data-selected='true'])", {
|
|
51
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
52
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
53
|
+
readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
54
|
+
}>;
|
|
55
|
+
readonly ":disabled": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":disabled", {
|
|
56
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
57
|
+
readonly cursor: "not-allowed";
|
|
58
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
59
|
+
}>;
|
|
60
|
+
}>;
|
|
61
|
+
readonly ghost: Readonly<{
|
|
62
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
|
|
63
|
+
readonly ":hover:not(:is([data-selected='true']))": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":hover:not(:is([data-selected='true']))", {
|
|
64
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
65
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
66
|
+
}>;
|
|
67
|
+
readonly ":active": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":active", {
|
|
68
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
69
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
70
|
+
}>;
|
|
71
|
+
readonly ":is([data-selected='true'])": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":is([data-selected='true'])", {
|
|
72
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
73
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
74
|
+
readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
75
|
+
}>;
|
|
76
|
+
readonly ":disabled": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":disabled", {
|
|
77
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
78
|
+
readonly cursor: "not-allowed";
|
|
79
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
80
|
+
}>;
|
|
81
|
+
}>;
|
|
82
|
+
}>;
|
|
83
|
+
export type VerticalMenuSizeStyles = Extract<keyof typeof verticalMenuStyles, "small" | "regular">;
|
|
84
|
+
export type VerticalMenuVariantStyles = Extract<keyof typeof verticalMenuStyles, "accent" | "ghost">;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { ButtonSizeStyles, ButtonVariantStyles } from "../button/styles";
|
|
2
|
+
import React, { ReactNode } from "react";
|
|
3
|
+
export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
|
4
|
+
variant?: ButtonVariantStyles;
|
|
5
|
+
size?: ButtonSizeStyles;
|
|
6
|
+
fullWidth?: boolean;
|
|
7
|
+
isLoading?: boolean;
|
|
8
|
+
leftIcon?: ReactNode;
|
|
9
|
+
rightIcon?: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* 다양한 스타일과 속성을 지원하는 버튼 컴포넌트입니다.<br/>
|
|
13
|
+
* 사용자는 버튼의 변형(variant), 크기(size), 전체 너비(fullWidth), 로딩 상태(isLoading), 아이콘(leftIcon, rightIcon) 등을 지정할 수 있습니다.<br/>
|
|
14
|
+
* 버튼은 기본적으로 클릭 가능한 요소이며, disabled 속성을 통해 비활성화할 수 있습니다.<br/>
|
|
15
|
+
* 로딩 상태일 때는 로딩 스피너가 표시됩니다.<br/>
|
|
16
|
+
* 아이콘은 왼쪽(leftIcon) 또는 오른쪽(rightIcon)에 배치할 수 있으며, 버튼 텍스트와 함께 표시됩니다.<br/>
|
|
17
|
+
* <br/>
|
|
18
|
+
* ### 사용 예시
|
|
19
|
+
* ```tsx
|
|
20
|
+
* <Button variant="accent" size="large">
|
|
21
|
+
* Click Me
|
|
22
|
+
* </Button>
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
export declare const buttonSizeStyles: Readonly<{
|
|
2
|
+
readonly small: Readonly<{
|
|
3
|
+
readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "28px">;
|
|
4
|
+
readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "0px 6px">;
|
|
5
|
+
readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
|
|
6
|
+
readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
|
|
7
|
+
}>;
|
|
8
|
+
readonly regular: Readonly<{
|
|
9
|
+
readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "36px">;
|
|
10
|
+
readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "0px 8px">;
|
|
11
|
+
readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
|
|
12
|
+
readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
|
|
13
|
+
}>;
|
|
14
|
+
readonly large: Readonly<{
|
|
15
|
+
readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "48px">;
|
|
16
|
+
readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "0px 12px">;
|
|
17
|
+
readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
|
|
18
|
+
readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
|
|
19
|
+
}>;
|
|
20
|
+
}>;
|
|
21
|
+
export declare const buttonVariantStyles: Readonly<{
|
|
22
|
+
readonly accent: Readonly<{
|
|
23
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
|
|
24
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
|
|
25
|
+
readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
|
|
26
|
+
}>;
|
|
27
|
+
readonly outline: Readonly<{
|
|
28
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
|
|
29
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
|
|
30
|
+
readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", `1px solid ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>}`>;
|
|
31
|
+
readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
|
|
32
|
+
}>;
|
|
33
|
+
readonly ghost: Readonly<{
|
|
34
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
|
|
35
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
|
|
36
|
+
readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
|
|
37
|
+
}>;
|
|
38
|
+
}>;
|
|
39
|
+
export declare const buttonStyles: Readonly<{
|
|
40
|
+
readonly base: Readonly<{
|
|
41
|
+
readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
|
|
42
|
+
readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
|
|
43
|
+
readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
|
|
44
|
+
readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "relative">;
|
|
45
|
+
readonly boxSizing: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"boxSizing", "border-box">;
|
|
46
|
+
readonly margin: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"margin", 0>;
|
|
47
|
+
readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", "none">;
|
|
48
|
+
readonly outline: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"outline", "none">;
|
|
49
|
+
readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
|
|
50
|
+
readonly userSelect: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"userSelect", "none">;
|
|
51
|
+
readonly verticalAlign: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"verticalAlign", "middle">;
|
|
52
|
+
readonly appearance: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"appearance", "none">;
|
|
53
|
+
readonly textDecoration: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"textDecoration", "none">;
|
|
54
|
+
readonly textAlign: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"textAlign", "center">;
|
|
55
|
+
readonly transition: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"transition", string>;
|
|
56
|
+
readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
|
|
57
|
+
readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "auto">;
|
|
58
|
+
readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", string>;
|
|
59
|
+
readonly overflow: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"overflow", "hidden">;
|
|
60
|
+
readonly pointerEvents: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"pointerEvents", "none" | "auto">;
|
|
61
|
+
}>;
|
|
62
|
+
readonly fullWidth: Readonly<{
|
|
63
|
+
readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "100%">;
|
|
64
|
+
}>;
|
|
65
|
+
readonly withIcon: Readonly<{
|
|
66
|
+
readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", string>;
|
|
67
|
+
}>;
|
|
68
|
+
readonly spinner: Readonly<{
|
|
69
|
+
readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "absolute">;
|
|
70
|
+
readonly top: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"top", "calc(50% - 10px)">;
|
|
71
|
+
readonly left: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"left", "calc(50% - 10px)">;
|
|
72
|
+
readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "20px">;
|
|
73
|
+
readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "20px">;
|
|
74
|
+
readonly animation: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"animation", `${string} 1s linear infinite`>;
|
|
75
|
+
}>;
|
|
76
|
+
readonly spinnerSmall: Readonly<{
|
|
77
|
+
readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "absolute">;
|
|
78
|
+
readonly top: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"top", "calc(50% - 8px)">;
|
|
79
|
+
readonly left: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"left", "calc(50% - 8px)">;
|
|
80
|
+
readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "16px">;
|
|
81
|
+
readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "16px">;
|
|
82
|
+
readonly animation: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"animation", `${string} 1s linear infinite`>;
|
|
83
|
+
}>;
|
|
84
|
+
readonly spinnerLarge: Readonly<{
|
|
85
|
+
readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "absolute">;
|
|
86
|
+
readonly top: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"top", "calc(50% - 12px)">;
|
|
87
|
+
readonly left: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"left", "calc(50% - 12px)">;
|
|
88
|
+
readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "24px">;
|
|
89
|
+
readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "24px">;
|
|
90
|
+
readonly animation: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"animation", `${string} 1s linear infinite`>;
|
|
91
|
+
}>;
|
|
92
|
+
}>;
|
|
93
|
+
export type ButtonVariantStyles = keyof typeof buttonVariantStyles;
|
|
94
|
+
export type ButtonSizeStyles = keyof typeof buttonSizeStyles;
|
|
95
|
+
export type ButtonStyles = keyof typeof buttonStyles;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
type CardProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
3
|
+
/**
|
|
4
|
+
* 카드 컴포넌트는 콘텐츠를 그룹화하고 시각적으로 구분하는 데 사용됩니다.<br/>
|
|
5
|
+
* 카드 내부에는 헤더, 본문, 푸터 등의 섹션을 포함할 수 있습니다.<br/>
|
|
6
|
+
* content 내의 padding을 적용하기 위해서는 `CardBody` 컴포넌트를 사용해야 합니다.<br/>
|
|
7
|
+
* 기본적으로 카드 container의 스타일은 배경색, 테두리 등을 포함합니다.<br/>
|
|
8
|
+
* <br/>
|
|
9
|
+
* ### 사용 예시
|
|
10
|
+
* ```tsx
|
|
11
|
+
* <Card>
|
|
12
|
+
* <CardBody>
|
|
13
|
+
* <CardHeader>카드 제목</CardHeader>
|
|
14
|
+
* <CardContent>
|
|
15
|
+
* 카드 내용
|
|
16
|
+
* </CardContent>
|
|
17
|
+
* <CardFooter>
|
|
18
|
+
* 카드 푸터
|
|
19
|
+
* </CardFooter>
|
|
20
|
+
* </Card>
|
|
21
|
+
*/
|
|
22
|
+
export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
23
|
+
export declare const CardBody: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
24
|
+
export declare const CardHeader: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
25
|
+
export declare const CardContent: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
26
|
+
export declare const CardFooter: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export declare const cardStyles: Readonly<{
|
|
2
|
+
readonly base: Readonly<{
|
|
3
|
+
readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
|
|
4
|
+
readonly flexDirection: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"flexDirection", "column">;
|
|
5
|
+
readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", string>;
|
|
6
|
+
readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", `1px solid ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>}`>;
|
|
7
|
+
readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", string>;
|
|
8
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
|
|
9
|
+
}>;
|
|
10
|
+
}>;
|
|
11
|
+
export declare const cardBodyStyles: Readonly<{
|
|
12
|
+
readonly base: Readonly<{
|
|
13
|
+
readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", string>;
|
|
14
|
+
}>;
|
|
15
|
+
}>;
|
|
16
|
+
export declare const cardHeaderStyles: Readonly<{
|
|
17
|
+
readonly base: Readonly<{
|
|
18
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
|
|
19
|
+
readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
|
|
20
|
+
readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
|
|
21
|
+
readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
|
|
22
|
+
readonly marginBottom: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"marginBottom", string>;
|
|
23
|
+
}>;
|
|
24
|
+
}>;
|
|
25
|
+
export declare const cardFooterStyles: Readonly<{
|
|
26
|
+
readonly base: Readonly<{
|
|
27
|
+
readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", `${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>}`>;
|
|
28
|
+
}>;
|
|
29
|
+
}>;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Checkbox as CheckboxRadix } from "radix-ui";
|
|
3
|
+
interface CheckboxProps extends CheckboxRadix.CheckboxProps {
|
|
4
|
+
label?: string;
|
|
5
|
+
labelClassName?: string;
|
|
6
|
+
wrapperClassName?: string;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* 체크박스 컴포넌트입니다.<br/>
|
|
10
|
+
* 사용자는 체크박스의 상태(checked, defaultChecked), ID, disabled 여부, 클래스 이름 등을 지정할 수 있습니다.<br/>
|
|
11
|
+
* label을 통해 체크박스 옆에 표시할 텍스트를 설정할 수 있으며, labelClassName을 통해 라벨의 스타일을 지정할 수 있습니다.<br/>
|
|
12
|
+
* wrapperClassName을 통해 체크박스와 라벨을 감싸는 요소의 스타일을 지정할 수 있습니다.<br/>
|
|
13
|
+
* <br/>
|
|
14
|
+
* ### 사용 예시
|
|
15
|
+
* ```tsx
|
|
16
|
+
* <Checkbox
|
|
17
|
+
* label="Accept Terms and Conditions"
|
|
18
|
+
* checked={isChecked}
|
|
19
|
+
* onCheckedChange={(value) => setIsChecked(value)}
|
|
20
|
+
* />
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
export declare const checkboxWrapperStyles: Readonly<{
|
|
2
|
+
readonly base: Readonly<{
|
|
3
|
+
readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
|
|
4
|
+
readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
|
|
5
|
+
readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "10px">;
|
|
6
|
+
}>;
|
|
7
|
+
}>;
|
|
8
|
+
export declare const checkboxStyles: Readonly<{
|
|
9
|
+
readonly base: Readonly<{
|
|
10
|
+
readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "16px">;
|
|
11
|
+
readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "16px">;
|
|
12
|
+
readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "0">;
|
|
13
|
+
readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
|
|
14
|
+
readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", string>;
|
|
15
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
|
|
16
|
+
}>;
|
|
17
|
+
readonly icon: Readonly<{
|
|
18
|
+
readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "16px">;
|
|
19
|
+
readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "16px">;
|
|
20
|
+
readonly fill: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fill", string>;
|
|
21
|
+
readonly stroke: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"stroke", string>;
|
|
22
|
+
}>;
|
|
23
|
+
readonly iconChecked: Readonly<{
|
|
24
|
+
readonly stroke: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"stroke", string>;
|
|
25
|
+
}>;
|
|
26
|
+
readonly iconDisabled: Readonly<{
|
|
27
|
+
readonly stroke: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"stroke", string>;
|
|
28
|
+
readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "default">;
|
|
29
|
+
}>;
|
|
30
|
+
}>;
|
|
31
|
+
export declare const labelStyles: Readonly<{
|
|
32
|
+
readonly base: Readonly<{
|
|
33
|
+
readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
|
|
34
|
+
readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
|
|
35
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
|
|
36
|
+
readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
|
|
37
|
+
readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
|
|
38
|
+
}>;
|
|
39
|
+
readonly disabled: Readonly<{
|
|
40
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
|
|
41
|
+
readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "default">;
|
|
42
|
+
}>;
|
|
43
|
+
}>;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Dialog as DialogRadix } from "radix-ui";
|
|
3
|
+
/**
|
|
4
|
+
* Dialog 컴포넌트는 모달 대화 상자를 생성하는 데 사용됩니다.<br/>
|
|
5
|
+
* 이 컴포넌트는 Radix UI의 Dialog 컴포넌트를 래핑하여 사용합니다.<br/>
|
|
6
|
+
* Dialog 컴포넌트는 모달의 상태를 관리하고, 모달을 열고 닫는 기능을 제공합니다.<br/>
|
|
7
|
+
* DialogTrigger는 모달을 여는 트리거 버튼 역할을 하며, DialogContent는 모달의 실제 콘텐츠를 렌더링합니다.<br/>
|
|
8
|
+
* DialogClose는 모달을 닫는 버튼 역할을 합니다.<br/>
|
|
9
|
+
* DialogHeader, DialogFooter, DialogDescription은 모달의 헤더, 푸터, 제목, 설명을 구성하는 데 사용됩니다.<br/>
|
|
10
|
+
* 이 컴포넌트는 모달 대화 상자를 쉽게 구현할 수 있도록 도와줍니다.<br/>
|
|
11
|
+
* <br/>
|
|
12
|
+
* ### 사용 예시
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <Dialog>
|
|
15
|
+
* <DialogTrigger>Open Dialog</DialogTrigger>
|
|
16
|
+
* <DialogContent>
|
|
17
|
+
* <DialogHeader>
|
|
18
|
+
* Dialog Title
|
|
19
|
+
* <DialogClose />
|
|
20
|
+
* </DialogHeader>
|
|
21
|
+
* <DialogDescription>
|
|
22
|
+
* This is a description of the dialog.
|
|
23
|
+
* </DialogDescription>
|
|
24
|
+
* </DialogContent>
|
|
25
|
+
* </Dialog>
|
|
26
|
+
*/
|
|
27
|
+
export declare const Dialog: React.FC<DialogRadix.DialogProps>;
|
|
28
|
+
export declare const DialogTrigger: (props: React.ComponentProps<typeof DialogRadix.Trigger>) => import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
export declare const DialogPortal: React.FC<DialogRadix.DialogPortalProps>;
|
|
30
|
+
export declare const DialogClose: React.ForwardRefExoticComponent<DialogRadix.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
31
|
+
export declare const DialogContent: ({ className, children, ...props }: React.ComponentProps<typeof DialogRadix.Content>) => import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
export declare const DialogHeader: ({ className, ...props }: React.ComponentProps<typeof DialogRadix.Title>) => import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export declare const DialogFooter: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
34
|
+
export declare const DialogDescription: ({ className, ...props }: React.ComponentProps<typeof DialogRadix.Description>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export declare const dialogOverlayStyles: Readonly<{
|
|
2
|
+
readonly base: Readonly<{
|
|
3
|
+
readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "fixed">;
|
|
4
|
+
readonly top: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"top", 0>;
|
|
5
|
+
readonly left: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"left", 0>;
|
|
6
|
+
readonly right: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"right", 0>;
|
|
7
|
+
readonly bottom: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"bottom", 0>;
|
|
8
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
|
|
9
|
+
readonly inset: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"inset", 0>;
|
|
10
|
+
readonly zIndex: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"zIndex", 1000>;
|
|
11
|
+
readonly animation: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"animation", `${string} ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} ease-in-out forwards`>;
|
|
12
|
+
}>;
|
|
13
|
+
}>;
|
|
14
|
+
export declare const dialogContentStyles: Readonly<{
|
|
15
|
+
readonly base: Readonly<{
|
|
16
|
+
readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "fixed">;
|
|
17
|
+
readonly top: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"top", "50%">;
|
|
18
|
+
readonly left: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"left", "50%">;
|
|
19
|
+
readonly transform: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"transform", "translate(-50%, -50%)">;
|
|
20
|
+
readonly zIndex: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"zIndex", 1001>;
|
|
21
|
+
readonly animation: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"animation", `${string} ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} ease-in-out forwards`>;
|
|
22
|
+
}>;
|
|
23
|
+
}>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { HorizontalTabSizeStyles } from "./styles";
|
|
3
|
+
interface HorizontalTabsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
value?: string;
|
|
6
|
+
onValueChange?: (value: string) => void;
|
|
7
|
+
}
|
|
8
|
+
export declare const HorizontalTabs: React.ForwardRefExoticComponent<HorizontalTabsProps & React.RefAttributes<HTMLDivElement>>;
|
|
9
|
+
interface HorizontalTabProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
|
10
|
+
value: string;
|
|
11
|
+
label?: string;
|
|
12
|
+
icon?: React.ReactNode;
|
|
13
|
+
size?: HorizontalTabSizeStyles;
|
|
14
|
+
}
|
|
15
|
+
export declare const HorizontalTab: React.ForwardRefExoticComponent<Omit<HorizontalTabProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
export declare const horizontalTabWrapperStyles: Readonly<{
|
|
2
|
+
readonly base: Readonly<{
|
|
3
|
+
readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
|
|
4
|
+
readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
|
|
5
|
+
readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "flex-start">;
|
|
6
|
+
readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "100%">;
|
|
7
|
+
}>;
|
|
8
|
+
}>;
|
|
9
|
+
export declare const horizontalTabStyles: Readonly<{
|
|
10
|
+
readonly base: Readonly<{
|
|
11
|
+
readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", 0>;
|
|
12
|
+
readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
|
|
13
|
+
readonly flexDirection: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"flexDirection", "column">;
|
|
14
|
+
readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
|
|
15
|
+
readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
|
|
16
|
+
readonly flexWrap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"flexWrap", "nowrap">;
|
|
17
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
|
|
18
|
+
readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
|
|
19
|
+
readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
|
|
20
|
+
readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
|
|
21
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
|
|
22
|
+
readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", "none">;
|
|
23
|
+
readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
|
|
24
|
+
readonly ":hover:not(:is([data-selected='true'])):not(:disabled)": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":hover:not(:is([data-selected='true'])):not(:disabled)", {
|
|
25
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
26
|
+
}>;
|
|
27
|
+
readonly ":active:not(:disabled)": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":active:not(:disabled)", {
|
|
28
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
29
|
+
}>;
|
|
30
|
+
readonly ":is([data-selected='true'])": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":is([data-selected='true'])", {
|
|
31
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
32
|
+
readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
33
|
+
}>;
|
|
34
|
+
readonly ":disabled": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":disabled", {
|
|
35
|
+
readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
36
|
+
readonly cursor: "not-allowed";
|
|
37
|
+
}>;
|
|
38
|
+
}>;
|
|
39
|
+
readonly line: Readonly<{
|
|
40
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
|
|
41
|
+
readonly marginTop: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"marginTop", "3px">;
|
|
42
|
+
readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "1px">;
|
|
43
|
+
readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "100%">;
|
|
44
|
+
readonly ":is([data-selected='true'])": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":is([data-selected='true'])", {
|
|
45
|
+
readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
|
|
46
|
+
readonly height: "2px";
|
|
47
|
+
readonly marginTop: "2px";
|
|
48
|
+
}>;
|
|
49
|
+
}>;
|
|
50
|
+
readonly icon: Readonly<{
|
|
51
|
+
readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
|
|
52
|
+
readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
|
|
53
|
+
readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
|
|
54
|
+
readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "20px">;
|
|
55
|
+
readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "20px">;
|
|
56
|
+
}>;
|
|
57
|
+
readonly iconSmall: Readonly<{
|
|
58
|
+
readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "16px">;
|
|
59
|
+
readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "16px">;
|
|
60
|
+
}>;
|
|
61
|
+
readonly small: Readonly<{
|
|
62
|
+
readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "4px 8px">;
|
|
63
|
+
}>;
|
|
64
|
+
readonly regular: Readonly<{
|
|
65
|
+
readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "10px 8px">;
|
|
66
|
+
}>;
|
|
67
|
+
readonly labelWrapper: Readonly<{
|
|
68
|
+
readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
|
|
69
|
+
readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
|
|
70
|
+
readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
|
|
71
|
+
readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "8px">;
|
|
72
|
+
}>;
|
|
73
|
+
}>;
|
|
74
|
+
export type HorizontalTabSizeStyles = "regular" | "small";
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
export { Button } from "./button";
|
|
2
|
+
export { Text } from "./text";
|
|
3
|
+
export { Input } from "./input";
|
|
4
|
+
export { TextArea } from "./textarea";
|
|
5
|
+
export { Checkbox } from "./checkbox";
|
|
6
|
+
export { RadioGroup, RadioItem } from "./radio-group";
|
|
7
|
+
export { Card, CardBody, CardContent, CardFooter, CardHeader } from "./card";
|
|
8
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, } from "./dialog";
|
|
9
|
+
export { Select, SelectTrigger, SelectContent, SelectGroup, SelectLabel, SelectSeparator, SelectItem, } from "./select";
|
|
10
|
+
export { VerticalMenus, VerticalMenu } from "./vertical-menu";
|
|
11
|
+
export { HorizontalTabs, HorizontalTab } from "./horizontal-tab";
|
|
12
|
+
export { ModeTabs, ModeTab } from "./mode-tab";
|
|
13
|
+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipArrow, TooltipHeader, TooltipDescription, TooltipFooter, } from "./tooltip";
|
|
14
|
+
export { Tag } from "./tag";
|
|
15
|
+
export declare const version = "0.0.1";
|
|
16
|
+
export * from "./styles/layout.stylex";
|
|
17
|
+
export * from "./styles/primitiveColors.stylex";
|
|
18
|
+
export * from "./styles/semanticColors.stylex";
|
|
19
|
+
export * from "./styles/typography.stylex";
|
|
20
|
+
export { commonStyles } from "./styles/common";
|
|
21
|
+
export { buttonStyles, buttonSizeStyles, buttonVariantStyles, } from "./button/styles";
|
|
22
|
+
export type { ButtonSizeStyles, ButtonVariantStyles, ButtonStyles, } from "./button/styles";
|
|
23
|
+
export { textStyles, textSizeStyles, fontWeightStyles, textAlignStyles, textVariantStyles, } from "./text/styles";
|
|
24
|
+
export type { TextSizeStyles, FontWeightStyles, TextAlignStyles, TextVariantStyles, } from "./text/styles";
|
|
25
|
+
export { inputStyles, inputWrapperStyles, inputWrapperSizeStyles, } from "./input/styles";
|
|
26
|
+
export type { InputWrapperSizeStyles, InputWrapperStyles, } from "./input/styles";
|
|
27
|
+
export { textAreaStyles, textAreaWrapperStyles } from "./textarea/styles";
|
|
28
|
+
export { checkboxStyles, checkboxWrapperStyles, labelStyles, } from "./checkbox/styles";
|
|
29
|
+
export { radioGroupStyles, radioItemWrapperStyles, radioItemLabelStyles, radioItemStyles, } from "./radio-group/styles";
|
|
30
|
+
export { cardStyles, cardHeaderStyles, cardBodyStyles, cardFooterStyles, } from "./card/styles";
|
|
31
|
+
export { dialogContentStyles, dialogOverlayStyles } from "./dialog/styles";
|
|
32
|
+
export { selectIconWrapperStyles, selectTriggerStyles, selectContentStyles, selectItemStyles, selectSeparatorStyles, selectGroupLabelStyles, } from "./select/styles";
|
|
33
|
+
export { verticalMenusWrapperStyles, verticalMenuIconStyles, verticalMenuStyles, } from "./vertical-menu/styles";
|
|
34
|
+
export { horizontalTabWrapperStyles, horizontalTabStyles, } from "./horizontal-tab/styles";
|
|
35
|
+
export { modeTabWrapperStyles, modeTabStyles } from "./mode-tab/styles";
|
|
36
|
+
export { tooltipDescriptionStyles, tooltipShortStyles } from "./tooltip/styles";
|
|
37
|
+
export { tagStyles } from "./tag/styles";
|