@vuer-ai/vuer-uikit 0.0.26 → 0.0.28

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 (152) hide show
  1. package/dist/{chunk-ZTNXAV64.js → chunk-3ZFILFNB.js} +4 -4
  2. package/dist/{chunk-Q3GXSHJV.mjs → chunk-4QERYDMC.mjs} +3 -3
  3. package/dist/{chunk-5TVG5JK5.js → chunk-5CENHVP3.js} +18 -0
  4. package/dist/chunk-7DRJLKR6.js +38 -0
  5. package/dist/{chunk-ZRJ5JCVG.mjs → chunk-7LDFQGYF.mjs} +1 -1
  6. package/dist/chunk-BAAW5VSE.js +142 -0
  7. package/dist/{chunk-G6PRZVSE.mjs → chunk-D6HWHISR.mjs} +18 -0
  8. package/dist/{chunk-CCGCEN7Z.js → chunk-EMHRYI5O.js} +1 -1
  9. package/dist/chunk-KMIPKXV2.mjs +108 -0
  10. package/dist/chunk-SBHPTJE4.mjs +29 -0
  11. package/dist/{chunk-LHWH4GP5.mjs → chunk-YIBD2FEV.mjs} +1 -1
  12. package/dist/{chunk-RTURVQIP.js → chunk-Z3LP6DAV.js} +1 -1
  13. package/dist/highlight-cursor/cursor-context.d.mts +2 -2
  14. package/dist/highlight-cursor/cursor-context.d.ts +2 -2
  15. package/dist/highlight-cursor/enhanced-components.d.mts +4 -4
  16. package/dist/highlight-cursor/enhanced-components.d.ts +4 -4
  17. package/dist/highlight-cursor/enhanced-components.js +2 -1
  18. package/dist/highlight-cursor/enhanced-components.mjs +2 -1
  19. package/dist/highlight-cursor/index.js +2 -1
  20. package/dist/highlight-cursor/index.mjs +2 -1
  21. package/dist/highlight-cursor/with-cursor.d.mts +2 -2
  22. package/dist/highlight-cursor/with-cursor.d.ts +2 -2
  23. package/dist/index.css +2 -2
  24. package/dist/index.d.mts +5 -3
  25. package/dist/index.d.ts +5 -3
  26. package/dist/index.js +60 -15
  27. package/dist/index.mjs +8 -7
  28. package/dist/styles/theme.css +1 -1
  29. package/dist/ui/avatar.d.mts +19 -6
  30. package/dist/ui/avatar.d.ts +19 -6
  31. package/dist/ui/avatar.js +31 -6
  32. package/dist/ui/avatar.mjs +3 -2
  33. package/dist/ui/badge.js +2 -1
  34. package/dist/ui/badge.mjs +2 -1
  35. package/dist/ui/button.d.mts +2 -2
  36. package/dist/ui/button.d.ts +2 -2
  37. package/dist/ui/button.js +2 -1
  38. package/dist/ui/button.mjs +2 -1
  39. package/dist/ui/card.js +2 -1
  40. package/dist/ui/card.mjs +2 -1
  41. package/dist/ui/checkbox.js +4 -3
  42. package/dist/ui/checkbox.mjs +3 -2
  43. package/dist/ui/collapsible.js +2 -1
  44. package/dist/ui/collapsible.mjs +2 -1
  45. package/dist/ui/drawer.d.mts +11 -11
  46. package/dist/ui/drawer.d.ts +11 -11
  47. package/dist/ui/drawer.js +2 -1
  48. package/dist/ui/drawer.mjs +2 -1
  49. package/dist/ui/dropdown.js +2 -1
  50. package/dist/ui/dropdown.mjs +2 -1
  51. package/dist/ui/index.d.mts +4 -3
  52. package/dist/ui/index.d.ts +4 -3
  53. package/dist/ui/index.js +44 -15
  54. package/dist/ui/index.mjs +8 -7
  55. package/dist/ui/input-numbers.d.mts +2 -2
  56. package/dist/ui/input-numbers.d.ts +2 -2
  57. package/dist/ui/input-numbers.js +2 -1
  58. package/dist/ui/input-numbers.mjs +2 -1
  59. package/dist/ui/input.d.mts +4 -4
  60. package/dist/ui/input.d.ts +4 -4
  61. package/dist/ui/input.js +2 -1
  62. package/dist/ui/input.mjs +2 -1
  63. package/dist/ui/layout.js +2 -1
  64. package/dist/ui/layout.mjs +2 -1
  65. package/dist/ui/modal.js +2 -1
  66. package/dist/ui/modal.mjs +2 -1
  67. package/dist/ui/popover.js +2 -1
  68. package/dist/ui/popover.mjs +2 -1
  69. package/dist/ui/radio-group.js +2 -1
  70. package/dist/ui/radio-group.mjs +2 -1
  71. package/dist/ui/select.d.mts +1 -1
  72. package/dist/ui/select.d.ts +1 -1
  73. package/dist/ui/select.js +2 -1
  74. package/dist/ui/select.mjs +2 -1
  75. package/dist/ui/slider.d.mts +2 -2
  76. package/dist/ui/slider.d.ts +2 -2
  77. package/dist/ui/slider.js +2 -1
  78. package/dist/ui/slider.mjs +2 -1
  79. package/dist/ui/switch.js +2 -1
  80. package/dist/ui/switch.mjs +2 -1
  81. package/dist/ui/tabs.js +2 -1
  82. package/dist/ui/tabs.mjs +2 -1
  83. package/dist/ui/textarea.d.mts +1 -1
  84. package/dist/ui/textarea.d.ts +1 -1
  85. package/dist/ui/textarea.js +2 -1
  86. package/dist/ui/textarea.mjs +2 -1
  87. package/dist/ui/{theme-context/theme-context.d.ts → theme/ThemeProvider.d.mts} +1 -1
  88. package/dist/ui/{theme-context/theme-context.d.mts → theme/ThemeProvider.d.ts} +1 -1
  89. package/dist/ui/theme/ThemeProvider.js +15 -0
  90. package/dist/ui/theme/ThemeProvider.mjs +2 -0
  91. package/dist/ui/theme/index.d.mts +5 -0
  92. package/dist/ui/theme/index.d.ts +5 -0
  93. package/dist/ui/theme/index.js +20 -0
  94. package/dist/ui/theme/index.mjs +3 -0
  95. package/dist/ui/{theme-context/theme-script.d.ts → theme/themeScript.d.mts} +10 -4
  96. package/dist/ui/{theme-context/theme-script.d.mts → theme/themeScript.d.ts} +10 -4
  97. package/dist/ui/theme/themeScript.js +10 -0
  98. package/dist/ui/theme/themeScript.mjs +1 -0
  99. package/dist/ui/{theme-context/theme-types.d.mts → theme/types.d.mts} +1 -1
  100. package/dist/ui/{theme-context/theme-types.d.ts → theme/types.d.ts} +1 -1
  101. package/dist/ui/timeline.js +2 -1
  102. package/dist/ui/timeline.mjs +2 -1
  103. package/dist/ui/toggle-group.js +2 -1
  104. package/dist/ui/toggle-group.mjs +2 -1
  105. package/dist/ui/toggle.js +2 -1
  106. package/dist/ui/toggle.mjs +2 -1
  107. package/dist/ui/tooltip.js +2 -1
  108. package/dist/ui/tooltip.mjs +2 -1
  109. package/dist/ui/tree-view-v2.js +2 -1
  110. package/dist/ui/tree-view-v2.mjs +2 -1
  111. package/dist/ui/tree-view.d.mts +3 -3
  112. package/dist/ui/tree-view.d.ts +3 -3
  113. package/dist/ui/tree-view.js +2 -1
  114. package/dist/ui/tree-view.mjs +2 -1
  115. package/dist/ui/version-badge.js +4 -3
  116. package/dist/ui/version-badge.mjs +3 -2
  117. package/dist/utils/client-only.d.mts +27 -0
  118. package/dist/utils/client-only.d.ts +27 -0
  119. package/dist/utils/client-only.js +22 -0
  120. package/dist/utils/client-only.mjs +1 -0
  121. package/dist/utils/index.d.mts +2 -0
  122. package/dist/utils/index.d.ts +2 -0
  123. package/dist/utils/index.js +18 -1
  124. package/dist/utils/index.mjs +2 -1
  125. package/package.json +3 -2
  126. package/src/index.css +1 -1
  127. package/src/ui/avatar.tsx +72 -37
  128. package/src/ui/checkbox.tsx +18 -1
  129. package/src/ui/index.ts +1 -1
  130. package/src/ui/{theme-context/theme-context.tsx → theme/ThemeProvider.tsx} +4 -4
  131. package/src/ui/theme/index.ts +4 -0
  132. package/src/ui/{theme-context/theme-script.tsx → theme/themeScript.tsx} +8 -2
  133. package/src/utils/client-only.ts +54 -0
  134. package/src/utils/index.ts +1 -0
  135. package/dist/chunk-AQXAGOYO.js +0 -107
  136. package/dist/chunk-DYT2FBW5.mjs +0 -79
  137. package/dist/ui/theme-context/index.d.mts +0 -4
  138. package/dist/ui/theme-context/index.d.ts +0 -4
  139. package/dist/ui/theme-context/index.js +0 -16
  140. package/dist/ui/theme-context/index.mjs +0 -3
  141. package/dist/ui/theme-context/theme-context.js +0 -15
  142. package/dist/ui/theme-context/theme-context.mjs +0 -2
  143. package/dist/ui/theme-context/theme-script.js +0 -10
  144. package/dist/ui/theme-context/theme-script.mjs +0 -1
  145. package/src/ui/theme-context/index.ts +0 -3
  146. /package/dist/{chunk-4FOSHIMU.mjs → chunk-AMB2H6WS.mjs} +0 -0
  147. /package/dist/{chunk-M4IVLZIH.mjs → chunk-CMYR6AOY.mjs} +0 -0
  148. /package/dist/{chunk-UOFJLQ72.js → chunk-IJ7QXNIJ.js} +0 -0
  149. /package/dist/{chunk-XWS4SIB5.js → chunk-Y2QBWXB4.js} +0 -0
  150. /package/dist/ui/{theme-context/theme-types.js → theme/types.js} +0 -0
  151. /package/dist/ui/{theme-context/theme-types.mjs → theme/types.mjs} +0 -0
  152. /package/src/ui/{theme-context/theme-types.ts → theme/types.ts} +0 -0
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var chunkCCGCEN7Z_js = require('./chunk-CCGCEN7Z.js');
3
+ var chunkEMHRYI5O_js = require('./chunk-EMHRYI5O.js');
4
4
  var react = require('react');
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
 
