@g4rcez/components 0.0.68 → 0.0.69
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/index.css +1 -1
- package/dist/index.js +50 -53
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +17442 -14771
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +50 -53
- package/dist/index.umd.js.map +1 -1
- package/dist/preset/src/styles/dark.d.ts.map +1 -1
- package/dist/preset/src/styles/dark.js +3 -1
- package/dist/preset/src/styles/design-tokens.d.ts +9 -0
- package/dist/preset/src/styles/design-tokens.d.ts.map +1 -1
- package/dist/preset/src/styles/design-tokens.js +27 -9
- package/dist/preset/src/styles/light.d.ts.map +1 -1
- package/dist/preset/src/styles/light.js +3 -1
- package/dist/preset/src/styles/theme.types.d.ts +44 -70
- package/dist/preset/src/styles/theme.types.d.ts.map +1 -1
- package/dist/src/components/core/resizable.js +1 -1
- package/dist/src/components/display/alert.d.ts +1 -1
- package/dist/src/components/display/alert.d.ts.map +1 -1
- package/dist/src/components/display/alert.js +1 -1
- package/dist/src/components/display/calendar.js +1 -1
- package/dist/src/components/display/list.d.ts.map +1 -1
- package/dist/src/components/display/list.js +2 -1
- package/dist/src/components/display/notifications.js +1 -1
- package/dist/src/components/display/step.js +1 -1
- package/dist/src/components/display/tabs.js +1 -1
- package/dist/src/components/floating/expand.d.ts +1 -1
- package/dist/src/components/floating/expand.d.ts.map +1 -1
- package/dist/src/components/floating/expand.js +1 -1
- package/dist/src/components/floating/modal.js +1 -1
- package/dist/src/components/floating/toolbar.js +1 -1
- package/dist/src/components/form/autocomplete.d.ts.map +1 -1
- package/dist/src/components/form/autocomplete.js +17 -11
- package/dist/src/components/form/select.d.ts.map +1 -1
- package/dist/src/components/form/select.js +8 -4
- package/dist/src/components/form/switch.d.ts.map +1 -1
- package/dist/src/components/form/switch.js +1 -1
- package/dist/src/components/form/task-list.d.ts.map +1 -1
- package/dist/src/components/form/task-list.js +2 -1
- package/dist/src/components/form/virtual-autocomplete.d.ts +5 -5
- package/dist/src/components/form/virtual-autocomplete.d.ts.map +1 -1
- package/dist/src/components/form/virtual-autocomplete.js +147 -158
- package/dist/src/components/table/group.js +1 -1
- package/dist/src/components/table/index.js +1 -1
- package/dist/src/components/table/thead.d.ts.map +1 -1
- package/dist/src/components/table/thead.js +2 -1
- package/dist/src/hooks/use-form.d.ts +309 -18
- package/dist/src/hooks/use-form.d.ts.map +1 -1
- package/dist/src/hooks/use-form.js +327 -90
- package/dist/src/index.d.ts +6 -5
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/index.js +5 -4
- package/dist/src/styles/dark.d.ts.map +1 -1
- package/dist/src/styles/dark.js +3 -1
- package/dist/src/styles/design-tokens.d.ts +9 -0
- package/dist/src/styles/design-tokens.d.ts.map +1 -1
- package/dist/src/styles/design-tokens.js +22 -13
- package/dist/src/styles/light.d.ts.map +1 -1
- package/dist/src/styles/light.js +3 -1
- package/dist/src/styles/theme.types.d.ts +44 -70
- package/dist/src/styles/theme.types.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dark.d.ts","sourceRoot":"","sources":["../../../../src/styles/dark.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"dark.d.ts","sourceRoot":"","sources":["../../../../src/styles/dark.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,UAAU,EAAE,YAwLxB,CAAC"}
|
|
@@ -69,6 +69,7 @@ export var DARK_THEME = {
|
|
|
69
69
|
border: "hsla(240, 7%, 27%)",
|
|
70
70
|
},
|
|
71
71
|
floating: {
|
|
72
|
+
foreground: "hsla(210, 40%, 98%)",
|
|
72
73
|
background: "hsla(0, 0%, 14%)",
|
|
73
74
|
border: "hsla(240, 7%, 27%)",
|
|
74
75
|
overlay: "hsla(0, 0%, 0%)",
|
|
@@ -77,11 +78,12 @@ export var DARK_THEME = {
|
|
|
77
78
|
foreground: "hsla(210, 40%, 98%)",
|
|
78
79
|
background: "hsla(0, 0%, 8%)",
|
|
79
80
|
border: "hsla(0, 0%, 19%)",
|
|
81
|
+
overlay: "hsla(0, 0%, 0%)",
|
|
80
82
|
},
|
|
81
83
|
table: {
|
|
82
84
|
header: "hsla(0, 0%, 12%)",
|
|
83
|
-
background: "hsla(0, 0%, 15%)",
|
|
84
85
|
border: "hsla(240, 4%, 33%)",
|
|
86
|
+
background: "hsla(0, 0%, 15%)",
|
|
85
87
|
},
|
|
86
88
|
button: {
|
|
87
89
|
primary: {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { CSSProperties } from "react";
|
|
1
2
|
import { DesignTokens, DesignTokensBuilder, DesignTokensParser, GeneralTokens, Token } from "./theme.types";
|
|
2
3
|
export declare const parsers: {
|
|
3
4
|
cssVariable: (_: string, __: string, k: string) => `var(--${string})`;
|
|
@@ -15,5 +16,13 @@ export declare const createStyles: {
|
|
|
15
16
|
default: (tokens: Token[]) => string;
|
|
16
17
|
dark: (tokens: Token[]) => string;
|
|
17
18
|
};
|
|
19
|
+
type TokenParsersType = "colors" | "spacing" | "rounded" | "customTokens";
|
|
20
|
+
type TokenCustomParser = (token: Token) => Token;
|
|
21
|
+
export type TokenRemap = Partial<Record<TokenParsersType, TokenCustomParser> & {
|
|
22
|
+
name: string;
|
|
23
|
+
}>;
|
|
18
24
|
export declare const createTheme: (theme: DesignTokens, name?: string) => string;
|
|
25
|
+
export declare const createCssProperties: (theme: DesignTokens, map?: TokenRemap) => CSSProperties;
|
|
26
|
+
export declare const createTokenStyles: (theme: DesignTokens, map?: TokenRemap) => string;
|
|
27
|
+
export {};
|
|
19
28
|
//# sourceMappingURL=design-tokens.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/design-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE5G,eAAO,MAAM,OAAO;;cAEN,MAAM;aACP,MAAM;aACN,MAAM;cACL,MAAM;aACP,MAAM;aACN,MAAM;4BACS,MAAM,SAAS,MAAM,MAAM,MAAM,KAAK,MAAM;CAC1B,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,aAAa,UAAU,CAAC,SAAS,mBAAmB,WAAU,MAAM,WAAe,MAAM,KAAQ,KAAK,EAQnI,CAAC;AAEX,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,aAAa,EAAE,EAAE,SAAS,kBAAkB,UAC7E,CAAC,SACF,EAAE,WACD,MAAM,WACN,MAAM,KACf,CAWY,CAAC;AAmBhB,eAAO,MAAM,YAAY;sBACH,KAAK,EAAE;mBACV,KAAK,EAAE;CACzB,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,YAAY,SAAS,MAAM,
|
|
1
|
+
{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/design-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE5G,eAAO,MAAM,OAAO;;cAEN,MAAM;aACP,MAAM;aACN,MAAM;cACL,MAAM;aACP,MAAM;aACN,MAAM;4BACS,MAAM,SAAS,MAAM,MAAM,MAAM,KAAK,MAAM;CAC1B,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,aAAa,UAAU,CAAC,SAAS,mBAAmB,WAAU,MAAM,WAAe,MAAM,KAAQ,KAAK,EAQnI,CAAC;AAEX,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,aAAa,EAAE,EAAE,SAAS,kBAAkB,UAC7E,CAAC,SACF,EAAE,WACD,MAAM,WACN,MAAM,KACf,CAWY,CAAC;AAmBhB,eAAO,MAAM,YAAY;sBACH,KAAK,EAAE;mBACV,KAAK,EAAE;CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,CAAC;AAE1E,KAAK,iBAAiB,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAgBjG,eAAO,MAAM,WAAW,UAAW,YAAY,SAAS,MAAM,WAIxD,CAAC;AAEP,eAAO,MAAM,mBAAmB,UAAW,YAAY,QAAQ,UAAU,KAAG,aAG3E,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,YAAY,QAAQ,UAAU,WAIjE,CAAC"}
|
|
@@ -59,17 +59,35 @@ export var createStyles = {
|
|
|
59
59
|
default: function (tokens) { return createStyleContent(tokens, { result: modifiers.default }); },
|
|
60
60
|
dark: function (tokens) { return createStyleContent(tokens, { result: modifiers.dark }); },
|
|
61
61
|
};
|
|
62
|
+
var createTokens = function (theme, map) {
|
|
63
|
+
var fn = function (p) {
|
|
64
|
+
return function (value, _, key) {
|
|
65
|
+
var r = { key: "--".concat(key), value: "".concat(value) };
|
|
66
|
+
return p ? p(r) : r;
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
var colors = reduceTokens(theme.colors, fn(map === null || map === void 0 ? void 0 : map.colors));
|
|
70
|
+
var spacing = reduceTokens(theme.spacing, fn(map === null || map === void 0 ? void 0 : map.spacing));
|
|
71
|
+
var rounded = reduceTokens(theme.rounded, fn(map === null || map === void 0 ? void 0 : map.rounded));
|
|
72
|
+
var customTokens = theme.custom ? reduceTokens(theme.custom, fn(map === null || map === void 0 ? void 0 : map.customTokens)) : [];
|
|
73
|
+
return colors.concat(spacing, rounded, customTokens);
|
|
74
|
+
};
|
|
62
75
|
export var createTheme = function (theme, name) {
|
|
63
|
-
|
|
64
|
-
key: "--".concat(key),
|
|
65
|
-
value: "".concat(value),
|
|
66
|
-
}); };
|
|
67
|
-
var colors = reduceTokens(theme.colors, fn);
|
|
68
|
-
var spacing = reduceTokens(theme.spacing, fn);
|
|
69
|
-
var rounded = reduceTokens(theme.rounded, fn);
|
|
70
|
-
var customTokens = theme.custom ? reduceTokens(theme.custom, fn) : [];
|
|
71
|
-
return createStyleContent(colors.concat(spacing, rounded, customTokens), {
|
|
76
|
+
return createStyleContent(createTokens(theme), {
|
|
72
77
|
result: function (variables) { return "html".concat(name ? ".".concat(name) : "", " {").concat(variables, "}"); },
|
|
73
78
|
value: function (_, v) { return v.replace("hsla(", "").replace(")", ""); },
|
|
74
79
|
});
|
|
75
80
|
};
|
|
81
|
+
export var createCssProperties = function (theme, map) {
|
|
82
|
+
var tokens = createTokens(theme, map);
|
|
83
|
+
return tokens.reduce(function (acc, el) {
|
|
84
|
+
var _a;
|
|
85
|
+
return (__assign(__assign({}, acc), (_a = {}, _a[el.key] = el.value, _a)));
|
|
86
|
+
}, {});
|
|
87
|
+
};
|
|
88
|
+
export var createTokenStyles = function (theme, map) {
|
|
89
|
+
return createStyleContent(createTokens(theme, map), {
|
|
90
|
+
result: function (variables) { return "html".concat((map === null || map === void 0 ? void 0 : map.name) ? ".".concat(map.name) : "", " {").concat(variables, "}"); },
|
|
91
|
+
value: function (_, v) { return v; },
|
|
92
|
+
});
|
|
93
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../../src/styles/light.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../../src/styles/light.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YAwLzB,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { rounded, spacing } from "./common";
|
|
2
2
|
export var LIGHT_THEME = {
|
|
3
|
-
name: "light",
|
|
4
3
|
rounded: rounded,
|
|
5
4
|
spacing: spacing,
|
|
5
|
+
name: "light",
|
|
6
6
|
shadow: {
|
|
7
7
|
floating: "rgba(50, 50, 50, 0.1) 0px 0px 0px 1px, rgba(50, 50, 50, 0.1) 0px 3px 6px, rgba(50, 50, 50, 0.1) 0px 2px 3px",
|
|
8
8
|
},
|
|
@@ -69,6 +69,7 @@ export var LIGHT_THEME = {
|
|
|
69
69
|
border: "hsla(210, 25%, 88%)",
|
|
70
70
|
},
|
|
71
71
|
floating: {
|
|
72
|
+
foreground: "hsla(217, 15%, 20%)",
|
|
72
73
|
background: "hsla(0, 0%, 100%)",
|
|
73
74
|
border: "hsla(210, 25%, 88%)",
|
|
74
75
|
overlay: "hsla(0, 0%, 0%)",
|
|
@@ -77,6 +78,7 @@ export var LIGHT_THEME = {
|
|
|
77
78
|
foreground: "hsla(217, 15%, 20%)",
|
|
78
79
|
background: "hsla(210, 25%, 98%)",
|
|
79
80
|
border: "hsla(200, 1%, 80%)",
|
|
81
|
+
overlay: "hsla(0, 0%, 0%)",
|
|
80
82
|
},
|
|
81
83
|
table: {
|
|
82
84
|
header: "hsla(221, 10%, 90%)",
|
|
@@ -1,7 +1,19 @@
|
|
|
1
1
|
export type GeneralTokens = {
|
|
2
2
|
[K in string]: string | GeneralTokens;
|
|
3
3
|
};
|
|
4
|
-
type ThemeState = "primary" | "warn" | "secondary" | "info" | "danger" | "success" | "neutral";
|
|
4
|
+
export type ThemeState = "primary" | "warn" | "secondary" | "info" | "danger" | "success" | "neutral";
|
|
5
|
+
type BasicTokens = {
|
|
6
|
+
hover: string;
|
|
7
|
+
subtle: string;
|
|
8
|
+
DEFAULT: string;
|
|
9
|
+
foreground: string;
|
|
10
|
+
};
|
|
11
|
+
type ComponentToken = {
|
|
12
|
+
border: string;
|
|
13
|
+
overlay: string;
|
|
14
|
+
background: string;
|
|
15
|
+
foreground: string;
|
|
16
|
+
};
|
|
5
17
|
export type DesignTokens = {
|
|
6
18
|
name: string;
|
|
7
19
|
shadow: Record<"floating", string>;
|
|
@@ -9,6 +21,32 @@ export type DesignTokens = {
|
|
|
9
21
|
spacing: Record<"base" | "lg" | "sm", string>;
|
|
10
22
|
custom?: Record<string, string>;
|
|
11
23
|
colors: {
|
|
24
|
+
disabled: string;
|
|
25
|
+
background: string;
|
|
26
|
+
foreground: string;
|
|
27
|
+
primary: BasicTokens;
|
|
28
|
+
emphasis: BasicTokens;
|
|
29
|
+
tooltip: ComponentToken;
|
|
30
|
+
floating: ComponentToken;
|
|
31
|
+
info: BasicTokens & {
|
|
32
|
+
notification: string;
|
|
33
|
+
};
|
|
34
|
+
warn: BasicTokens & {
|
|
35
|
+
notification: string;
|
|
36
|
+
};
|
|
37
|
+
card: {
|
|
38
|
+
background: string;
|
|
39
|
+
border: string;
|
|
40
|
+
};
|
|
41
|
+
danger: BasicTokens & {
|
|
42
|
+
notification: string;
|
|
43
|
+
};
|
|
44
|
+
secondary: BasicTokens & {
|
|
45
|
+
background: string;
|
|
46
|
+
};
|
|
47
|
+
success: BasicTokens & {
|
|
48
|
+
notification: string;
|
|
49
|
+
};
|
|
12
50
|
tag: Record<ThemeState, {
|
|
13
51
|
text: string;
|
|
14
52
|
bg: string;
|
|
@@ -17,61 +55,16 @@ export type DesignTokens = {
|
|
|
17
55
|
text: string;
|
|
18
56
|
bg: string;
|
|
19
57
|
}>;
|
|
58
|
+
table: {
|
|
59
|
+
border: string;
|
|
60
|
+
header: string;
|
|
61
|
+
background: string;
|
|
62
|
+
};
|
|
20
63
|
alert: Record<ThemeState, {
|
|
21
64
|
text: string;
|
|
22
65
|
bg: string;
|
|
23
66
|
border: string;
|
|
24
67
|
}>;
|
|
25
|
-
foreground: string;
|
|
26
|
-
background: string;
|
|
27
|
-
disabled: string;
|
|
28
|
-
emphasis: {
|
|
29
|
-
foreground: string;
|
|
30
|
-
DEFAULT: string;
|
|
31
|
-
subtle: string;
|
|
32
|
-
hover: string;
|
|
33
|
-
};
|
|
34
|
-
primary: {
|
|
35
|
-
foreground: string;
|
|
36
|
-
DEFAULT: string;
|
|
37
|
-
subtle: string;
|
|
38
|
-
hover: string;
|
|
39
|
-
};
|
|
40
|
-
warn: {
|
|
41
|
-
DEFAULT: string;
|
|
42
|
-
subtle: string;
|
|
43
|
-
hover: string;
|
|
44
|
-
foreground: string;
|
|
45
|
-
notification: string;
|
|
46
|
-
};
|
|
47
|
-
secondary: {
|
|
48
|
-
DEFAULT: string;
|
|
49
|
-
background: string;
|
|
50
|
-
subtle: string;
|
|
51
|
-
hover: string;
|
|
52
|
-
foreground: string;
|
|
53
|
-
};
|
|
54
|
-
info: {
|
|
55
|
-
DEFAULT: string;
|
|
56
|
-
subtle: string;
|
|
57
|
-
hover: string;
|
|
58
|
-
foreground: string;
|
|
59
|
-
notification: string;
|
|
60
|
-
};
|
|
61
|
-
danger: {
|
|
62
|
-
DEFAULT: string;
|
|
63
|
-
subtle: string;
|
|
64
|
-
hover: string;
|
|
65
|
-
foreground: string;
|
|
66
|
-
notification: string;
|
|
67
|
-
};
|
|
68
|
-
success: {
|
|
69
|
-
DEFAULT: string;
|
|
70
|
-
subtle: string;
|
|
71
|
-
hover: string;
|
|
72
|
-
foreground: string;
|
|
73
|
-
notification: string;
|
|
74
|
-
};
|
|
75
68
|
input: {
|
|
76
69
|
border: string;
|
|
77
70
|
placeholder: string;
|
|
@@ -79,25 +72,6 @@ export type DesignTokens = {
|
|
|
79
72
|
"switch-bg": string;
|
|
80
73
|
switch: string;
|
|
81
74
|
};
|
|
82
|
-
card: {
|
|
83
|
-
background: string;
|
|
84
|
-
border: string;
|
|
85
|
-
};
|
|
86
|
-
floating: {
|
|
87
|
-
background: string;
|
|
88
|
-
border: string;
|
|
89
|
-
overlay: string;
|
|
90
|
-
};
|
|
91
|
-
tooltip: {
|
|
92
|
-
foreground: string;
|
|
93
|
-
background: string;
|
|
94
|
-
border: string;
|
|
95
|
-
};
|
|
96
|
-
table: {
|
|
97
|
-
border: string;
|
|
98
|
-
header: string;
|
|
99
|
-
background: string;
|
|
100
|
-
};
|
|
101
75
|
};
|
|
102
76
|
};
|
|
103
77
|
export type Token = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;KAAG,CAAC,IAAI,MAAM,GAAG,MAAM,GAAG,aAAa;CAAE,CAAC;AAEtE,
|
|
1
|
+
{"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { motion, useMotionValue } from "
|
|
3
|
+
import { motion, useMotionValue } from "motion/react";
|
|
4
4
|
import { useEffect, useMemo, useState } from "react";
|
|
5
5
|
import { isSsr } from "../../lib/fns";
|
|
6
6
|
const defaultState = {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type VariantProps } from "class-variance-authority";
|
|
2
|
-
import { HTMLMotionProps } from "
|
|
2
|
+
import { HTMLMotionProps } from "motion/react";
|
|
3
3
|
import React, { PropsWithChildren } from "react";
|
|
4
4
|
import { PolymorphicProps } from "../core/polymorph";
|
|
5
5
|
type CollapseProps = HTMLMotionProps<"section"> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/components/display/alert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAU,MAAM,
|
|
1
|
+
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/components/display/alert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAU,MAAM,cAAc,CAAC;AAEvD,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CAiB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;mFAajB,CAAC;AAEH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,GAC9B,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GA2CxE,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
|
-
import { motion } from "
|
|
4
|
+
import { motion } from "motion/react";
|
|
5
5
|
import { CheckCircleIcon, InfoIcon, TriangleAlertIcon, XIcon } from "lucide-react";
|
|
6
6
|
import { forwardRef } from "react";
|
|
7
7
|
import { css } from "../../lib/dom";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { addDays, addMonths, addWeeks, addYears, eachDayOfInterval, endOfWeek, isAfter, isBefore, isSameMonth, isToday, startOfDay, startOfMonth, startOfWeek, subDays, subMonths, subWeeks, subYears, } from "date-fns";
|
|
4
|
-
import { AnimatePresence, motion, MotionConfig } from "
|
|
4
|
+
import { AnimatePresence, motion, MotionConfig } from "motion/react";
|
|
5
5
|
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
|
|
6
6
|
import { useEffect, useRef } from "react";
|
|
7
7
|
import { Is } from "sidekicker";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/components/display/list.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/components/display/list.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,iBAAiB,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,KAAK,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;CAC5C,CAAC;AAIF,KAAK,iBAAiB,GAAG,EAAE,CAAC;AA2D5B,eAAO,MAAM,YAAY,UAAW,iBAAiB,CAAC,iBAAiB,CAAC,4CAoEvE,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,iBAAiB,CAAC,iBAAiB,CAAC,4CAA0C,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
|
|
3
|
-
import { AnimatePresence, motion, MotionConfig } from "
|
|
4
|
+
import { AnimatePresence, motion, MotionConfig } from "motion/react";
|
|
4
5
|
import { XIcon } from "lucide-react";
|
|
5
6
|
import React, { Fragment, useCallback, useId, useState } from "react";
|
|
6
7
|
const FloatItem = ({ item, context, setter, get, refs }) => (_jsx(FloatingPortal, { children: _jsx(MotionConfig, { reducedMotion: "user", transition: { type: "tween", stiffness: 25, duration: 0.2 }, children: _jsxs(AnimatePresence, { presenceAffectsLayout: true, children: [_jsx(AnimatePresence, { children: item ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "pointer-events-none fixed inset-0 top-0 z-floating h-screen w-screen bg-floating-overlay/70" })) : null }), _jsx(AnimatePresence, { children: item ? (_jsx(FloatingOverlay, { lockScroll: true, className: "absolute inset-0 z-tooltip flex items-center justify-center", children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { layout: true, layoutId: `item-${item.id}`, className: "relative flex h-min w-min min-w-xs flex-col gap-4 rounded-card border border-card-border bg-card-background p-6 py-4 pb-8 shadow", ref: refs.setFloating, ...get(), children: [_jsx("nav", { className: "absolute right-4 top-1 lg:right-2", children: _jsx("button", { type: "button", onClick: setter, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) }), _jsxs("header", { className: "flex w-full flex-wrap items-center justify-between gap-2", children: [_jsx("h3", { className: "min-w-full text-balance text-2xl font-medium", children: item.title }), _jsx("p", { className: "text-sm leading-snug text-secondary", children: item.description })] }), item.children] }) }) })) : null })] }) }) }));
|
|
@@ -3,7 +3,7 @@ import { createElement as _createElement } from "react";
|
|
|
3
3
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
4
|
import * as RadixToast from "@radix-ui/react-toast";
|
|
5
5
|
import { cva } from "class-variance-authority";
|
|
6
|
-
import { AnimatePresence, motion } from "
|
|
6
|
+
import { AnimatePresence, motion } from "motion/react";
|
|
7
7
|
import { XIcon } from "lucide-react";
|
|
8
8
|
import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
|
|
9
9
|
import { useHover } from "../../hooks/use-hover";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { motion, stagger, useAnimate } from "
|
|
3
|
+
import { motion, stagger, useAnimate } from "motion/react";
|
|
4
4
|
import { useEffect } from "react";
|
|
5
5
|
import { useColorParser } from "../../hooks/use-components-provider";
|
|
6
6
|
const iconTransitions = {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useMotionValue } from "
|
|
3
|
+
import { useMotionValue } from "motion/react";
|
|
4
4
|
import React, { createContext, Fragment, useContext, useEffect, useLayoutEffect, useRef } from "react";
|
|
5
5
|
import { useReactive } from "../../hooks/use-reactive";
|
|
6
6
|
import { useStableRef } from "../../hooks/use-stable-ref";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/expand.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/expand.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,MAAM,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAA2B,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAU,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC,OAAO,MAAM,CAAC,MAAM,CAAC,EAAE;IAAE,OAAO,EAAE,KAAK,CAAA;CAAE,CAAC,CAAC;AAE1F,eAAO,MAAM,MAAM,UAAW,iBAAiB,CAAC,WAAW,CAAC,4CA4C3D,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { FloatingFocusManager, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
|
|
4
|
-
import { AnimatePresence, motion } from "
|
|
4
|
+
import { AnimatePresence, motion } from "motion/react";
|
|
5
5
|
import { useId, useRef, useState } from "react";
|
|
6
6
|
import { Button } from "../core/button";
|
|
7
7
|
export const Expand = (props) => {
|
|
@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
|
|
4
4
|
import { Slot } from "@radix-ui/react-slot";
|
|
5
5
|
import { cva } from "class-variance-authority";
|
|
6
|
-
import { AnimatePresence, motion, useMotionValue } from "
|
|
6
|
+
import { AnimatePresence, motion, useMotionValue } from "motion/react";
|
|
7
7
|
import { XIcon } from "lucide-react";
|
|
8
8
|
import { Fragment, useId } from "react";
|
|
9
9
|
import { useMediaQuery } from "../../hooks/use-media-query";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { motion } from "
|
|
3
|
+
import { motion } from "motion/react";
|
|
4
4
|
export const Toolbar = (props) => (_jsx(motion.div, { className: "sticky bottom-4 flex items-center justify-center rounded-lg border border-card-border bg-background p-4", children: props.children }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAoF,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAKzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,MAAM,EAAE,qBAAqB,CAAC;CACjC,CAAC;AAIF,eAAO,MAAM,MAAM,4GAiCjB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAaF,eAAO,MAAM,YAAY,yGAkSxB,CAAC"}
|
|
@@ -4,6 +4,7 @@ import { autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDism
|
|
|
4
4
|
import Fuzzy from "fuzzy-search";
|
|
5
5
|
import { CheckIcon, ChevronDown } from "lucide-react";
|
|
6
6
|
import { forwardRef, Fragment, useEffect, useRef, useState } from "react";
|
|
7
|
+
import { AnimatePresence, motion } from "motion/react";
|
|
7
8
|
import { useTranslations } from "../../hooks/use-components-provider";
|
|
8
9
|
import { css, dispatchInput, initializeInputDataset } from "../../lib/dom";
|
|
9
10
|
import { safeRegex } from "../../lib/fns";
|
|
@@ -15,7 +16,7 @@ export const Option = forwardRef(({ selected, active, onClick, option, ...props
|
|
|
15
16
|
if (option.hidden) {
|
|
16
17
|
return null;
|
|
17
18
|
}
|
|
18
|
-
return (_jsx(
|
|
19
|
+
return (_jsx(motion.li, { ...props, ref: ref, role: "option", "aria-selected": active, className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsxs("button", { type: "button", "aria-busy": option.disabled, "aria-checked": active, "aria-current": active, "aria-selected": active, onClick: onClick, "data-value": option.value, className: `flex w-full cursor-pointer justify-between p-2 text-left ${active ? "bg-primary-hover text-primary-foreground" : ""} ${selected ? "bg-primary text-primary-foreground" : ""}`, children: [_jsx(Label, { ...props, label: option.label, value: option.value, children: children }), active ? (_jsx("span", { children: _jsx(CheckIcon, { "aria-hidden": true, className: "text-current", absoluteStrokeWidth: true, strokeWidth: 2, size: 22 }) })) : null] }) }));
|
|
19
20
|
});
|
|
20
21
|
const transitionStyles = {
|
|
21
22
|
duration: 300,
|
|
@@ -138,7 +139,12 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
|
|
|
138
139
|
setOpen(false);
|
|
139
140
|
};
|
|
140
141
|
const id = props.id || props.name;
|
|
141
|
-
|
|
142
|
+
const onCaretDownClick = () => {
|
|
143
|
+
setOpen(true);
|
|
144
|
+
setShadow("");
|
|
145
|
+
refs.reference.current?.focus();
|
|
146
|
+
};
|
|
147
|
+
return (_jsxs(InputField, { ...props, left: left, error: error, ref: fieldset, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, rightLabel: rightLabel, interactive: interactive, id: props.name || props.id, optionalText: optionalText, componentName: "autocomplete", labelClassName: labelClassName, placeholder: props.placeholder, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", className: "transition-colors link:text-primary", onClick: onCaretDownClick, children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "transition-colors link:text-danger", children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) }) })) : null] }), children: [_jsx("input", { "data-shadow": "true", ...getReferenceProps({
|
|
142
148
|
...props,
|
|
143
149
|
onChange,
|
|
144
150
|
onFocus,
|
|
@@ -163,7 +169,7 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
|
|
|
163
169
|
}
|
|
164
170
|
}
|
|
165
171
|
},
|
|
166
|
-
}), "data-value": value, "data-error": !!error, "data-name": id, "data-target": id, required: required, value: open ? shadow : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "group-focus-within:border-primary group-hover:border-primary", props.className) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children:
|
|
172
|
+
}), "data-value": value, "data-error": !!error, "data-name": id, "data-target": id, required: required, value: open ? shadow : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "group-focus-within:border-primary group-hover:border-primary", props.className) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsx("ul", { ...getFloatingProps({
|
|
167
173
|
ref: refs.setFloating,
|
|
168
174
|
style: {
|
|
169
175
|
position: strategy,
|
|
@@ -171,12 +177,12 @@ export const Autocomplete = forwardRef(({ options, dynamicOption = false, feedba
|
|
|
171
177
|
top: y ?? 0,
|
|
172
178
|
...transitions.styles,
|
|
173
179
|
},
|
|
174
|
-
}), "data-floating": "true", className: "z-floating m-0 origin-[top_center] list-none overflow-auto overflow-y-auto overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating", children: [list.map((option, i) => {
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
180
|
+
}), "data-floating": "true", className: "z-floating m-0 origin-[top_center] list-none overflow-auto overflow-y-auto overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating", children: _jsxs(AnimatePresence, { children: [list.map((option, i) => {
|
|
181
|
+
const active = value === option.value || value === option.label;
|
|
182
|
+
return (_jsx(Option, { ...getItemProps({
|
|
183
|
+
onClick: () => onSelect(option, i),
|
|
184
|
+
ref: (node) => void (listRef.current[i] = node),
|
|
185
|
+
selected: index === i,
|
|
186
|
+
}), option: option, active: active, selected: index === i }, `${option.value}-option`));
|
|
187
|
+
}), list.length === 0 ? (_jsx("li", { role: "option", className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null] }) }) })) : null })] }));
|
|
182
188
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAGlF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B;IACI,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,eAAe,CAAC,QAAQ,CAAC,EACzB;IACI,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAGlF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B;IACI,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,eAAe,CAAC,QAAQ,CAAC,EACzB;IACI,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,oGAuGlB,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { createElement as _createElement } from "react";
|
|
2
3
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
4
|
import { ChevronDownIcon } from "lucide-react";
|
|
4
5
|
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
|
|
@@ -13,15 +14,18 @@ export const Select = forwardRef(({ required = true, options, info, selectContai
|
|
|
13
14
|
useEffect(() => {
|
|
14
15
|
if (inputRef.current === null)
|
|
15
16
|
return;
|
|
17
|
+
const controller = new AbortController();
|
|
16
18
|
const input = inputRef.current;
|
|
17
19
|
const focus = initializeInputDataset(inputRef.current);
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
input.addEventListener("change", () => input.setAttribute("data-selected", "true"), {
|
|
21
|
+
once: true,
|
|
22
|
+
signal: controller.signal,
|
|
23
|
+
});
|
|
20
24
|
return () => {
|
|
21
25
|
focus();
|
|
22
|
-
|
|
26
|
+
controller.abort();
|
|
23
27
|
};
|
|
24
28
|
}, []);
|
|
25
29
|
const onClickLabel = () => inputRef.current?.focus();
|
|
26
|
-
return (_jsx(InputField, { info: info, left: left, error: error, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, componentName: "select", rightLabel: rightLabel, interactive: interactive, id: props.name || props.id, optionalText: optionalText, labelClassName: labelClassName, placeholder: props.placeholder, right: _jsx("label", { htmlFor: id, children: _jsxs("button", { onClick: onClickLabel, type: "button", className: "mt-2 transition-colors hover:text-primary", children: [_jsx(ChevronDownIcon, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }) }), children: _jsxs("select", { ...props, id: id, name: id, value: props.value, required: required, ref: mergeRefs(ref, inputRef), "data-selected": !!props.value || false, defaultValue: props.value ? undefined : "", className: css("input select group h-10 w-full flex-1 appearance-none rounded-md", "bg-transparent px-2 py-1 text-foreground placeholder-input-placeholder", "outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className), children: [_jsx("option", { value: "", disabled: true, hidden: true, children: props.placeholder }), options.map((option) => (
|
|
30
|
+
return (_jsx(InputField, { info: info, left: left, error: error, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, componentName: "select", rightLabel: rightLabel, interactive: interactive, id: props.name || props.id, optionalText: optionalText, labelClassName: labelClassName, placeholder: props.placeholder, right: _jsx("label", { htmlFor: id, children: _jsxs("button", { onClick: onClickLabel, type: "button", className: "mt-2 transition-colors hover:text-primary", children: [_jsx(ChevronDownIcon, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }) }), children: _jsxs("select", { ...props, id: id, name: id, value: props.value, required: required, ref: mergeRefs(ref, inputRef), "data-selected": !!props.value || false, defaultValue: props.value ? undefined : "", className: css("input select group h-10 w-full flex-1 appearance-none rounded-md", "bg-transparent px-2 py-1 text-foreground placeholder-input-placeholder", "outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className), children: [_jsx("option", { value: "", disabled: true, hidden: true, children: props.placeholder }), options.map((option) => (_createElement("option", { ...option, value: option.value, children: option.label ?? option.value, key: `${id}-select-option-${option.value}` })))] }) }));
|
|
27
31
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/form/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAInG,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/form/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAInG,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,MAAM,mGAmEjB,CAAC"}
|
|
@@ -31,5 +31,5 @@ export const Switch = forwardRef(({ children, container, error, ...props }, ref)
|
|
|
31
31
|
innerRef.current.dispatchEvent(new Event("change", { bubbles: true }));
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
|
-
return (_jsxs("fieldset", { className: css("flex flex-wrap
|
|
34
|
+
return (_jsxs("fieldset", { className: css("flex flex-col flex-wrap justify-center", container), "data-component": "switch", children: [_jsxs("span", { className: "flex flex-row flex-wrap items-center", children: [_jsx("input", { ...props, checked: checked, "data-checked": checked, "data-trigger": "change", hidden: true, id: props.id || id, onChange: (e) => setInnerChecked(e.target.checked), ref: innerRef, type: "checkbox" }), _jsx("button", { type: "button", role: "switch", onClick: onCheck, "aria-checked": checked, "data-checked": checked, "aria-labelledby": `${id}-label`, className: "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary", children: _jsx("span", { "aria-hidden": "true", "data-checked": checked, className: "inline-block aspect-square size-5 transform rounded-full shadow ring-0 transition duration-300 ease-in-out data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch" }) }), _jsx("label", { htmlFor: props.id || id, className: "ml-3 inline-block text-sm", id: `${id}-label`, children: _jsx("span", { className: "font-medium text-foreground", children: children }) })] }), _jsx("span", { className: "mt-1 flex-1 whitespace-nowrap text-xs text-danger empty:mt-0 empty:hidden", children: error })] }));
|
|
35
35
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"task-list.d.ts","sourceRoot":"","sources":["../../../../src/components/form/task-list.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"task-list.d.ts","sourceRoot":"","sources":["../../../../src/components/form/task-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAErE,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,4CA2B5E,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { stagger, useAnimate } from "
|
|
3
|
+
import { stagger, useAnimate } from "motion/react";
|
|
3
4
|
import { useEffect } from "react";
|
|
4
5
|
export const TaskList = (props) => {
|
|
5
6
|
const [ref, animate] = useAnimate();
|