@korsolutions/ui 0.0.3 → 0.0.5
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/components/index.d.mts +84 -0
- package/dist/components/index.mjs +288 -0
- package/dist/index-Dafk8ZGv.d.mts +265 -0
- package/dist/index.d.mts +45 -0
- package/dist/index.mjs +11 -0
- package/dist/portal-DoPaAohb.mjs +61 -0
- package/dist/primitives/index.d.mts +2 -0
- package/dist/primitives/index.mjs +4 -0
- package/dist/primitives-BYUlEz2_.mjs +442 -0
- package/dist/themes-BrLbh9h6.mjs +86 -0
- package/package.json +20 -8
- package/src/components/button/button.tsx +24 -0
- package/src/components/button/variants/default.tsx +52 -0
- package/src/components/button/variants/index.ts +5 -0
- package/src/components/card/card.tsx +26 -0
- package/src/components/card/variants/default.tsx +38 -0
- package/src/components/card/variants/index.ts +5 -0
- package/src/components/field/field.tsx +27 -0
- package/src/components/field/variants/default.tsx +29 -0
- package/src/components/field/variants/index.ts +5 -0
- package/src/components/index.ts +5 -0
- package/src/components/input/input.tsx +14 -0
- package/src/components/input/variants/default.tsx +34 -0
- package/src/components/input/variants/index.ts +5 -0
- package/src/components/select/select.tsx +35 -0
- package/src/components/select/variants/default.tsx +81 -0
- package/src/components/select/variants/index.ts +5 -0
- package/src/index.tsx +13 -0
- package/src/primitives/button/button-context.tsx +5 -5
- package/src/primitives/button/button-label.tsx +7 -5
- package/src/primitives/button/button-root.tsx +12 -8
- package/src/primitives/button/button-spinner.tsx +14 -0
- package/src/primitives/button/index.ts +5 -3
- package/src/primitives/button/types.ts +6 -5
- package/src/primitives/card/{card-content.tsx → card-body.tsx} +5 -5
- package/src/primitives/card/card-footer.tsx +1 -1
- package/src/primitives/card/card-header.tsx +1 -1
- package/src/primitives/card/card-root.tsx +1 -1
- package/src/primitives/card/card-title.tsx +1 -1
- package/src/primitives/card/index.ts +4 -4
- package/src/primitives/card/types.ts +2 -2
- package/src/primitives/field/context.ts +5 -19
- package/src/primitives/field/field-description.tsx +17 -0
- package/src/primitives/field/field-error.tsx +17 -0
- package/src/primitives/field/field-label.tsx +7 -3
- package/src/primitives/field/field-root.tsx +13 -59
- package/src/primitives/field/index.ts +9 -6
- package/src/primitives/field/types.ts +8 -7
- package/src/primitives/index.ts +5 -0
- package/src/primitives/input/index.ts +1 -1
- package/src/primitives/input/input.tsx +48 -13
- package/src/primitives/input/types.ts +2 -4
- package/src/primitives/select/context.ts +3 -3
- package/src/primitives/select/index.ts +2 -2
- package/src/primitives/select/select-content.tsx +2 -2
- package/src/primitives/select/select-option.tsx +27 -4
- package/src/primitives/select/select-overlay.tsx +1 -1
- package/src/primitives/select/select-root.tsx +13 -11
- package/src/primitives/select/select-trigger.tsx +3 -2
- package/src/primitives/select/select-value.tsx +4 -1
- package/src/primitives/select/types.ts +3 -1
- package/src/themes/default/colors.ts +45 -0
- package/src/themes/default/index.ts +11 -0
- package/src/themes/index.ts +2 -0
- package/src/themes/provider.tsx +56 -0
- package/src/themes/themes.ts +6 -0
- package/src/themes/types.ts +30 -0
- package/src/utils/hsla-utils.ts +10 -0
- package/src/utils/use-themed-styles.ts +13 -0
- package/tsconfig.json +8 -0
- package/tsdown.config.ts +8 -0
- package/src/index.ts +0 -7
- package/src/primitives/field/field-control.tsx +0 -29
- package/src/primitives/provider.tsx +0 -10
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { E as InputStyles, f as SelectStyles, k as FieldStyles, r as CardStyles, u as SelectRootBaseProps, w as InputPrimitiveBaseProps, x as ButtonStyles } from "../index-Dafk8ZGv.mjs";
|
|
2
|
+
import React from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/button/variants/index.d.ts
|
|
5
|
+
declare const ButtonVariants: {
|
|
6
|
+
default: () => ButtonStyles;
|
|
7
|
+
};
|
|
8
|
+
//#endregion
|
|
9
|
+
//#region src/components/button/button.d.ts
|
|
10
|
+
interface ButtonProps {
|
|
11
|
+
onPress?: () => void;
|
|
12
|
+
children?: string;
|
|
13
|
+
isDisabled?: boolean;
|
|
14
|
+
isLoading?: boolean;
|
|
15
|
+
variant?: keyof typeof ButtonVariants;
|
|
16
|
+
}
|
|
17
|
+
declare function Button(props: ButtonProps): React.JSX.Element;
|
|
18
|
+
//#endregion
|
|
19
|
+
//#region src/components/card/variants/default.d.ts
|
|
20
|
+
declare function useCardVariantDefault(): CardStyles;
|
|
21
|
+
//#endregion
|
|
22
|
+
//#region src/components/card/variants/index.d.ts
|
|
23
|
+
declare const CardVariants: {
|
|
24
|
+
default: typeof useCardVariantDefault;
|
|
25
|
+
};
|
|
26
|
+
//#endregion
|
|
27
|
+
//#region src/components/card/card.d.ts
|
|
28
|
+
interface CardProps {
|
|
29
|
+
title?: string;
|
|
30
|
+
children: React.ReactNode;
|
|
31
|
+
variant?: keyof typeof CardVariants;
|
|
32
|
+
}
|
|
33
|
+
declare function Card(props: CardProps): React.JSX.Element;
|
|
34
|
+
//#endregion
|
|
35
|
+
//#region src/components/input/variants/default.d.ts
|
|
36
|
+
declare function useInputVariantDefault(): InputStyles;
|
|
37
|
+
//#endregion
|
|
38
|
+
//#region src/components/input/variants/index.d.ts
|
|
39
|
+
declare const InputVariants: {
|
|
40
|
+
default: typeof useInputVariantDefault;
|
|
41
|
+
};
|
|
42
|
+
//#endregion
|
|
43
|
+
//#region src/components/input/input.d.ts
|
|
44
|
+
interface InputProps extends InputPrimitiveBaseProps {
|
|
45
|
+
variant?: keyof typeof InputVariants;
|
|
46
|
+
}
|
|
47
|
+
declare function Input(props: InputProps): React.JSX.Element;
|
|
48
|
+
//#endregion
|
|
49
|
+
//#region src/components/field/variants/index.d.ts
|
|
50
|
+
declare const FieldVariants: {
|
|
51
|
+
default: () => FieldStyles;
|
|
52
|
+
};
|
|
53
|
+
//#endregion
|
|
54
|
+
//#region src/components/field/field.d.ts
|
|
55
|
+
interface FieldProps {
|
|
56
|
+
children: React.ReactNode;
|
|
57
|
+
id?: string;
|
|
58
|
+
label?: string;
|
|
59
|
+
description?: string;
|
|
60
|
+
error?: string;
|
|
61
|
+
variant?: keyof typeof FieldVariants;
|
|
62
|
+
}
|
|
63
|
+
declare function Field(props: FieldProps): React.JSX.Element;
|
|
64
|
+
//#endregion
|
|
65
|
+
//#region src/components/select/variants/default.d.ts
|
|
66
|
+
declare function useSelectVariantDefault(): SelectStyles;
|
|
67
|
+
//#endregion
|
|
68
|
+
//#region src/components/select/variants/index.d.ts
|
|
69
|
+
declare const SelectVariants: {
|
|
70
|
+
default: typeof useSelectVariantDefault;
|
|
71
|
+
};
|
|
72
|
+
//#endregion
|
|
73
|
+
//#region src/components/select/select.d.ts
|
|
74
|
+
interface SelectOption<T> {
|
|
75
|
+
value: T;
|
|
76
|
+
label: string;
|
|
77
|
+
}
|
|
78
|
+
interface SelectProps<T> extends SelectRootBaseProps {
|
|
79
|
+
options: SelectOption<T>[];
|
|
80
|
+
variant?: keyof typeof SelectVariants;
|
|
81
|
+
}
|
|
82
|
+
declare function Select<T>(props: SelectProps<T>): React.JSX.Element;
|
|
83
|
+
//#endregion
|
|
84
|
+
export { Button, Card, Field, FieldProps, Input, Select, SelectOption, SelectProps };
|
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
import { n as useTheme } from "../themes-BrLbh9h6.mjs";
|
|
2
|
+
import "../portal-DoPaAohb.mjs";
|
|
3
|
+
import { a as FieldPrimitive, i as InputPrimitive, n as SelectPrimitive, r as ButtonPrimitive, t as CardPrimitive } from "../primitives-BYUlEz2_.mjs";
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
|
|
7
|
+
//#region src/utils/use-themed-styles.ts
|
|
8
|
+
const useThemedStyles = (callback) => {
|
|
9
|
+
const theme = useTheme();
|
|
10
|
+
return callback({
|
|
11
|
+
colors: theme.colors,
|
|
12
|
+
radius: theme.radius,
|
|
13
|
+
fontFamily: theme.fontFamily
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
//#endregion
|
|
18
|
+
//#region src/components/button/variants/default.tsx
|
|
19
|
+
const useButtonVariantDefault = () => {
|
|
20
|
+
return useThemedStyles(({ colors, radius, fontFamily }) => ({
|
|
21
|
+
root: {
|
|
22
|
+
default: {
|
|
23
|
+
flexDirection: "row",
|
|
24
|
+
backgroundColor: colors.primary,
|
|
25
|
+
paddingVertical: 12,
|
|
26
|
+
paddingHorizontal: 16,
|
|
27
|
+
borderRadius: radius,
|
|
28
|
+
gap: 8,
|
|
29
|
+
alignItems: "center",
|
|
30
|
+
justifyContent: "center"
|
|
31
|
+
},
|
|
32
|
+
disabled: { opacity: .5 },
|
|
33
|
+
loading: { opacity: .8 }
|
|
34
|
+
},
|
|
35
|
+
label: {
|
|
36
|
+
default: {
|
|
37
|
+
color: colors.primaryForeground,
|
|
38
|
+
fontSize: 16,
|
|
39
|
+
fontWeight: "bold",
|
|
40
|
+
fontFamily
|
|
41
|
+
},
|
|
42
|
+
disabled: { color: colors.mutedForeground },
|
|
43
|
+
loading: { color: colors.mutedForeground }
|
|
44
|
+
},
|
|
45
|
+
spinner: {
|
|
46
|
+
default: { color: colors.primaryForeground },
|
|
47
|
+
disabled: { color: colors.mutedForeground },
|
|
48
|
+
loading: { color: colors.mutedForeground }
|
|
49
|
+
}
|
|
50
|
+
}));
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
//#endregion
|
|
54
|
+
//#region src/components/button/variants/index.ts
|
|
55
|
+
const ButtonVariants = { default: useButtonVariantDefault };
|
|
56
|
+
|
|
57
|
+
//#endregion
|
|
58
|
+
//#region src/components/button/button.tsx
|
|
59
|
+
function Button(props) {
|
|
60
|
+
const variantStyles = (props.variant ? ButtonVariants[props.variant] : ButtonVariants["default"])();
|
|
61
|
+
return /* @__PURE__ */ jsxs(ButtonPrimitive.Root, {
|
|
62
|
+
onPress: props.onPress,
|
|
63
|
+
isDisabled: props.isDisabled,
|
|
64
|
+
isLoading: props.isLoading,
|
|
65
|
+
styles: variantStyles,
|
|
66
|
+
children: [props.isLoading && /* @__PURE__ */ jsx(ButtonPrimitive.Spinner, {}), /* @__PURE__ */ jsx(ButtonPrimitive.Label, { children: props.children })]
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
//#endregion
|
|
71
|
+
//#region src/components/card/variants/default.tsx
|
|
72
|
+
function useCardVariantDefault() {
|
|
73
|
+
return useThemedStyles(({ colors, radius, fontFamily }) => ({
|
|
74
|
+
root: { default: {
|
|
75
|
+
borderWidth: 1,
|
|
76
|
+
borderColor: colors.border,
|
|
77
|
+
borderRadius: radius,
|
|
78
|
+
backgroundColor: colors.surface,
|
|
79
|
+
paddingVertical: 24,
|
|
80
|
+
gap: 24
|
|
81
|
+
} },
|
|
82
|
+
header: { default: { paddingHorizontal: 24 } },
|
|
83
|
+
title: { default: {
|
|
84
|
+
fontFamily,
|
|
85
|
+
fontSize: 18,
|
|
86
|
+
fontWeight: "600",
|
|
87
|
+
color: colors.foreground
|
|
88
|
+
} },
|
|
89
|
+
body: { default: {
|
|
90
|
+
paddingHorizontal: 24,
|
|
91
|
+
gap: 24
|
|
92
|
+
} }
|
|
93
|
+
}));
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
//#endregion
|
|
97
|
+
//#region src/components/card/variants/index.ts
|
|
98
|
+
const CardVariants = { default: useCardVariantDefault };
|
|
99
|
+
|
|
100
|
+
//#endregion
|
|
101
|
+
//#region src/components/card/card.tsx
|
|
102
|
+
function Card(props) {
|
|
103
|
+
const useVariantStyles = CardVariants[props.variant || "default"];
|
|
104
|
+
const styles = useVariantStyles();
|
|
105
|
+
return /* @__PURE__ */ jsxs(CardPrimitive.Root, {
|
|
106
|
+
styles,
|
|
107
|
+
children: [!!props.title && /* @__PURE__ */ jsx(CardPrimitive.Header, { children: /* @__PURE__ */ jsx(CardPrimitive.Title, { children: props.title }) }), /* @__PURE__ */ jsx(CardPrimitive.Body, { children: props.children })]
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
//#endregion
|
|
112
|
+
//#region src/components/input/variants/default.tsx
|
|
113
|
+
function useInputVariantDefault() {
|
|
114
|
+
return useThemedStyles(({ colors, radius, fontFamily }) => ({
|
|
115
|
+
default: {
|
|
116
|
+
placeholderTextColor: colors.mutedForeground,
|
|
117
|
+
style: {
|
|
118
|
+
borderWidth: 1,
|
|
119
|
+
borderColor: colors.border,
|
|
120
|
+
borderRadius: radius,
|
|
121
|
+
backgroundColor: colors.surface,
|
|
122
|
+
paddingVertical: 12,
|
|
123
|
+
paddingHorizontal: 16,
|
|
124
|
+
outlineWidth: 0,
|
|
125
|
+
fontFamily,
|
|
126
|
+
height: 48
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
focused: { style: { borderColor: colors.primary } },
|
|
130
|
+
disabled: { style: {
|
|
131
|
+
color: colors.mutedForeground,
|
|
132
|
+
backgroundColor: colors.muted
|
|
133
|
+
} }
|
|
134
|
+
}));
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
//#endregion
|
|
138
|
+
//#region src/components/input/variants/index.ts
|
|
139
|
+
const InputVariants = { default: useInputVariantDefault };
|
|
140
|
+
|
|
141
|
+
//#endregion
|
|
142
|
+
//#region src/components/input/input.tsx
|
|
143
|
+
function Input(props) {
|
|
144
|
+
const variantStyles = (props.variant ? InputVariants[props.variant] : InputVariants["default"])();
|
|
145
|
+
return /* @__PURE__ */ jsx(InputPrimitive, {
|
|
146
|
+
...props,
|
|
147
|
+
styles: variantStyles
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
//#endregion
|
|
152
|
+
//#region src/components/field/variants/default.tsx
|
|
153
|
+
const useFieldVariantDefault = () => {
|
|
154
|
+
return useThemedStyles(({ colors, fontFamily }) => ({
|
|
155
|
+
root: {
|
|
156
|
+
flexDirection: "column",
|
|
157
|
+
gap: 8
|
|
158
|
+
},
|
|
159
|
+
label: {
|
|
160
|
+
fontFamily,
|
|
161
|
+
fontSize: 14,
|
|
162
|
+
fontWeight: "600",
|
|
163
|
+
color: colors.foreground
|
|
164
|
+
},
|
|
165
|
+
description: {
|
|
166
|
+
fontFamily,
|
|
167
|
+
fontSize: 14,
|
|
168
|
+
color: colors.mutedForeground
|
|
169
|
+
},
|
|
170
|
+
error: {
|
|
171
|
+
fontFamily,
|
|
172
|
+
fontSize: 14,
|
|
173
|
+
color: colors.danger
|
|
174
|
+
}
|
|
175
|
+
}));
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
//#endregion
|
|
179
|
+
//#region src/components/field/variants/index.ts
|
|
180
|
+
const FieldVariants = { default: useFieldVariantDefault };
|
|
181
|
+
|
|
182
|
+
//#endregion
|
|
183
|
+
//#region src/components/field/field.tsx
|
|
184
|
+
function Field(props) {
|
|
185
|
+
const useVariantStyles = FieldVariants[props.variant || "default"];
|
|
186
|
+
const variantStyles = useVariantStyles();
|
|
187
|
+
return /* @__PURE__ */ jsxs(FieldPrimitive.Root, {
|
|
188
|
+
styles: variantStyles,
|
|
189
|
+
children: [
|
|
190
|
+
props.label && /* @__PURE__ */ jsx(FieldPrimitive.Label, {
|
|
191
|
+
htmlFor: props.id,
|
|
192
|
+
children: props.label
|
|
193
|
+
}),
|
|
194
|
+
props.description && /* @__PURE__ */ jsx(FieldPrimitive.Description, { children: props.description }),
|
|
195
|
+
props.children,
|
|
196
|
+
props.error && /* @__PURE__ */ jsx(FieldPrimitive.Error, { children: props.error })
|
|
197
|
+
]
|
|
198
|
+
});
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
//#endregion
|
|
202
|
+
//#region src/components/select/variants/default.tsx
|
|
203
|
+
function useSelectVariantDefault() {
|
|
204
|
+
return useThemedStyles(({ colors, radius, fontFamily }) => ({
|
|
205
|
+
root: {
|
|
206
|
+
default: {},
|
|
207
|
+
disabled: {}
|
|
208
|
+
},
|
|
209
|
+
trigger: {
|
|
210
|
+
default: {
|
|
211
|
+
borderWidth: 1,
|
|
212
|
+
borderColor: colors.border,
|
|
213
|
+
borderRadius: radius,
|
|
214
|
+
justifyContent: "center",
|
|
215
|
+
paddingVertical: 12,
|
|
216
|
+
paddingHorizontal: 16,
|
|
217
|
+
height: 48
|
|
218
|
+
},
|
|
219
|
+
disabled: { backgroundColor: colors.muted }
|
|
220
|
+
},
|
|
221
|
+
value: {
|
|
222
|
+
default: {
|
|
223
|
+
fontFamily,
|
|
224
|
+
fontSize: 16,
|
|
225
|
+
color: colors.foreground
|
|
226
|
+
},
|
|
227
|
+
disabled: { color: colors.mutedForeground }
|
|
228
|
+
},
|
|
229
|
+
placeholder: {
|
|
230
|
+
default: {
|
|
231
|
+
fontFamily,
|
|
232
|
+
fontSize: 16,
|
|
233
|
+
color: colors.mutedForeground
|
|
234
|
+
},
|
|
235
|
+
disabled: { color: colors.mutedForeground }
|
|
236
|
+
},
|
|
237
|
+
overlay: {
|
|
238
|
+
default: {},
|
|
239
|
+
disabled: {}
|
|
240
|
+
},
|
|
241
|
+
content: {
|
|
242
|
+
default: {
|
|
243
|
+
backgroundColor: colors.surface,
|
|
244
|
+
borderRadius: radius,
|
|
245
|
+
borderWidth: 1,
|
|
246
|
+
borderColor: colors.border,
|
|
247
|
+
padding: 4,
|
|
248
|
+
gap: 4
|
|
249
|
+
},
|
|
250
|
+
disabled: {}
|
|
251
|
+
},
|
|
252
|
+
option: {
|
|
253
|
+
default: {
|
|
254
|
+
paddingVertical: 12,
|
|
255
|
+
paddingHorizontal: 16,
|
|
256
|
+
fontFamily,
|
|
257
|
+
fontSize: 16,
|
|
258
|
+
color: colors.foreground,
|
|
259
|
+
borderRadius: radius / 2
|
|
260
|
+
},
|
|
261
|
+
disabled: { color: colors.mutedForeground },
|
|
262
|
+
selected: { backgroundColor: colors.muted },
|
|
263
|
+
hovered: { backgroundColor: colors.muted }
|
|
264
|
+
}
|
|
265
|
+
}));
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
//#endregion
|
|
269
|
+
//#region src/components/select/variants/index.ts
|
|
270
|
+
const SelectVariants = { default: useSelectVariantDefault };
|
|
271
|
+
|
|
272
|
+
//#endregion
|
|
273
|
+
//#region src/components/select/select.tsx
|
|
274
|
+
function Select(props) {
|
|
275
|
+
const useVariantStyles = SelectVariants[props.variant ?? "default"];
|
|
276
|
+
const variantStyles = useVariantStyles();
|
|
277
|
+
return /* @__PURE__ */ jsxs(SelectPrimitive.Root, {
|
|
278
|
+
...props,
|
|
279
|
+
styles: variantStyles,
|
|
280
|
+
children: [/* @__PURE__ */ jsx(SelectPrimitive.Trigger, { children: /* @__PURE__ */ jsx(SelectPrimitive.Value, {}) }), /* @__PURE__ */ jsxs(SelectPrimitive.Portal, { children: [/* @__PURE__ */ jsx(SelectPrimitive.Overlay, {}), /* @__PURE__ */ jsx(SelectPrimitive.Content, { children: props.options.map((option) => /* @__PURE__ */ jsx(SelectPrimitive.Option, {
|
|
281
|
+
value: String(option.value),
|
|
282
|
+
children: option.label
|
|
283
|
+
}, String(option.value))) })] })]
|
|
284
|
+
});
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
//#endregion
|
|
288
|
+
export { Button, Card, Field, Input, Select };
|
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
import * as react2 from "react";
|
|
2
|
+
import React$1 from "react";
|
|
3
|
+
import { StyleProp, TextInputProps, TextProps, TextStyle, ViewStyle } from "react-native";
|
|
4
|
+
|
|
5
|
+
//#region src/primitives/field/field-label.d.ts
|
|
6
|
+
interface FieldLabelProps {
|
|
7
|
+
children: string;
|
|
8
|
+
htmlFor?: string;
|
|
9
|
+
render?: (props: FieldLabelProps) => React$1.ReactNode;
|
|
10
|
+
style?: TextProps["style"];
|
|
11
|
+
}
|
|
12
|
+
declare function FieldLabel(props: FieldLabelProps): React$1.JSX.Element;
|
|
13
|
+
//#endregion
|
|
14
|
+
//#region src/primitives/field/field-description.d.ts
|
|
15
|
+
interface FieldDescriptionProps {
|
|
16
|
+
children: string;
|
|
17
|
+
render?: (props: FieldDescriptionProps) => React$1.ReactNode;
|
|
18
|
+
style?: StyleProp<TextStyle>;
|
|
19
|
+
}
|
|
20
|
+
declare function FieldDescription(props: FieldDescriptionProps): React$1.JSX.Element;
|
|
21
|
+
//#endregion
|
|
22
|
+
//#region src/primitives/field/field-error.d.ts
|
|
23
|
+
interface FieldErrorProps {
|
|
24
|
+
children: string;
|
|
25
|
+
render?: (props: FieldErrorProps) => React$1.ReactNode;
|
|
26
|
+
style?: StyleProp<TextStyle>;
|
|
27
|
+
}
|
|
28
|
+
declare function FieldError(props: FieldErrorProps): React$1.JSX.Element;
|
|
29
|
+
//#endregion
|
|
30
|
+
//#region src/primitives/field/types.d.ts
|
|
31
|
+
interface FieldStyles {
|
|
32
|
+
root?: FieldPrimitiveRootProps["style"];
|
|
33
|
+
label?: FieldLabelProps["style"];
|
|
34
|
+
description?: FieldDescriptionProps["style"];
|
|
35
|
+
error?: FieldErrorProps["style"];
|
|
36
|
+
}
|
|
37
|
+
//#endregion
|
|
38
|
+
//#region src/primitives/field/field-root.d.ts
|
|
39
|
+
interface FieldPrimitiveRootProps {
|
|
40
|
+
children?: React$1.ReactNode;
|
|
41
|
+
render?: (props: FieldPrimitiveRootProps) => React$1.ReactNode;
|
|
42
|
+
style?: StyleProp<ViewStyle>;
|
|
43
|
+
styles?: FieldStyles;
|
|
44
|
+
}
|
|
45
|
+
declare function FieldRoot(props: FieldPrimitiveRootProps): React$1.JSX.Element;
|
|
46
|
+
//#endregion
|
|
47
|
+
//#region src/primitives/field/index.d.ts
|
|
48
|
+
declare const FieldPrimitive: {
|
|
49
|
+
Root: typeof FieldRoot;
|
|
50
|
+
Label: typeof FieldLabel;
|
|
51
|
+
Description: typeof FieldDescription;
|
|
52
|
+
Error: typeof FieldError;
|
|
53
|
+
};
|
|
54
|
+
//#endregion
|
|
55
|
+
//#region src/primitives/input/types.d.ts
|
|
56
|
+
type InputState = "default" | "focused" | "disabled";
|
|
57
|
+
type InputStyles = Partial<Record<InputState, InputPrimitiveBaseProps>>;
|
|
58
|
+
//#endregion
|
|
59
|
+
//#region src/primitives/input/input.d.ts
|
|
60
|
+
type InputPrimitiveBaseProps = Omit<TextInputProps, "onChange"> & {
|
|
61
|
+
onChange?: TextInputProps["onChangeText"];
|
|
62
|
+
isDisabled?: boolean;
|
|
63
|
+
};
|
|
64
|
+
interface InputPrimitiveProps extends InputPrimitiveBaseProps {
|
|
65
|
+
render?: (props: InputPrimitiveProps) => React.ReactNode;
|
|
66
|
+
styles?: InputStyles;
|
|
67
|
+
}
|
|
68
|
+
declare function InputPrimitive(props: InputPrimitiveProps): react2.JSX.Element;
|
|
69
|
+
//#endregion
|
|
70
|
+
//#region src/primitives/button/button-label.d.ts
|
|
71
|
+
interface ButtonPrimitiveLabelProps {
|
|
72
|
+
children?: string;
|
|
73
|
+
render?: (props: this) => React$1.ReactElement;
|
|
74
|
+
style?: StyleProp<TextStyle>;
|
|
75
|
+
}
|
|
76
|
+
declare function ButtonLabel(props: ButtonPrimitiveLabelProps): React$1.JSX.Element;
|
|
77
|
+
//#endregion
|
|
78
|
+
//#region src/primitives/button/types.d.ts
|
|
79
|
+
type ButtonState = "default" | "disabled" | "loading";
|
|
80
|
+
interface ButtonStyles {
|
|
81
|
+
root?: Partial<Record<ButtonState, ButtonPrimitiveRootProps["style"]>>;
|
|
82
|
+
label?: Partial<Record<ButtonState, ButtonPrimitiveLabelProps["style"]>>;
|
|
83
|
+
spinner?: Partial<Record<ButtonState, ButtonPrimitiveLabelProps["style"]>>;
|
|
84
|
+
}
|
|
85
|
+
//#endregion
|
|
86
|
+
//#region src/primitives/button/button-root.d.ts
|
|
87
|
+
interface ButtonPrimitiveRootProps {
|
|
88
|
+
children?: React$1.ReactNode;
|
|
89
|
+
onPress?: () => void;
|
|
90
|
+
isDisabled?: boolean;
|
|
91
|
+
isLoading?: boolean;
|
|
92
|
+
style?: StyleProp<ViewStyle>;
|
|
93
|
+
styles?: ButtonStyles;
|
|
94
|
+
render?: (props: this) => React$1.ReactElement;
|
|
95
|
+
}
|
|
96
|
+
declare function ButtonRoot(props: ButtonPrimitiveRootProps): React$1.JSX.Element;
|
|
97
|
+
//#endregion
|
|
98
|
+
//#region src/primitives/button/button-spinner.d.ts
|
|
99
|
+
interface ButtonSpinnerProps {
|
|
100
|
+
style?: StyleProp<ViewStyle>;
|
|
101
|
+
}
|
|
102
|
+
declare function ButtonSpinner(props: ButtonSpinnerProps): React$1.JSX.Element;
|
|
103
|
+
//#endregion
|
|
104
|
+
//#region src/primitives/button/index.d.ts
|
|
105
|
+
declare const ButtonPrimitive: {
|
|
106
|
+
Root: typeof ButtonRoot;
|
|
107
|
+
Label: typeof ButtonLabel;
|
|
108
|
+
Spinner: typeof ButtonSpinner;
|
|
109
|
+
};
|
|
110
|
+
//#endregion
|
|
111
|
+
//#region src/primitives/select/select-trigger.d.ts
|
|
112
|
+
interface SelectTriggerInjectionProps {
|
|
113
|
+
onPress?: () => void;
|
|
114
|
+
}
|
|
115
|
+
interface SelectTriggerProps {
|
|
116
|
+
children?: React$1.ReactNode;
|
|
117
|
+
style?: StyleProp<ViewStyle>;
|
|
118
|
+
render?: (props: SelectTriggerInjectionProps) => React$1.ReactElement;
|
|
119
|
+
}
|
|
120
|
+
declare function SelectTrigger(props: SelectTriggerProps): React$1.JSX.Element;
|
|
121
|
+
//#endregion
|
|
122
|
+
//#region src/primitives/select/select-value.d.ts
|
|
123
|
+
interface SelectValueProps {
|
|
124
|
+
style?: StyleProp<TextStyle>;
|
|
125
|
+
render?: (props: SelectValueProps) => React$1.ReactElement;
|
|
126
|
+
}
|
|
127
|
+
declare function SelectValue(props: SelectValueProps): React$1.JSX.Element;
|
|
128
|
+
//#endregion
|
|
129
|
+
//#region src/primitives/select/select-overlay.d.ts
|
|
130
|
+
interface SelectOverlayProps {
|
|
131
|
+
children?: React$1.ReactNode;
|
|
132
|
+
onPress?: () => void;
|
|
133
|
+
style?: StyleProp<ViewStyle>;
|
|
134
|
+
render?: (props: SelectOverlayProps) => React$1.ReactElement;
|
|
135
|
+
}
|
|
136
|
+
declare function SelectOverlay(props: SelectOverlayProps): React$1.JSX.Element;
|
|
137
|
+
//#endregion
|
|
138
|
+
//#region src/primitives/select/select-content.d.ts
|
|
139
|
+
interface SelectContentProps {
|
|
140
|
+
children?: React$1.ReactNode;
|
|
141
|
+
render?: (props: SelectContentProps) => React$1.ReactElement;
|
|
142
|
+
style?: StyleProp<ViewStyle>;
|
|
143
|
+
}
|
|
144
|
+
declare function SelectContent(props: SelectContentProps): React$1.JSX.Element;
|
|
145
|
+
//#endregion
|
|
146
|
+
//#region src/primitives/select/select-option.d.ts
|
|
147
|
+
interface SelectOptionProps {
|
|
148
|
+
children: string;
|
|
149
|
+
value: string;
|
|
150
|
+
onMouseEnter?: () => void;
|
|
151
|
+
onMouseLeave?: () => void;
|
|
152
|
+
render?: (props: SelectOptionProps) => React.ReactElement;
|
|
153
|
+
style?: StyleProp<TextStyle>;
|
|
154
|
+
}
|
|
155
|
+
declare function SelectOption(props: SelectOptionProps): react2.JSX.Element;
|
|
156
|
+
//#endregion
|
|
157
|
+
//#region src/primitives/select/types.d.ts
|
|
158
|
+
type SelectState = "default" | "disabled";
|
|
159
|
+
type SelectOptionState = SelectState | "hovered" | "selected";
|
|
160
|
+
interface SelectStyles {
|
|
161
|
+
root?: Partial<Record<SelectState, SelectRootProps["style"]>>;
|
|
162
|
+
trigger?: Partial<Record<SelectState, SelectTriggerProps["style"]>>;
|
|
163
|
+
value?: Partial<Record<SelectState, SelectValueProps["style"]>>;
|
|
164
|
+
placeholder?: Partial<Record<SelectState, SelectValueProps["style"]>>;
|
|
165
|
+
overlay?: Partial<Record<SelectState, SelectOverlayProps["style"]>>;
|
|
166
|
+
content?: Partial<Record<SelectState, SelectContentProps["style"]>>;
|
|
167
|
+
option?: Partial<Record<SelectOptionState, SelectOptionProps["style"]>>;
|
|
168
|
+
}
|
|
169
|
+
//#endregion
|
|
170
|
+
//#region src/primitives/select/select-root.d.ts
|
|
171
|
+
interface SelectRootInjectedProps {
|
|
172
|
+
style?: StyleProp<ViewStyle>;
|
|
173
|
+
}
|
|
174
|
+
interface SelectRootBaseProps {
|
|
175
|
+
value?: string;
|
|
176
|
+
onChange?: (value: string) => void;
|
|
177
|
+
placeholder?: string;
|
|
178
|
+
isDisabled?: boolean;
|
|
179
|
+
}
|
|
180
|
+
interface SelectRootProps extends SelectRootBaseProps {
|
|
181
|
+
children?: React$1.ReactNode;
|
|
182
|
+
render?: (props: SelectRootInjectedProps) => React$1.ReactElement;
|
|
183
|
+
styles?: SelectStyles;
|
|
184
|
+
style?: StyleProp<ViewStyle>;
|
|
185
|
+
}
|
|
186
|
+
declare function SelectRoot(props: SelectRootProps): React$1.JSX.Element;
|
|
187
|
+
//#endregion
|
|
188
|
+
//#region src/primitives/select/select-portal.d.ts
|
|
189
|
+
interface SelectPortalProps {
|
|
190
|
+
children?: React$1.ReactNode;
|
|
191
|
+
}
|
|
192
|
+
declare function SelectPortal(props: SelectPortalProps): React$1.JSX.Element | null;
|
|
193
|
+
//#endregion
|
|
194
|
+
//#region src/primitives/select/index.d.ts
|
|
195
|
+
declare const SelectPrimitive: {
|
|
196
|
+
Root: typeof SelectRoot;
|
|
197
|
+
Trigger: typeof SelectTrigger;
|
|
198
|
+
Value: typeof SelectValue;
|
|
199
|
+
Portal: typeof SelectPortal;
|
|
200
|
+
Overlay: typeof SelectOverlay;
|
|
201
|
+
Content: typeof SelectContent;
|
|
202
|
+
Option: typeof SelectOption;
|
|
203
|
+
};
|
|
204
|
+
//#endregion
|
|
205
|
+
//#region src/primitives/card/card-header.d.ts
|
|
206
|
+
interface CardHeaderProps {
|
|
207
|
+
children?: React$1.ReactNode;
|
|
208
|
+
render?: (props: CardHeaderProps) => React$1.ReactNode;
|
|
209
|
+
style?: StyleProp<ViewStyle>;
|
|
210
|
+
}
|
|
211
|
+
declare function CardHeader(props: CardHeaderProps): React$1.JSX.Element;
|
|
212
|
+
//#endregion
|
|
213
|
+
//#region src/primitives/card/card-title.d.ts
|
|
214
|
+
interface CardTitleProps {
|
|
215
|
+
children?: string;
|
|
216
|
+
render?: (props: CardTitleProps) => React$1.ReactNode;
|
|
217
|
+
style?: StyleProp<TextStyle>;
|
|
218
|
+
}
|
|
219
|
+
declare function CardTitle(props: CardTitleProps): React$1.JSX.Element;
|
|
220
|
+
//#endregion
|
|
221
|
+
//#region src/primitives/card/card-body.d.ts
|
|
222
|
+
interface CardBodyProps {
|
|
223
|
+
children?: React$1.ReactNode;
|
|
224
|
+
render?: (props: CardBodyProps) => React$1.ReactNode;
|
|
225
|
+
style?: StyleProp<ViewStyle>;
|
|
226
|
+
}
|
|
227
|
+
declare function CardBody(props: CardBodyProps): React$1.JSX.Element;
|
|
228
|
+
//#endregion
|
|
229
|
+
//#region src/primitives/card/card-footer.d.ts
|
|
230
|
+
interface CardFooterProps {
|
|
231
|
+
children?: React$1.ReactNode;
|
|
232
|
+
render?: (props: CardFooterProps) => React$1.ReactNode;
|
|
233
|
+
style?: StyleProp<ViewStyle>;
|
|
234
|
+
}
|
|
235
|
+
declare function CardFooter(props: CardFooterProps): React$1.JSX.Element;
|
|
236
|
+
//#endregion
|
|
237
|
+
//#region src/primitives/card/types.d.ts
|
|
238
|
+
type CardState = "default";
|
|
239
|
+
interface CardStyles {
|
|
240
|
+
root?: Partial<Record<CardState, CardRootProps["style"]>>;
|
|
241
|
+
header?: Partial<Record<CardState, CardHeaderProps["style"]>>;
|
|
242
|
+
title?: Partial<Record<CardState, CardTitleProps["style"]>>;
|
|
243
|
+
body?: Partial<Record<CardState, CardBodyProps["style"]>>;
|
|
244
|
+
footer?: Partial<Record<CardState, CardFooterProps["style"]>>;
|
|
245
|
+
}
|
|
246
|
+
//#endregion
|
|
247
|
+
//#region src/primitives/card/card-root.d.ts
|
|
248
|
+
interface CardRootProps {
|
|
249
|
+
children?: React$1.ReactNode;
|
|
250
|
+
render?: (props: CardRootProps) => React$1.ReactNode;
|
|
251
|
+
style?: StyleProp<ViewStyle>;
|
|
252
|
+
styles?: CardStyles;
|
|
253
|
+
}
|
|
254
|
+
declare function CardRoot(props: CardRootProps): React$1.JSX.Element;
|
|
255
|
+
//#endregion
|
|
256
|
+
//#region src/primitives/card/index.d.ts
|
|
257
|
+
declare const CardPrimitive: {
|
|
258
|
+
Root: typeof CardRoot;
|
|
259
|
+
Header: typeof CardHeader;
|
|
260
|
+
Title: typeof CardTitle;
|
|
261
|
+
Body: typeof CardBody;
|
|
262
|
+
Footer: typeof CardFooter;
|
|
263
|
+
};
|
|
264
|
+
//#endregion
|
|
265
|
+
export { FieldErrorProps as A, InputPrimitive as C, FieldPrimitive as D, InputStyles as E, FieldLabelProps as M, FieldPrimitiveRootProps as O, ButtonPrimitiveLabelProps as S, InputPrimitiveProps as T, SelectTriggerProps as _, CardBodyProps as a, ButtonState as b, SelectPrimitive as c, SelectRootProps as d, SelectStyles as f, SelectValueProps as g, SelectOverlayProps as h, CardFooterProps as i, FieldDescriptionProps as j, FieldStyles as k, SelectPortalProps as l, SelectContentProps as m, CardRootProps as n, CardTitleProps as o, SelectOptionProps as p, CardStyles as r, CardHeaderProps as s, CardPrimitive as t, SelectRootBaseProps as u, ButtonPrimitive as v, InputPrimitiveBaseProps as w, ButtonStyles as x, ButtonPrimitiveRootProps as y };
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as react0 from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/themes/types.d.ts
|
|
4
|
+
type ThemeName = "default";
|
|
5
|
+
type ColorScheme = "light" | "dark";
|
|
6
|
+
type Color = `hsla(${number}, ${number}%, ${number}%, ${number})`;
|
|
7
|
+
interface Colors {
|
|
8
|
+
background: Color;
|
|
9
|
+
foreground: Color;
|
|
10
|
+
primary: Color;
|
|
11
|
+
primaryForeground: Color;
|
|
12
|
+
secondary: Color;
|
|
13
|
+
secondaryForeground: Color;
|
|
14
|
+
muted: Color;
|
|
15
|
+
mutedForeground: Color;
|
|
16
|
+
border: Color;
|
|
17
|
+
surface: Color;
|
|
18
|
+
success: Color;
|
|
19
|
+
warning: Color;
|
|
20
|
+
danger: Color;
|
|
21
|
+
info: Color;
|
|
22
|
+
}
|
|
23
|
+
type Radius = number;
|
|
24
|
+
//#endregion
|
|
25
|
+
//#region src/themes/provider.d.ts
|
|
26
|
+
interface ThemeContext {
|
|
27
|
+
colors: Colors;
|
|
28
|
+
radius: Radius;
|
|
29
|
+
fontFamily: string;
|
|
30
|
+
colorScheme: ColorScheme;
|
|
31
|
+
setColorScheme: (scheme: ColorScheme) => void;
|
|
32
|
+
setTheme: (themeName: ThemeName) => void;
|
|
33
|
+
themeName: ThemeName;
|
|
34
|
+
}
|
|
35
|
+
declare const ThemeContext: react0.Context<ThemeContext | null>;
|
|
36
|
+
declare const useTheme: () => ThemeContext;
|
|
37
|
+
//#endregion
|
|
38
|
+
//#region src/index.d.ts
|
|
39
|
+
declare const UniversalUIProvider: ({
|
|
40
|
+
children
|
|
41
|
+
}: {
|
|
42
|
+
children: React.ReactNode;
|
|
43
|
+
}) => react0.JSX.Element;
|
|
44
|
+
//#endregion
|
|
45
|
+
export { UniversalUIProvider, useTheme };
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { n as useTheme, t as ThemeProvider } from "./themes-BrLbh9h6.mjs";
|
|
2
|
+
import { n as PortalHost } from "./portal-DoPaAohb.mjs";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
|
|
5
|
+
//#region src/index.tsx
|
|
6
|
+
const UniversalUIProvider = ({ children }) => {
|
|
7
|
+
return /* @__PURE__ */ jsxs(ThemeProvider, { children: [children, /* @__PURE__ */ jsx(PortalHost, {})] });
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
//#endregion
|
|
11
|
+
export { UniversalUIProvider, useTheme };
|