@@ -28,8 +28,8 @@ var defaultThemes = ["light", "dark", "liquidlight", "liquiddark"];
28
28
  var Theme = ({
29
29
  forcedTheme,
30
30
  disableTransitionOnChange = false,
31
- enableSystem = false,
32
- enableColorScheme = true,
31
+ enableSystem = true,
32
+ enableColorScheme = false,
33
33
  storageKey = "theme",
34
34
  themes = defaultThemes,
35
35
  defaultTheme = enableSystem ? "system" : "light",
@@ -161,7 +161,7 @@ var Theme = ({
161
161
  ),
162
162
  children: [
163
163
  /* @__PURE__ */ jsxRuntime.jsx(
164
- chunkCCGCEN7Z_js.ThemeScript,
164
+ chunkEMHRYI5O_js.ThemeScript,
165
165
  {
166
166
  ...{
167
167
  forcedTheme,
@@ -1,4 +1,4 @@
1
- import { ThemeScript } from './chunk-LHWH4GP5.mjs';
1
+ import { ThemeScript } from './chunk-YIBD2FEV.mjs';
2
2
  import { createContext, useContext, useState, useCallback, useEffect, useMemo } from 'react';
3
3
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
4
4
 
@@ -26,8 +26,8 @@ var defaultThemes = ["light", "dark", "liquidlight", "liquiddark"];
26
26
  var Theme = ({
27
27
  forcedTheme,
28
28
  disableTransitionOnChange = false,
29
- enableSystem = false,
30
- enableColorScheme = true,
29
+ enableSystem = true,
30
+ enableColorScheme = false,
31
31
  storageKey = "theme",
32
32
  themes = defaultThemes,
33
33
  defaultTheme = enableSystem ? "system" : "light",
@@ -1,5 +1,6 @@
1
1
  'use strict';
2
2
 
3
+ var chunk7DRJLKR6_js = require('./chunk-7DRJLKR6.js');
3
4
  var chunkXXWQ4RVP_js = require('./chunk-XXWQ4RVP.js');
4
5
  var CheckboxPrimitive = require('@radix-ui/react-checkbox');
5
6
  var lucideReact = require('lucide-react');
@@ -26,6 +27,23 @@ function _interopNamespace(e) {
26
27
  var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
27
28
 
28
29
  function Checkbox({ className, checkall, ...props }) {
30
+ if (!chunk7DRJLKR6_js.isClient()) {
31
+ return /* @__PURE__ */ jsxRuntime.jsx(
32
+ "div",
33
+ {
34
+ "data-slot": "checkbox",
35
+ className: chunkXXWQ4RVP_js.cn(
36
+ "w-[16px]",
37
+ "h-[16px]",
38
+ "rounded-[3px]",
39
+ "border-[1.5px]",
40
+ "border-solid",
41
+ "border-bg-tertiary",
42
+ className
43
+ )
44
+ }
45
+ );
46
+ }
29
47
  return /* @__PURE__ */ jsxRuntime.jsx(
30
48
  CheckboxPrimitive__namespace.Root,
31
49
  {
@@ -0,0 +1,38 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+
5
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
6
+
7
+ var React__default = /*#__PURE__*/_interopDefault(React);
8
+
9
+ // src/utils/client-only.ts
10
+ function clientOnly(fn) {
11
+ if (typeof window !== "undefined") {
12
+ return fn();
13
+ }
14
+ return void 0;
15
+ }
16
+ function createClientOnlyComponent(Component, fallback) {
17
+ return function ClientOnlyWrapper(props) {
18
+ const [isClient2, setIsClient] = React__default.default.useState(false);
19
+ React__default.default.useEffect(() => {
20
+ setIsClient(true);
21
+ }, []);
22
+ if (!isClient2) {
23
+ return fallback ? React__default.default.createElement(fallback, props) : null;
24
+ }
25
+ return React__default.default.createElement(Component, props);
26
+ };
27
+ }
28
+ function isClient() {
29
+ return typeof window !== "undefined";
30
+ }
31
+ function isServer() {
32
+ return typeof window === "undefined";
33
+ }
34
+
35
+ exports.clientOnly = clientOnly;
36
+ exports.createClientOnlyComponent = createClientOnlyComponent;
37
+ exports.isClient = isClient;
38
+ exports.isServer = isServer;
@@ -1,7 +1,7 @@
1
1
  import { Badge } from './chunk-WO3WHXDP.mjs';
2
2
  import { jsx } from 'react/jsx-runtime';
3
3
 
4
- var PACKAGE_VERSION = "0.0.26" ;
4
+ var PACKAGE_VERSION = "0.0.28" ;
5
5
  var PACKAGE_NAME = "@vuer-ai/vuer-uikit" ;
6
6
  function VersionBadge({
7
7
  className,
@@ -0,0 +1,142 @@
1
+ 'use strict';
2
+
3
+ var chunk7DRJLKR6_js = require('./chunk-7DRJLKR6.js');
4
+ var chunkXXWQ4RVP_js = require('./chunk-XXWQ4RVP.js');
5
+ var AvatarPrimitive = require('@radix-ui/react-avatar');
6
+ var React = require('react');
7
+ var jsxRuntime = require('react/jsx-runtime');
8
+
9
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
10
+
11
+ function _interopNamespace(e) {
12
+ if (e && e.__esModule) return e;
13
+ var n = Object.create(null);
14
+ if (e) {
15
+ Object.keys(e).forEach(function (k) {
16
+ if (k !== 'default') {
17
+ var d = Object.getOwnPropertyDescriptor(e, k);
18
+ Object.defineProperty(n, k, d.get ? d : {
19
+ enumerable: true,
20
+ get: function () { return e[k]; }
21
+ });
22
+ }
23
+ });
24
+ }
25
+ n.default = e;
26
+ return Object.freeze(n);
27
+ }
28
+
29
+ var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
30
+ var React__default = /*#__PURE__*/_interopDefault(React);
31
+
32
+ var AvatarRoot = ({
33
+ className,
34
+ ...props
35
+ }) => /* @__PURE__ */ jsxRuntime.jsx(
36
+ AvatarPrimitive__namespace.Root,
37
+ {
38
+ "data-slot": "avatar",
39
+ className: chunkXXWQ4RVP_js.cn("relative flex size-[24px] shrink-0 overflow-hidden rounded-full", className),
40
+ ...props
41
+ }
42
+ );
43
+ var AvatarSSRFallback = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
44
+ "span",
45
+ {
46
+ "data-slot": "avatar",
47
+ className: chunkXXWQ4RVP_js.cn("relative flex size-[24px] shrink-0 overflow-hidden rounded-full", className)
48
+ }
49
+ );
50
+ var Avatar = chunk7DRJLKR6_js.createClientOnlyComponent(AvatarRoot, AvatarSSRFallback);
51
+ var AvatarImageRoot = ({
52
+ className,
53
+ ...props
54
+ }) => /* @__PURE__ */ jsxRuntime.jsx(
55
+ AvatarPrimitive__namespace.Image,
56
+ {
57
+ "data-slot": "avatar-image",
58
+ className: chunkXXWQ4RVP_js.cn("aspect-square size-full", className),
59
+ ...props
60
+ }
61
+ );
62
+ var AvatarImageFallback = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "avatar-image", className: chunkXXWQ4RVP_js.cn("aspect-square size-full", className) });
63
+ var AvatarImage = chunk7DRJLKR6_js.createClientOnlyComponent(AvatarImageRoot, AvatarImageFallback);
64
+ var AvatarFallbackRoot = ({
65
+ className,
66
+ ...props
67
+ }) => /* @__PURE__ */ jsxRuntime.jsx(
68
+ AvatarPrimitive__namespace.Fallback,
69
+ {
70
+ "data-slot": "avatar-fallback",
71
+ className: chunkXXWQ4RVP_js.cn(
72
+ "bg-bg-tertiary flex size-full items-center justify-center rounded-full",
73
+ className
74
+ ),
75
+ ...props
76
+ }
77
+ );
78
+ var AvatarFallbackSSR = ({
79
+ className,
80
+ ...props
81
+ }) => /* @__PURE__ */ jsxRuntime.jsx(
82
+ "span",
83
+ {
84
+ "data-slot": "avatar-fallback",
85
+ className: chunkXXWQ4RVP_js.cn(
86
+ "bg-bg-tertiary flex size-full items-center justify-center rounded-full",
87
+ className
88
+ ),
89
+ ...props
90
+ }
91
+ );
92
+ var AvatarFallback = chunk7DRJLKR6_js.createClientOnlyComponent(AvatarFallbackRoot, AvatarFallbackSSR);
93
+ function AvatarGroup({ children, className, spacing = "normal", max }) {
94
+ const spacingClasses = {
95
+ tight: "-space-x-1.5",
96
+ normal: "-space-x-1",
97
+ loose: "-space-x-0.45"
98
+ };
99
+ const childrenArray = React__default.default.Children.toArray(children);
100
+ const displayChildren = max ? childrenArray.slice(0, max) : childrenArray;
101
+ const remainingCount = max && childrenArray.length > max ? childrenArray.length - max : 0;
102
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkXXWQ4RVP_js.cn("flex flex-row-reverse justify-end", spacingClasses[spacing], className), children: [
103
+ remainingCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
104
+ Avatar,
105
+ {
106
+ className: chunkXXWQ4RVP_js.cn(
107
+ "ring-background relative cursor-default ring-2 transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120"
108
+ ),
109
+ children: /* @__PURE__ */ jsxRuntime.jsxs(AvatarFallback, { children: [
110
+ "+",
111
+ remainingCount
112
+ ] })
113
+ }
114
+ ),
115
+ displayChildren.reverse().map((child) => {
116
+ var _a;
117
+ if (React__default.default.isValidElement(child)) {
118
+ return React__default.default.cloneElement(
119
+ child,
120
+ {
121
+ className: chunkXXWQ4RVP_js.cn(
122
+ `ring-background relative ring-2 transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120`,
123
+ (_a = child.props) == null ? void 0 : _a.className
124
+ )
125
+ }
126
+ );
127
+ }
128
+ return child;
129
+ })
130
+ ] });
131
+ }
132
+
133
+ exports.Avatar = Avatar;
134
+ exports.AvatarFallback = AvatarFallback;
135
+ exports.AvatarFallbackRoot = AvatarFallbackRoot;
136
+ exports.AvatarFallbackSSR = AvatarFallbackSSR;
137
+ exports.AvatarGroup = AvatarGroup;
138
+ exports.AvatarImage = AvatarImage;
139
+ exports.AvatarImageFallback = AvatarImageFallback;
140
+ exports.AvatarImageRoot = AvatarImageRoot;
141
+ exports.AvatarRoot = AvatarRoot;
142
+ exports.AvatarSSRFallback = AvatarSSRFallback;
@@ -1,9 +1,27 @@
1
+ import { isClient } from './chunk-SBHPTJE4.mjs';
1
2
  import { cn } from './chunk-KTNZSZ5Y.mjs';
2
3
  import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
3
4
  import { CheckIcon } from 'lucide-react';
4
5
  import { jsx } from 'react/jsx-runtime';
5
6
 
6
7
  function Checkbox({ className, checkall, ...props }) {
8
+ if (!isClient()) {
9
+ return /* @__PURE__ */ jsx(
10
+ "div",
11
+ {
12
+ "data-slot": "checkbox",
13
+ className: cn(
14
+ "w-[16px]",
15
+ "h-[16px]",
16
+ "rounded-[3px]",
17
+ "border-[1.5px]",
18
+ "border-solid",
19
+ "border-bg-tertiary",
20
+ className
21
+ )
22
+ }
23
+ );
24
+ }
7
25
  return /* @__PURE__ */ jsx(
8
26
  CheckboxPrimitive.Root,
9
27
  {
@@ -3,7 +3,7 @@
3
3
  var react = require('react');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
 
6
- // src/ui/theme-context/theme-script.tsx
6
+ // src/ui/theme/themeScript.tsx
7
7
  var themeScript = (defaultTheme, storageKey, attribute, themes, value, forcedTheme, enableSystem, enableColorScheme) => {
8
8
  const el = document.documentElement;
9
9
  const systemThemes = ["light", "dark"];
@@ -0,0 +1,108 @@
1
+ import { createClientOnlyComponent } from './chunk-SBHPTJE4.mjs';
2
+ import { cn } from './chunk-KTNZSZ5Y.mjs';
3
+ import * as AvatarPrimitive from '@radix-ui/react-avatar';
4
+ import React from 'react';
5
+ import { jsx, jsxs } from 'react/jsx-runtime';
6
+
7
+ var AvatarRoot = ({
8
+ className,
9
+ ...props
10
+ }) => /* @__PURE__ */ jsx(
11
+ AvatarPrimitive.Root,
12
+ {
13
+ "data-slot": "avatar",
14
+ className: cn("relative flex size-[24px] shrink-0 overflow-hidden rounded-full", className),
15
+ ...props
16
+ }
17
+ );
18
+ var AvatarSSRFallback = ({ className }) => /* @__PURE__ */ jsx(
19
+ "span",
20
+ {
21
+ "data-slot": "avatar",
22
+ className: cn("relative flex size-[24px] shrink-0 overflow-hidden rounded-full", className)
23
+ }
24
+ );
25
+ var Avatar = createClientOnlyComponent(AvatarRoot, AvatarSSRFallback);
26
+ var AvatarImageRoot = ({
27
+ className,
28
+ ...props
29
+ }) => /* @__PURE__ */ jsx(
30
+ AvatarPrimitive.Image,
31
+ {
32
+ "data-slot": "avatar-image",
33
+ className: cn("aspect-square size-full", className),
34
+ ...props
35
+ }
36
+ );
37
+ var AvatarImageFallback = ({ className }) => /* @__PURE__ */ jsx("span", { "data-slot": "avatar-image", className: cn("aspect-square size-full", className) });
38
+ var AvatarImage = createClientOnlyComponent(AvatarImageRoot, AvatarImageFallback);
39
+ var AvatarFallbackRoot = ({
40
+ className,
41
+ ...props
42
+ }) => /* @__PURE__ */ jsx(
43
+ AvatarPrimitive.Fallback,
44
+ {
45
+ "data-slot": "avatar-fallback",
46
+ className: cn(
47
+ "bg-bg-tertiary flex size-full items-center justify-center rounded-full",
48
+ className
49
+ ),
50
+ ...props
51
+ }
52
+ );
53
+ var AvatarFallbackSSR = ({
54
+ className,
55
+ ...props
56
+ }) => /* @__PURE__ */ jsx(
57
+ "span",
58
+ {
59
+ "data-slot": "avatar-fallback",
60
+ className: cn(
61
+ "bg-bg-tertiary flex size-full items-center justify-center rounded-full",
62
+ className
63
+ ),
64
+ ...props
65
+ }
66
+ );
67
+ var AvatarFallback = createClientOnlyComponent(AvatarFallbackRoot, AvatarFallbackSSR);
68
+ function AvatarGroup({ children, className, spacing = "normal", max }) {
69
+ const spacingClasses = {
70
+ tight: "-space-x-1.5",
71
+ normal: "-space-x-1",
72
+ loose: "-space-x-0.45"
73
+ };
74
+ const childrenArray = React.Children.toArray(children);
75
+ const displayChildren = max ? childrenArray.slice(0, max) : childrenArray;
76
+ const remainingCount = max && childrenArray.length > max ? childrenArray.length - max : 0;
77
+ return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-row-reverse justify-end", spacingClasses[spacing], className), children: [
78
+ remainingCount > 0 && /* @__PURE__ */ jsx(
79
+ Avatar,
80
+ {
81
+ className: cn(
82
+ "ring-background relative cursor-default ring-2 transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120"
83
+ ),
84
+ children: /* @__PURE__ */ jsxs(AvatarFallback, { children: [
85
+ "+",
86
+ remainingCount
87
+ ] })
88
+ }
89
+ ),
90
+ displayChildren.reverse().map((child) => {
91
+ var _a;
92
+ if (React.isValidElement(child)) {
93
+ return React.cloneElement(
94
+ child,
95
+ {
96
+ className: cn(
97
+ `ring-background relative ring-2 transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120`,
98
+ (_a = child.props) == null ? void 0 : _a.className
99
+ )
100
+ }
101
+ );
102
+ }
103
+ return child;
104
+ })
105
+ ] });
106
+ }
107
+
108
+ export { Avatar, AvatarFallback, AvatarFallbackRoot, AvatarFallbackSSR, AvatarGroup, AvatarImage, AvatarImageFallback, AvatarImageRoot, AvatarRoot, AvatarSSRFallback };
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+
3
+ // src/utils/client-only.ts
4
+ function clientOnly(fn) {
5
+ if (typeof window !== "undefined") {
6
+ return fn();
7
+ }
8
+ return void 0;
9
+ }
10
+ function createClientOnlyComponent(Component, fallback) {
11
+ return function ClientOnlyWrapper(props) {
12
+ const [isClient2, setIsClient] = React.useState(false);
13
+ React.useEffect(() => {
14
+ setIsClient(true);
15
+ }, []);
16
+ if (!isClient2) {
17
+ return fallback ? React.createElement(fallback, props) : null;
18
+ }
19
+ return React.createElement(Component, props);
20
+ };
21
+ }
22
+ function isClient() {
23
+ return typeof window !== "undefined";
24
+ }
25
+ function isServer() {
26
+ return typeof window === "undefined";
27
+ }
28
+
29
+ export { clientOnly, createClientOnlyComponent, isClient, isServer };
@@ -1,7 +1,7 @@
1
1
  import { memo } from 'react';
2
2
  import { jsx } from 'react/jsx-runtime';
3
3
 
4
- // src/ui/theme-context/theme-script.tsx
4
+ // src/ui/theme/themeScript.tsx
5
5
  var themeScript = (defaultTheme, storageKey, attribute, themes, value, forcedTheme, enableSystem, enableColorScheme) => {
6
6
  const el = document.documentElement;
7
7
  const systemThemes = ["light", "dark"];
@@ -3,7 +3,7 @@
3
3
  var chunkEFIRD3FN_js = require('./chunk-EFIRD3FN.js');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
 
6
- var PACKAGE_VERSION = "0.0.26" ;
6
+ var PACKAGE_VERSION = "0.0.28" ;
7
7
  var PACKAGE_NAME = "@vuer-ai/vuer-uikit" ;
8
8
  function VersionBadge({
9
9
  className,
@@ -1,7 +1,7 @@
1
- import * as react from 'react';
1
+ import * as React from 'react';
2
2
  import { CursorContextType } from './types.mjs';
3
3
 
4
- declare const CursorContext: react.Context<CursorContextType>;
4
+ declare const CursorContext: React.Context<CursorContextType>;
5
5
  declare const useCursor: () => CursorContextType;
6
6
 
7
7
  export { CursorContext, useCursor };
@@ -1,7 +1,7 @@
1
- import * as react from 'react';
1
+ import * as React from 'react';
2
2
  import { CursorContextType } from './types.js';
3
3
 
4
- declare const CursorContext: react.Context<CursorContextType>;
4
+ declare const CursorContext: React.Context<CursorContextType>;
5
5
  declare const useCursor: () => CursorContextType;
6
6
 
7
7
  export { CursorContext, useCursor };
@@ -1,5 +1,5 @@
1
1
  import { EnhancedComponentProps } from './types.mjs';
2
- import * as react from 'react';
2
+ import * as React from 'react';
3
3
  import { Textarea } from '../ui/textarea.mjs';
4
4
  import { TabsProps } from '../ui/tabs.mjs';
5
5
  import { ButtonProps } from '../ui/button.mjs';
@@ -11,9 +11,9 @@ import 'class-variance-authority';
11
11
  import '@radix-ui/react-tabs';
12
12
  import '@radix-ui/react-select';
13
13
 
14
- declare const CursorButton: react.ForwardRefExoticComponent<Omit<EnhancedComponentProps<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>, "ref"> & react.RefAttributes<HTMLElement>>;
15
- declare const CursorTabs: react.ForwardRefExoticComponent<Omit<EnhancedComponentProps<TabsProps>, "ref"> & react.RefAttributes<HTMLElement>>;
16
- declare const CursorInputRoot: react.ForwardRefExoticComponent<Omit<EnhancedComponentProps<Omit<InputRootProps, "ref"> & react.RefAttributes<HTMLInputElement>>, "ref"> & react.RefAttributes<HTMLElement>>;
14
+ declare const CursorButton: React.ForwardRefExoticComponent<Omit<EnhancedComponentProps<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, "ref"> & React.RefAttributes<HTMLElement>>;
15
+ declare const CursorTabs: React.ForwardRefExoticComponent<Omit<EnhancedComponentProps<TabsProps>, "ref"> & React.RefAttributes<HTMLElement>>;
16
+ declare const CursorInputRoot: React.ForwardRefExoticComponent<Omit<EnhancedComponentProps<Omit<InputRootProps, "ref"> & React.RefAttributes<HTMLInputElement>>, "ref"> & React.RefAttributes<HTMLElement>>;
17
17
  declare const CursorSelectTrigger: typeof SelectTrigger;
18
18
  declare const CursorTextarea: typeof Textarea;
19
19
 
@@ -1,5 +1,5 @@
1
1
  import { EnhancedComponentProps } from './types.js';
2
- import * as react from 'react';
2
+ import * as React from 'react';
3
3
  import { Textarea } from '../ui/textarea.js';
4
4
  import { TabsProps } from '../ui/tabs.js';
5
5
  import { ButtonProps } from '../ui/button.js';
@@ -11,9 +11,9 @@ import 'class-variance-authority';
11
11
  import '@radix-ui/react-tabs';
12
12
  import '@radix-ui/react-select';
13
13
 
14
- declare const CursorButton: react.ForwardRefExoticComponent<Omit<EnhancedComponentProps<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>, "ref"> & react.RefAttributes<HTMLElement>>;
15
- declare const CursorTabs: react.ForwardRefExoticComponent<Omit<EnhancedComponentProps<TabsProps>, "ref"> & react.RefAttributes<HTMLElement>>;
16
- declare const CursorInputRoot: react.ForwardRefExoticComponent<Omit<EnhancedComponentProps<Omit<InputRootProps, "ref"> & react.RefAttributes<HTMLInputElement>>, "ref"> & react.RefAttributes<HTMLElement>>;
14
+ declare const CursorButton: React.ForwardRefExoticComponent<Omit<EnhancedComponentProps<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, "ref"> & React.RefAttributes<HTMLElement>>;
15
+ declare const CursorTabs: React.ForwardRefExoticComponent<Omit<EnhancedComponentProps<TabsProps>, "ref"> & React.RefAttributes<HTMLElement>>;
16
+ declare const CursorInputRoot: React.ForwardRefExoticComponent<Omit<EnhancedComponentProps<Omit<InputRootProps, "ref"> & React.RefAttributes<HTMLInputElement>>, "ref"> & React.RefAttributes<HTMLElement>>;
17
17
  declare const CursorSelectTrigger: typeof SelectTrigger;
18
18
  declare const CursorTextarea: typeof Textarea;
19
19
 
@@ -7,7 +7,8 @@ require('../chunk-6SRDWLQJ.js');
7
7
  require('../chunk-NP6VNT23.js');
8
8
  require('../chunk-UFHMEEGL.js');
9
9
  require('../chunk-XUKMVPUD.js');
10
- require('../chunk-XWS4SIB5.js');
10
+ require('../chunk-IJ7QXNIJ.js');
11
+ require('../chunk-7DRJLKR6.js');
11
12
  require('../chunk-ZX6K2A3O.js');
12
13
  require('../chunk-XXWQ4RVP.js');
13
14
  require('../chunk-CLTLT5XW.js');
@@ -5,7 +5,8 @@ import '../chunk-QPQFG2DZ.mjs';
5
5
  import '../chunk-ZT6G7STM.mjs';
6
6
  import '../chunk-44KW6PTD.mjs';
7
7
  import '../chunk-JOTWPUPW.mjs';
8
- import '../chunk-M4IVLZIH.mjs';
8
+ import '../chunk-CMYR6AOY.mjs';
9
+ import '../chunk-SBHPTJE4.mjs';
9
10
  import '../chunk-GXZZGOXX.mjs';
10
11
  import '../chunk-KTNZSZ5Y.mjs';
11
12
  import '../chunk-3FR3WKI4.mjs';
@@ -9,7 +9,8 @@ require('../chunk-6SRDWLQJ.js');
9
9
  require('../chunk-NP6VNT23.js');
10
10
  var chunkUFHMEEGL_js = require('../chunk-UFHMEEGL.js');
11
11
  require('../chunk-XUKMVPUD.js');
12
- require('../chunk-XWS4SIB5.js');
12
+ require('../chunk-IJ7QXNIJ.js');
13
+ require('../chunk-7DRJLKR6.js');
13
14
  require('../chunk-ZX6K2A3O.js');
14
15
  require('../chunk-XXWQ4RVP.js');
15
16
  require('../chunk-CLTLT5XW.js');
@@ -7,7 +7,8 @@ import '../chunk-QPQFG2DZ.mjs';
7
7
  import '../chunk-ZT6G7STM.mjs';
8
8
  export { withCursor } from '../chunk-44KW6PTD.mjs';
9
9
  import '../chunk-JOTWPUPW.mjs';
10
- import '../chunk-M4IVLZIH.mjs';
10
+ import '../chunk-CMYR6AOY.mjs';
11
+ import '../chunk-SBHPTJE4.mjs';
11
12
  import '../chunk-GXZZGOXX.mjs';
12
13
  import '../chunk-KTNZSZ5Y.mjs';
13
14
  import '../chunk-3FR3WKI4.mjs';
@@ -1,7 +1,7 @@
1
- import * as react from 'react';
1
+ import * as React from 'react';
2
2
  import { ComponentType } from 'react';
3
3
  import { EnhancedComponentProps } from './types.mjs';
4
4
 
5
- declare function withCursor<P extends object>(Component: ComponentType<P>): react.ForwardRefExoticComponent<react.PropsWithoutRef<EnhancedComponentProps<P>> & react.RefAttributes<HTMLElement>>;
5
+ declare function withCursor<P extends object>(Component: ComponentType<P>): React.ForwardRefExoticComponent<React.PropsWithoutRef<EnhancedComponentProps<P>> & React.RefAttributes<HTMLElement>>;
6
6
 
7
7
  export { withCursor };
@@ -1,7 +1,7 @@
1
- import * as react from 'react';
1
+ import * as React from 'react';
2
2
  import { ComponentType } from 'react';
3
3
  import { EnhancedComponentProps } from './types.js';
4
4
 
5
- declare function withCursor<P extends object>(Component: ComponentType<P>): react.ForwardRefExoticComponent<react.PropsWithoutRef<EnhancedComponentProps<P>> & react.RefAttributes<HTMLElement>>;
5
+ declare function withCursor<P extends object>(Component: ComponentType<P>): React.ForwardRefExoticComponent<React.PropsWithoutRef<EnhancedComponentProps<P>> & React.RefAttributes<HTMLElement>>;
6
6
 
7
7
  export { withCursor };
package/dist/index.css CHANGED
@@ -14,7 +14,7 @@
14
14
  @property --tw-exit-scale { syntax:"*";inherits:false;initial-value:1 }
15
15
  @property --tw-exit-translate-x { syntax:"*";inherits:false;initial-value:0 }
16
16
  @property --tw-exit-translate-y { syntax:"*";inherits:false;initial-value:0 }
17
- @theme inline { --animation-delay-0: 0s; --animation-delay-75: 75ms; --animation-delay-100: .1s; --animation-delay-150: .15s; --animation-delay-200: .2s; --animation-delay-300: .3s; --animation-delay-500: .5s; --animation-delay-700: .7s; --animation-delay-1000: 1s; --animation-repeat-0: 0; --animation-repeat-1: 1; --animation-repeat-infinite: infinite; --animation-direction-normal: normal; --animation-direction-reverse: reverse; --animation-direction-alternate: alternate; --animation-direction-alternate-reverse: alternate-reverse; --animation-fill-mode-none: none; --animation-fill-mode-forwards: forwards; --animation-fill-mode-backwards: backwards; --animation-fill-mode-both: both; --percentage-0: 0; --percentage-5: .05; --percentage-10: .1; --percentage-15: .15; --percentage-20: .2; --percentage-25: .25; --percentage-30: .3; --percentage-35: .35; --percentage-40: .4; --percentage-45: .45; --percentage-50: .5; --percentage-55: .55; --percentage-60: .6; --percentage-65: .65; --percentage-70: .7; --percentage-75: .75; --percentage-80: .8; --percentage-85: .85; --percentage-90: .9; --percentage-95: .95; --percentage-100: 1; --percentage-translate-full: 1; --animate-in: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-out: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes enter { from { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); }}@keyframes exit { to { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); }}--animate-accordion-down: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))ease-out; --animate-accordion-up: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))ease-out; --animate-collapsible-down: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))ease-out; --animate-collapsible-up: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))ease-out; @keyframes accordion-down { from { height: 0; }to { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,auto)))); }}@keyframes accordion-up { from { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,auto)))); }to { height: 0; }}@keyframes collapsible-down { from { height: 0; }to { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }}@keyframes collapsible-up { from { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }to { height: 0; }}--animate-caret-blink: caret-blink 1.25s ease-out infinite; @keyframes caret-blink { 0%,70%,100% { opacity: 1; }20%,50% { opacity: 0; }} }
17
+ @theme inline { --animation-delay-0: 0s; --animation-delay-75: 75ms; --animation-delay-100: .1s; --animation-delay-150: .15s; --animation-delay-200: .2s; --animation-delay-300: .3s; --animation-delay-500: .5s; --animation-delay-700: .7s; --animation-delay-1000: 1s; --animation-repeat-0: 0; --animation-repeat-1: 1; --animation-repeat-infinite: infinite; --animation-direction-normal: normal; --animation-direction-reverse: reverse; --animation-direction-alternate: alternate; --animation-direction-alternate-reverse: alternate-reverse; --animation-fill-mode-none: none; --animation-fill-mode-forwards: forwards; --animation-fill-mode-backwards: backwards; --animation-fill-mode-both: both; --percentage-0: 0; --percentage-5: .05; --percentage-10: .1; --percentage-15: .15; --percentage-20: .2; --percentage-25: .25; --percentage-30: .3; --percentage-35: .35; --percentage-40: .4; --percentage-45: .45; --percentage-50: .5; --percentage-55: .55; --percentage-60: .6; --percentage-65: .65; --percentage-70: .7; --percentage-75: .75; --percentage-80: .8; --percentage-85: .85; --percentage-90: .9; --percentage-95: .95; --percentage-100: 1; --percentage-translate-full: 1; --animate-in: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-out: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes enter { from { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); }}@keyframes exit { to { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); }}--animate-accordion-down: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-accordion-up: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-down: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-up: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes accordion-down { from { height: 0; }to { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,auto)))); }}@keyframes accordion-up { from { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,auto)))); }to { height: 0; }}@keyframes collapsible-down { from { height: 0; }to { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }}@keyframes collapsible-up { from { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }to { height: 0; }}--animate-caret-blink: caret-blink 1.25s ease-out infinite; @keyframes caret-blink { 0%,70%,100% { opacity: 1; }20%,50% { opacity: 0; }} }
18
18
  @utility animation-duration-* { --tw-animation-duration: calc(--value(number)*1ms); --tw-animation-duration: --value(--animation-duration-*,[duration],"initial",[*]); animation-duration: calc(--value(number)*1ms); animation-duration: --value(--animation-duration-*,[duration],"initial",[*]); }
