@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.
Files changed (62) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.js +50 -53
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +17442 -14771
  5. package/dist/index.mjs.map +1 -1
  6. package/dist/index.umd.js +50 -53
  7. package/dist/index.umd.js.map +1 -1
  8. package/dist/preset/src/styles/dark.d.ts.map +1 -1
  9. package/dist/preset/src/styles/dark.js +3 -1
  10. package/dist/preset/src/styles/design-tokens.d.ts +9 -0
  11. package/dist/preset/src/styles/design-tokens.d.ts.map +1 -1
  12. package/dist/preset/src/styles/design-tokens.js +27 -9
  13. package/dist/preset/src/styles/light.d.ts.map +1 -1
  14. package/dist/preset/src/styles/light.js +3 -1
  15. package/dist/preset/src/styles/theme.types.d.ts +44 -70
  16. package/dist/preset/src/styles/theme.types.d.ts.map +1 -1
  17. package/dist/src/components/core/resizable.js +1 -1
  18. package/dist/src/components/display/alert.d.ts +1 -1
  19. package/dist/src/components/display/alert.d.ts.map +1 -1
  20. package/dist/src/components/display/alert.js +1 -1
  21. package/dist/src/components/display/calendar.js +1 -1
  22. package/dist/src/components/display/list.d.ts.map +1 -1
  23. package/dist/src/components/display/list.js +2 -1
  24. package/dist/src/components/display/notifications.js +1 -1
  25. package/dist/src/components/display/step.js +1 -1
  26. package/dist/src/components/display/tabs.js +1 -1
  27. package/dist/src/components/floating/expand.d.ts +1 -1
  28. package/dist/src/components/floating/expand.d.ts.map +1 -1
  29. package/dist/src/components/floating/expand.js +1 -1
  30. package/dist/src/components/floating/modal.js +1 -1
  31. package/dist/src/components/floating/toolbar.js +1 -1
  32. package/dist/src/components/form/autocomplete.d.ts.map +1 -1
  33. package/dist/src/components/form/autocomplete.js +17 -11
  34. package/dist/src/components/form/select.d.ts.map +1 -1
  35. package/dist/src/components/form/select.js +8 -4
  36. package/dist/src/components/form/switch.d.ts.map +1 -1
  37. package/dist/src/components/form/switch.js +1 -1
  38. package/dist/src/components/form/task-list.d.ts.map +1 -1
  39. package/dist/src/components/form/task-list.js +2 -1
  40. package/dist/src/components/form/virtual-autocomplete.d.ts +5 -5
  41. package/dist/src/components/form/virtual-autocomplete.d.ts.map +1 -1
  42. package/dist/src/components/form/virtual-autocomplete.js +147 -158
  43. package/dist/src/components/table/group.js +1 -1
  44. package/dist/src/components/table/index.js +1 -1
  45. package/dist/src/components/table/thead.d.ts.map +1 -1
  46. package/dist/src/components/table/thead.js +2 -1
  47. package/dist/src/hooks/use-form.d.ts +309 -18
  48. package/dist/src/hooks/use-form.d.ts.map +1 -1
  49. package/dist/src/hooks/use-form.js +327 -90
  50. package/dist/src/index.d.ts +6 -5
  51. package/dist/src/index.d.ts.map +1 -1
  52. package/dist/src/index.js +5 -4
  53. package/dist/src/styles/dark.d.ts.map +1 -1
  54. package/dist/src/styles/dark.js +3 -1
  55. package/dist/src/styles/design-tokens.d.ts +9 -0
  56. package/dist/src/styles/design-tokens.d.ts.map +1 -1
  57. package/dist/src/styles/design-tokens.js +22 -13
  58. package/dist/src/styles/light.d.ts.map +1 -1
  59. package/dist/src/styles/light.js +3 -1
  60. package/dist/src/styles/theme.types.d.ts +44 -70
  61. package/dist/src/styles/theme.types.d.ts.map +1 -1
  62. 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,YAsLxB,CAAC"}
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,WAa7D,CAAC"}
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
- var fn = function (value, _, key) { return ({
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,YAsLzB,CAAC"}
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":"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"}
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,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtG,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,cAAc,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7D,OAAO,EAAE,MAAM,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,EAAE,MAAM,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,MAAM,EAAE;QACJ,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE,WAAW,CAAC;QACrB,QAAQ,EAAE,WAAW,CAAC;QACtB,OAAO,EAAE,cAAc,CAAC;QACxB,QAAQ,EAAE,cAAc,CAAC;QACzB,IAAI,EAAE,WAAW,GAAG;YAAE,YAAY,EAAE,MAAM,CAAA;SAAE,CAAC;QAC7C,IAAI,EAAE,WAAW,GAAG;YAAE,YAAY,EAAE,MAAM,CAAA;SAAE,CAAC;QAC7C,IAAI,EAAE;YAAE,UAAU,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QAC7C,MAAM,EAAE,WAAW,GAAG;YAAE,YAAY,EAAE,MAAM,CAAA;SAAE,CAAC;QAC/C,SAAS,EAAE,WAAW,GAAG;YAAE,UAAU,EAAE,MAAM,CAAA;SAAE,CAAC;QAChD,OAAO,EAAE,WAAW,GAAG;YAAE,YAAY,EAAE,MAAM,CAAA;SAAE,CAAC;QAChD,GAAG,EAAE,MAAM,CAAC,UAAU,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACtD,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACzD,KAAK,EAAE;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAC;YAAC,UAAU,EAAE,MAAM,CAAA;SAAE,CAAC;QAC9D,KAAK,EAAE,MAAM,CAAC,UAAU,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACxE,KAAK,EAAE;YACH,MAAM,EAAE,MAAM,CAAC;YACf,WAAW,EAAE,MAAM,CAAC;YACpB,YAAY,EAAE,MAAM,CAAC;YACrB,WAAW,EAAE,MAAM,CAAC;YACpB,MAAM,EAAE,MAAM,CAAC;SAClB,CAAC;KACL,CAAC;CACL,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnD,MAAM,MAAM,kBAAkB,GACxB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC,GACzD,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;AAEpF,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,KAAK,CAAC;AAEzF,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;AAE/B,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,EAAE,IAAI;KAC1D,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,aAAa,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,UAAU,CAAC,EAAE,CAAC;CACnF,CAAC"}
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
- import { motion, useMotionValue } from "framer-motion";
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 "framer-motion";
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,eAAe,CAAC;AAExD,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAEvE,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
+ {"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 "framer-motion";
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 "framer-motion";
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":"AAaA,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
+ {"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 "framer-motion";
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 "framer-motion";
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 "framer-motion";
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 "framer-motion";
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,4 +1,4 @@
1
- import { motion } from "framer-motion";
1
+ import { motion } from "motion/react";
2
2
  import { PropsWithChildren } from "react";
3
3
  import { Label, Override } from "../../types";
4
4
  import { ButtonProps } from "../core/button";
@@ -1 +1 @@
1
- {"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/expand.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,MAAM,EAAE,MAAM,eAAe,CAAC;AACxD,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
+ {"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 "framer-motion";
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 "framer-motion";
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 "framer-motion";
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;AAIzG,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,4GA2BjB,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,yGAyRxB,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("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
+ 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
- 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", 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", { ...getReferenceProps({
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: _jsxs("ul", { ...getFloatingProps({
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
- const active = value === option.value || value === option.label;
176
- return (_jsx(Option, { ...getItemProps({
177
- onClick: () => onSelect(option, i),
178
- ref: (node) => void (listRef.current[i] = node),
179
- selected: index === i,
180
- }), option: option, active: active, selected: index === i }, `${option.value}-option`));
181
- }), 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 })] }));
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,oGA+FlB,CAAC"}
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
- const change = () => input.setAttribute("data-selected", "true");
19
- input.addEventListener("change", change);
20
+ input.addEventListener("change", () => input.setAttribute("data-selected", "true"), {
21
+ once: true,
22
+ signal: controller.signal,
23
+ });
20
24
  return () => {
21
25
  focus();
22
- input.removeEventListener("change", change);
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) => (_jsx("option", { ...option, children: option.label ?? option.value }, `${id}-select-option-${option.value}`)))] }) }));
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,mGAiEjB,CAAC"}
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 items-center", container), "data-component": "switch", 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 })] }));
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":"AACA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAErE,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,4CA2B5E,CAAC"}
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 "framer-motion";
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();