@arkitektbedriftene/fe-lib 0.3.1 → 0.3.3
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/dist/lib/ui/components/Alert.d.ts +124 -0
- package/dist/lib/ui/components/Button.d.ts +126 -0
- package/dist/lib/ui/components/Spinner.d.ts +123 -0
- package/dist/lib/ui/stitches.config.d.ts +717 -0
- package/dist/lib/ui/ui.d.ts +4 -0
- package/dist/ui.css +1 -0
- package/dist/ui.css.d.ts +1 -0
- package/dist/ui.d.ts +1 -0
- package/dist/ui.es.js +779 -0
- package/package.json +13 -4
- package/src/lib/ui/components/Alert.tsx +55 -0
- package/src/lib/ui/components/Button.tsx +173 -0
- package/src/lib/ui/components/Spinner.tsx +102 -0
- package/src/lib/ui/stitches.config.ts +144 -0
- package/src/lib/ui/ui.css +11 -0
- package/src/lib/ui/ui.ts +5 -0
- package/vite.config.ts +3 -0
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
declare const AlertStyled: import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
2
|
+
color?: "warning" | "danger" | "info" | undefined;
|
|
3
|
+
size?: "sm" | "md" | undefined;
|
|
4
|
+
}, {
|
|
5
|
+
lg: "(min-width: 1200px)";
|
|
6
|
+
print: "print";
|
|
7
|
+
}, import("@stitches/react/types/css-util").CSS<{
|
|
8
|
+
lg: "(min-width: 1200px)";
|
|
9
|
+
print: "print";
|
|
10
|
+
}, {
|
|
11
|
+
colors: {
|
|
12
|
+
gray50: string;
|
|
13
|
+
gray100: string;
|
|
14
|
+
gray200: string;
|
|
15
|
+
gray300: string;
|
|
16
|
+
gray400: string;
|
|
17
|
+
gray500: string;
|
|
18
|
+
gray600: string;
|
|
19
|
+
gray700: string;
|
|
20
|
+
gray800: string;
|
|
21
|
+
gray900: string;
|
|
22
|
+
blue50: string;
|
|
23
|
+
blue100: string;
|
|
24
|
+
blue200: string;
|
|
25
|
+
blue300: string;
|
|
26
|
+
blue400: string;
|
|
27
|
+
blue500: string;
|
|
28
|
+
blue600: string;
|
|
29
|
+
blue700: string;
|
|
30
|
+
blue800: string;
|
|
31
|
+
blue900: string;
|
|
32
|
+
yellow50: string;
|
|
33
|
+
yellow100: string;
|
|
34
|
+
yellow200: string;
|
|
35
|
+
yellow300: string;
|
|
36
|
+
yellow400: string;
|
|
37
|
+
yellow500: string;
|
|
38
|
+
yellow600: string;
|
|
39
|
+
yellow700: string;
|
|
40
|
+
yellow800: string;
|
|
41
|
+
yellow900: string;
|
|
42
|
+
orange500: string;
|
|
43
|
+
red50: string;
|
|
44
|
+
red100: string;
|
|
45
|
+
red200: string;
|
|
46
|
+
red300: string;
|
|
47
|
+
red400: string;
|
|
48
|
+
red500: string;
|
|
49
|
+
red600: string;
|
|
50
|
+
red700: string;
|
|
51
|
+
red800: string;
|
|
52
|
+
red900: string;
|
|
53
|
+
green50: string;
|
|
54
|
+
green100: string;
|
|
55
|
+
green200: string;
|
|
56
|
+
green300: string;
|
|
57
|
+
green400: string;
|
|
58
|
+
green500: string;
|
|
59
|
+
green600: string;
|
|
60
|
+
green700: string;
|
|
61
|
+
green800: string;
|
|
62
|
+
green900: string;
|
|
63
|
+
primaryTextOnLightBg: string;
|
|
64
|
+
primaryBg: string;
|
|
65
|
+
primaryBgHover: string;
|
|
66
|
+
primaryTextOnWhite: string;
|
|
67
|
+
bodyGray: string;
|
|
68
|
+
hoverDarker: string;
|
|
69
|
+
borderDarker: string;
|
|
70
|
+
selectedDarker: string;
|
|
71
|
+
selectedOnBodyGray: string;
|
|
72
|
+
darkGrayBg: string;
|
|
73
|
+
border: string;
|
|
74
|
+
text: string;
|
|
75
|
+
secondaryText: string;
|
|
76
|
+
focusRing: string;
|
|
77
|
+
};
|
|
78
|
+
fontSizes: {
|
|
79
|
+
xs: string;
|
|
80
|
+
sm: string;
|
|
81
|
+
md: string;
|
|
82
|
+
lg: string;
|
|
83
|
+
xl: string;
|
|
84
|
+
"2xl": string;
|
|
85
|
+
"3xl": string;
|
|
86
|
+
};
|
|
87
|
+
fontWeights: {
|
|
88
|
+
normal: string;
|
|
89
|
+
medium: string;
|
|
90
|
+
bold: string;
|
|
91
|
+
};
|
|
92
|
+
space: {
|
|
93
|
+
1: string;
|
|
94
|
+
2: string;
|
|
95
|
+
3: string;
|
|
96
|
+
4: string;
|
|
97
|
+
6: string;
|
|
98
|
+
8: string;
|
|
99
|
+
};
|
|
100
|
+
shadows: {
|
|
101
|
+
xs: string;
|
|
102
|
+
sm: string;
|
|
103
|
+
md: string;
|
|
104
|
+
lg: string;
|
|
105
|
+
overlayCard: string;
|
|
106
|
+
};
|
|
107
|
+
radii: {
|
|
108
|
+
xs: string;
|
|
109
|
+
sm: string;
|
|
110
|
+
md: string;
|
|
111
|
+
mdmd: string;
|
|
112
|
+
full: string;
|
|
113
|
+
};
|
|
114
|
+
zIndices: {
|
|
115
|
+
toast: number;
|
|
116
|
+
overlayCard: number;
|
|
117
|
+
modal: number;
|
|
118
|
+
};
|
|
119
|
+
}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
|
|
120
|
+
type AlertProps = React.ComponentProps<typeof AlertStyled> & {
|
|
121
|
+
as?: React.ElementType;
|
|
122
|
+
};
|
|
123
|
+
export declare const Alert: import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
124
|
+
export {};
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
declare const ButtonStyled: import("@stitches/react/types/styled-component").StyledComponent<"button", {
|
|
2
|
+
color?: "warning" | "danger" | "primary" | "secondary" | "success" | undefined;
|
|
3
|
+
size?: "md" | "lg" | undefined;
|
|
4
|
+
variant?: "outline" | "transparent" | "primary" | undefined;
|
|
5
|
+
}, {
|
|
6
|
+
lg: "(min-width: 1200px)";
|
|
7
|
+
print: "print";
|
|
8
|
+
}, import("@stitches/react/types/css-util").CSS<{
|
|
9
|
+
lg: "(min-width: 1200px)";
|
|
10
|
+
print: "print";
|
|
11
|
+
}, {
|
|
12
|
+
colors: {
|
|
13
|
+
gray50: string;
|
|
14
|
+
gray100: string;
|
|
15
|
+
gray200: string;
|
|
16
|
+
gray300: string;
|
|
17
|
+
gray400: string;
|
|
18
|
+
gray500: string;
|
|
19
|
+
gray600: string;
|
|
20
|
+
gray700: string;
|
|
21
|
+
gray800: string;
|
|
22
|
+
gray900: string;
|
|
23
|
+
blue50: string;
|
|
24
|
+
blue100: string;
|
|
25
|
+
blue200: string;
|
|
26
|
+
blue300: string;
|
|
27
|
+
blue400: string;
|
|
28
|
+
blue500: string;
|
|
29
|
+
blue600: string;
|
|
30
|
+
blue700: string;
|
|
31
|
+
blue800: string;
|
|
32
|
+
blue900: string;
|
|
33
|
+
yellow50: string;
|
|
34
|
+
yellow100: string;
|
|
35
|
+
yellow200: string;
|
|
36
|
+
yellow300: string;
|
|
37
|
+
yellow400: string;
|
|
38
|
+
yellow500: string;
|
|
39
|
+
yellow600: string;
|
|
40
|
+
yellow700: string;
|
|
41
|
+
yellow800: string;
|
|
42
|
+
yellow900: string;
|
|
43
|
+
orange500: string;
|
|
44
|
+
red50: string;
|
|
45
|
+
red100: string;
|
|
46
|
+
red200: string;
|
|
47
|
+
red300: string;
|
|
48
|
+
red400: string;
|
|
49
|
+
red500: string;
|
|
50
|
+
red600: string;
|
|
51
|
+
red700: string;
|
|
52
|
+
red800: string;
|
|
53
|
+
red900: string;
|
|
54
|
+
green50: string;
|
|
55
|
+
green100: string;
|
|
56
|
+
green200: string;
|
|
57
|
+
green300: string;
|
|
58
|
+
green400: string;
|
|
59
|
+
green500: string;
|
|
60
|
+
green600: string;
|
|
61
|
+
green700: string;
|
|
62
|
+
green800: string;
|
|
63
|
+
green900: string;
|
|
64
|
+
primaryTextOnLightBg: string;
|
|
65
|
+
primaryBg: string;
|
|
66
|
+
primaryBgHover: string;
|
|
67
|
+
primaryTextOnWhite: string;
|
|
68
|
+
bodyGray: string;
|
|
69
|
+
hoverDarker: string;
|
|
70
|
+
borderDarker: string;
|
|
71
|
+
selectedDarker: string;
|
|
72
|
+
selectedOnBodyGray: string;
|
|
73
|
+
darkGrayBg: string;
|
|
74
|
+
border: string;
|
|
75
|
+
text: string;
|
|
76
|
+
secondaryText: string;
|
|
77
|
+
focusRing: string;
|
|
78
|
+
};
|
|
79
|
+
fontSizes: {
|
|
80
|
+
xs: string;
|
|
81
|
+
sm: string;
|
|
82
|
+
md: string;
|
|
83
|
+
lg: string;
|
|
84
|
+
xl: string;
|
|
85
|
+
"2xl": string;
|
|
86
|
+
"3xl": string;
|
|
87
|
+
};
|
|
88
|
+
fontWeights: {
|
|
89
|
+
normal: string;
|
|
90
|
+
medium: string;
|
|
91
|
+
bold: string;
|
|
92
|
+
};
|
|
93
|
+
space: {
|
|
94
|
+
1: string;
|
|
95
|
+
2: string;
|
|
96
|
+
3: string;
|
|
97
|
+
4: string;
|
|
98
|
+
6: string;
|
|
99
|
+
8: string;
|
|
100
|
+
};
|
|
101
|
+
shadows: {
|
|
102
|
+
xs: string;
|
|
103
|
+
sm: string;
|
|
104
|
+
md: string;
|
|
105
|
+
lg: string;
|
|
106
|
+
overlayCard: string;
|
|
107
|
+
};
|
|
108
|
+
radii: {
|
|
109
|
+
xs: string;
|
|
110
|
+
sm: string;
|
|
111
|
+
md: string;
|
|
112
|
+
mdmd: string;
|
|
113
|
+
full: string;
|
|
114
|
+
};
|
|
115
|
+
zIndices: {
|
|
116
|
+
toast: number;
|
|
117
|
+
overlayCard: number;
|
|
118
|
+
modal: number;
|
|
119
|
+
};
|
|
120
|
+
}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
|
|
121
|
+
type ButtonProps = React.ComponentProps<typeof ButtonStyled> & {
|
|
122
|
+
as?: React.ElementType;
|
|
123
|
+
isLoading?: boolean;
|
|
124
|
+
};
|
|
125
|
+
export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
126
|
+
export {};
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
export declare const Spinner: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
2
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
3
|
+
}, "color" | "css" | "size"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
4
|
+
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
5
|
+
color?: "inherit" | "dark" | "light" | undefined;
|
|
6
|
+
}, {
|
|
7
|
+
lg: "(min-width: 1200px)";
|
|
8
|
+
print: "print";
|
|
9
|
+
}> & {
|
|
10
|
+
css?: import("@stitches/react/types/css-util").CSS<{
|
|
11
|
+
lg: "(min-width: 1200px)";
|
|
12
|
+
print: "print";
|
|
13
|
+
}, {
|
|
14
|
+
colors: {
|
|
15
|
+
gray50: string;
|
|
16
|
+
gray100: string;
|
|
17
|
+
gray200: string;
|
|
18
|
+
gray300: string;
|
|
19
|
+
gray400: string;
|
|
20
|
+
gray500: string;
|
|
21
|
+
gray600: string;
|
|
22
|
+
gray700: string;
|
|
23
|
+
gray800: string;
|
|
24
|
+
gray900: string;
|
|
25
|
+
blue50: string;
|
|
26
|
+
blue100: string;
|
|
27
|
+
blue200: string;
|
|
28
|
+
blue300: string;
|
|
29
|
+
blue400: string;
|
|
30
|
+
blue500: string;
|
|
31
|
+
blue600: string;
|
|
32
|
+
blue700: string;
|
|
33
|
+
blue800: string;
|
|
34
|
+
blue900: string;
|
|
35
|
+
yellow50: string;
|
|
36
|
+
yellow100: string;
|
|
37
|
+
yellow200: string;
|
|
38
|
+
yellow300: string;
|
|
39
|
+
yellow400: string;
|
|
40
|
+
yellow500: string;
|
|
41
|
+
yellow600: string;
|
|
42
|
+
yellow700: string;
|
|
43
|
+
yellow800: string;
|
|
44
|
+
yellow900: string;
|
|
45
|
+
orange500: string;
|
|
46
|
+
red50: string;
|
|
47
|
+
red100: string;
|
|
48
|
+
red200: string;
|
|
49
|
+
red300: string;
|
|
50
|
+
red400: string;
|
|
51
|
+
red500: string;
|
|
52
|
+
red600: string;
|
|
53
|
+
red700: string;
|
|
54
|
+
red800: string;
|
|
55
|
+
red900: string;
|
|
56
|
+
green50: string;
|
|
57
|
+
green100: string;
|
|
58
|
+
green200: string;
|
|
59
|
+
green300: string;
|
|
60
|
+
green400: string;
|
|
61
|
+
green500: string;
|
|
62
|
+
green600: string;
|
|
63
|
+
green700: string;
|
|
64
|
+
green800: string;
|
|
65
|
+
green900: string;
|
|
66
|
+
primaryTextOnLightBg: string;
|
|
67
|
+
primaryBg: string;
|
|
68
|
+
primaryBgHover: string;
|
|
69
|
+
primaryTextOnWhite: string;
|
|
70
|
+
bodyGray: string;
|
|
71
|
+
hoverDarker: string;
|
|
72
|
+
borderDarker: string;
|
|
73
|
+
selectedDarker: string;
|
|
74
|
+
selectedOnBodyGray: string;
|
|
75
|
+
darkGrayBg: string;
|
|
76
|
+
border: string;
|
|
77
|
+
text: string;
|
|
78
|
+
secondaryText: string;
|
|
79
|
+
focusRing: string;
|
|
80
|
+
};
|
|
81
|
+
fontSizes: {
|
|
82
|
+
xs: string;
|
|
83
|
+
sm: string;
|
|
84
|
+
md: string;
|
|
85
|
+
lg: string;
|
|
86
|
+
xl: string;
|
|
87
|
+
"2xl": string;
|
|
88
|
+
"3xl": string;
|
|
89
|
+
};
|
|
90
|
+
fontWeights: {
|
|
91
|
+
normal: string;
|
|
92
|
+
medium: string;
|
|
93
|
+
bold: string;
|
|
94
|
+
};
|
|
95
|
+
space: {
|
|
96
|
+
1: string;
|
|
97
|
+
2: string;
|
|
98
|
+
3: string;
|
|
99
|
+
4: string;
|
|
100
|
+
6: string;
|
|
101
|
+
8: string;
|
|
102
|
+
};
|
|
103
|
+
shadows: {
|
|
104
|
+
xs: string;
|
|
105
|
+
sm: string;
|
|
106
|
+
md: string;
|
|
107
|
+
lg: string;
|
|
108
|
+
overlayCard: string;
|
|
109
|
+
};
|
|
110
|
+
radii: {
|
|
111
|
+
xs: string;
|
|
112
|
+
sm: string;
|
|
113
|
+
md: string;
|
|
114
|
+
mdmd: string;
|
|
115
|
+
full: string;
|
|
116
|
+
};
|
|
117
|
+
zIndices: {
|
|
118
|
+
toast: number;
|
|
119
|
+
overlayCard: number;
|
|
120
|
+
modal: number;
|
|
121
|
+
};
|
|
122
|
+
}, import("@stitches/react/types/config").DefaultThemeMap, {}> | undefined;
|
|
123
|
+
}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|