19
19
  @utility delay-* { animation-delay: calc(--value(number)*1ms); animation-delay: --value(--animation-delay-*, [duration], "initial", [*]); --tw-animation-delay: calc(--value(number)*1ms); --tw-animation-delay: --value(--animation-delay-*, [duration], "initial", [*]); }
20
20
  @utility repeat-* { animation-iteration-count: --value(--animation-repeat-*, number, "initial", [*]); --tw-animation-iteration-count: --value(--animation-repeat-*, number, "initial", [*]); }
@@ -253,7 +253,7 @@
253
253
  --shadow-tertiary: var(--black-alpha-6);
254
254
  }
255
255
  @custom-variant liquid (&:is(.liquiddark *, .liquidlight *));
256
- @utility liquid-bg { background: linear-gradient(147.1deg, rgba(172, 172, 172, 0.1) 0%, rgba(74, 74, 74, 0.1) 105.28%) !important; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; }
256
+ @utility liquid-bg { background: linear-gradient(147.1deg, rgba(172, 172, 172, 0.1) 0%, rgba(74, 74, 74, 0.1) 105.28%) !important; backdrop-filter: blur(20px) !important; }
257
257
  @utility scrollbar-hide { scrollbar-width: none; &::-webkit-scrollbar { display: none; } }
258
258
  @theme inline { --font-sans: Inter; --font-number-input: "Fira Mono"; --color-brand-primary: var(--brand-primary); --color-brand-secondary: var(--brand-secondary); --color-brand-tertiary: var(--brand-tertiary); --color-text-highlight: var(--text-highlight); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-tertiary: var(--text-tertiary); --color-text-withbg: var(--text-withbg); --color-bg-primary: var(--bg-primary); --color-bg-secondary: var(--bg-secondary); --color-bg-tertiary: var(--bg-tertiary); --color-bg-quaternary: var(--bg-quaternary); --color-bg-mask: var(--bg-mask); --color-icon-highlight: var(--icon-highlight); --color-icon-primary: var(--icon-primary); --color-icon-secondary: var(--icon-secondary); --color-icon-tertiary: var(--icon-tertiary); --color-icon-withbg: var(--icon-withbg); --color-danger-primary: var(--danger-primary); --color-danger-secondary: var(--danger-secondary); --color-danger-tertiary: var(--danger-tertiary); --color-accent-warning: var(--accent-warning); --color-accent-success: var(--accent-success); --color-line-primary: var(--line-primary); --color-line-secondary: var(--line-secondary); --color-shadow-primary: var(--shadow-primary); --color-shadow-secondary: var(--shadow-secondary); --radius-uk-xs: var(--radius); --radius-uk-sm: calc(var(--radius) + 2px); --radius-uk-md: calc(var(--radius) + 4px); --radius-uk-lg: calc(var(--radius) + 8px); --radius-uk-xl: calc(var(--radius) + 12px); --spacing-xxs: calc(var(--spacing) - 2px); --spacing-xs: var(--spacing); --spacing-sm: calc(var(--spacing) + 2px); --spacing-md: calc(var(--spacing) + 4px); --spacing-lg: calc(var(--spacing) + 8px); --spacing-xl: calc(var(--spacing) + 12px); --text-uk-xs: 11px; --text-uk-sm: 12px; --text-uk-md: 14px; --text-uk-lg: 16px; --text-uk-xl: 18px; --text-uk-xxl: 20px; --leading-uk-xs: 14px; --leading-uk-sm: 16px; --leading-uk-md: 20px; --leading-uk-lg: 24px; --leading-uk-xl: 28px; --leading-uk-xxl: 32px; }
259
259
  .vk-toast,