@pelatform/ui 1.6.0 → 2.1.0

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 (126) hide show
  1. package/README.md +360 -5
  2. package/dist/animation.d.ts +6 -379
  3. package/dist/animation.js +2 -1750
  4. package/dist/base.d.ts +1 -651
  5. package/dist/base.js +2 -5554
  6. package/dist/components.d.ts +1 -2944
  7. package/dist/components.js +2 -2719
  8. package/dist/css/color/gray.css +105 -0
  9. package/dist/css/color/neutral.css +105 -0
  10. package/dist/css/color/slate.css +105 -0
  11. package/dist/css/color/stone.css +105 -0
  12. package/dist/css/color/zinc.css +105 -0
  13. package/dist/css/styles/style-lyra.css +1335 -0
  14. package/dist/css/styles/style-maia.css +1360 -0
  15. package/dist/css/styles/style-mira.css +1362 -0
  16. package/dist/css/styles/style-nova.css +1360 -0
  17. package/dist/css/styles/style-vega.css +1356 -0
  18. package/dist/hooks.d.ts +1 -1172
  19. package/dist/hooks.js +2 -664
  20. package/dist/index.d.ts +1 -318
  21. package/dist/index.js +3 -229
  22. package/dist/radix.d.ts +1 -0
  23. package/dist/radix.js +4 -0
  24. package/dist/style.css +2 -0
  25. package/package.json +82 -136
  26. package/LICENSE +0 -21
  27. package/css/components/apexcharts.css +0 -101
  28. package/css/components/book.css +0 -19
  29. package/css/components/extra.css +0 -12
  30. package/css/components/image-input.css +0 -51
  31. package/css/components/leaflet.css +0 -25
  32. package/css/components/patterns.css +0 -34
  33. package/css/components/rating.css +0 -89
  34. package/css/components/scrollable.css +0 -118
  35. package/css/components/theme-transition.css +0 -51
  36. package/css/theme.css +0 -238
  37. package/dist/animation.cjs +0 -1752
  38. package/dist/animation.d.cts +0 -379
  39. package/dist/aria.cjs +0 -139
  40. package/dist/aria.d.cts +0 -31
  41. package/dist/aria.d.ts +0 -31
  42. package/dist/aria.js +0 -139
  43. package/dist/badge-BtI4BMea.d.cts +0 -33
  44. package/dist/badge-BtI4BMea.d.ts +0 -33
  45. package/dist/base.cjs +0 -5556
  46. package/dist/base.d.cts +0 -651
  47. package/dist/chunk-3N75YA6Q.cjs +0 -60
  48. package/dist/chunk-7472NIIL.cjs +0 -40
  49. package/dist/chunk-BXUKTDPN.cjs +0 -576
  50. package/dist/chunk-CD2BCCQU.js +0 -180
  51. package/dist/chunk-CJXIPSTG.cjs +0 -10
  52. package/dist/chunk-CTHRAJQZ.js +0 -1522
  53. package/dist/chunk-D373YKDA.js +0 -196
  54. package/dist/chunk-EZW5GNS4.js +0 -6
  55. package/dist/chunk-HILACSFA.cjs +0 -1522
  56. package/dist/chunk-HR3R6KKM.js +0 -40
  57. package/dist/chunk-HW52LCWN.js +0 -22
  58. package/dist/chunk-I46SELBA.cjs +0 -22
  59. package/dist/chunk-J4JGE3U5.cjs +0 -180
  60. package/dist/chunk-RQHJBTEU.js +0 -10
  61. package/dist/chunk-SK6SSJHC.js +0 -9
  62. package/dist/chunk-T74DBLYY.js +0 -60
  63. package/dist/chunk-TB6DU23O.js +0 -576
  64. package/dist/chunk-UP53DCYH.cjs +0 -6
  65. package/dist/chunk-ZBO5IAMA.cjs +0 -196
  66. package/dist/chunk-ZDR3OZ7Z.cjs +0 -9
  67. package/dist/colors-CUDWvz1g.d.cts +0 -42
  68. package/dist/colors-CUDWvz1g.d.ts +0 -42
  69. package/dist/components-CidsRcc3.d.cts +0 -46
  70. package/dist/components-CidsRcc3.d.ts +0 -46
  71. package/dist/components.cjs +0 -2721
  72. package/dist/components.d.cts +0 -2944
  73. package/dist/default.cjs +0 -8931
  74. package/dist/default.d.cts +0 -1322
  75. package/dist/default.d.ts +0 -1322
  76. package/dist/default.js +0 -8931
  77. package/dist/hooks.cjs +0 -666
  78. package/dist/hooks.d.cts +0 -1172
  79. package/dist/index.cjs +0 -230
  80. package/dist/index.d.cts +0 -318
  81. package/dist/input-AwYIskrX.d.cts +0 -22
  82. package/dist/input-AwYIskrX.d.ts +0 -22
  83. package/dist/menu-GmSRfRGB.d.cts +0 -43
  84. package/dist/menu-GmSRfRGB.d.ts +0 -43
  85. package/dist/metafile-cjs.json +0 -1
  86. package/dist/metafile-esm.json +0 -1
  87. package/dist/re-export/cva.cjs +0 -6
  88. package/dist/re-export/cva.d.cts +0 -10
  89. package/dist/re-export/cva.d.ts +0 -10
  90. package/dist/re-export/cva.js +0 -6
  91. package/dist/re-export/motion.cjs +0 -2
  92. package/dist/re-export/motion.d.cts +0 -1
  93. package/dist/re-export/motion.d.ts +0 -1
  94. package/dist/re-export/motion.js +0 -2
  95. package/dist/re-export/next-themes.cjs +0 -2
  96. package/dist/re-export/next-themes.d.cts +0 -1
  97. package/dist/re-export/next-themes.d.ts +0 -1
  98. package/dist/re-export/next-themes.js +0 -2
  99. package/dist/re-export/react-day-picker.cjs +0 -2
  100. package/dist/re-export/react-day-picker.d.cts +0 -1
  101. package/dist/re-export/react-day-picker.d.ts +0 -1
  102. package/dist/re-export/react-day-picker.js +0 -2
  103. package/dist/re-export/react-hook-form.cjs +0 -2
  104. package/dist/re-export/react-hook-form.d.cts +0 -1
  105. package/dist/re-export/react-hook-form.d.ts +0 -1
  106. package/dist/re-export/react-hook-form.js +0 -2
  107. package/dist/re-export/resolver.cjs +0 -2
  108. package/dist/re-export/resolver.d.cts +0 -1
  109. package/dist/re-export/resolver.d.ts +0 -1
  110. package/dist/re-export/resolver.js +0 -2
  111. package/dist/re-export/sonner.cjs +0 -2
  112. package/dist/re-export/sonner.d.cts +0 -1
  113. package/dist/re-export/sonner.d.ts +0 -1
  114. package/dist/re-export/sonner.js +0 -2
  115. package/dist/re-export/tanstack-query.cjs +0 -2
  116. package/dist/re-export/tanstack-query.d.cts +0 -1
  117. package/dist/re-export/tanstack-query.d.ts +0 -1
  118. package/dist/re-export/tanstack-query.js +0 -2
  119. package/dist/re-export/tanstack-table.cjs +0 -2
  120. package/dist/re-export/tanstack-table.d.cts +0 -1
  121. package/dist/re-export/tanstack-table.d.ts +0 -1
  122. package/dist/re-export/tanstack-table.js +0 -2
  123. package/dist/re-export/zod.cjs +0 -2
  124. package/dist/re-export/zod.d.cts +0 -1
  125. package/dist/re-export/zod.d.ts +0 -1
  126. package/dist/re-export/zod.js +0 -2
@@ -1,60 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/hooks/use-copy-to-clipboard.ts
2
- var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react);
3
- function useCopyToClipboard({ timeout = 2e3, onCopy } = {}) {
4
- const [copied, setCopied] = React.useState(false);
5
- const copy = React.useCallback(
6
- (value) => {
7
- if (typeof window === "undefined" || !_optionalChain([navigator, 'access', _ => _.clipboard, 'optionalAccess', _2 => _2.writeText])) {
8
- console.warn("Clipboard API not supported in this environment");
9
- return;
10
- }
11
- if (!value) {
12
- console.warn("Cannot copy empty value to clipboard");
13
- return;
14
- }
15
- navigator.clipboard.writeText(value).then(
16
- () => {
17
- setCopied(true);
18
- if (onCopy) {
19
- onCopy();
20
- }
21
- setTimeout(() => {
22
- setCopied(false);
23
- }, timeout);
24
- },
25
- (error) => {
26
- console.error("Failed to copy text to clipboard:", error);
27
- }
28
- );
29
- },
30
- [timeout, onCopy]
31
- );
32
- return {
33
- /** Whether text was recently copied (true for timeout duration) */
34
- copied,
35
- /** Function to copy text to clipboard */
36
- copy
37
- };
38
- }
39
-
40
- // src/hooks/use-mobile.ts
41
-
42
- var DEFAULT_MOBILE_BREAKPOINT = 1024;
43
- function useIsMobile(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {
44
- const [isMobile, setIsMobile] = React2.useState(void 0);
45
- React2.useEffect(() => {
46
- const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
47
- const onChange = () => {
48
- setIsMobile(window.innerWidth < breakpoint);
49
- };
50
- mql.addEventListener("change", onChange);
51
- setIsMobile(window.innerWidth < breakpoint);
52
- return () => mql.removeEventListener("change", onChange);
53
- }, [breakpoint]);
54
- return !!isMobile;
55
- }
56
-
57
-
58
-
59
-
60
- exports.useCopyToClipboard = useCopyToClipboard; exports.useIsMobile = useIsMobile;
@@ -1,40 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/utils/assets-url.ts
2
- function getAssetsUrl(path) {
3
- const baseUrl = "https://assets.pelatform.com";
4
- return `${baseUrl}/${path}`;
5
- }
6
- function getFlagUrl(flag) {
7
- const flagCode = flag.toLowerCase();
8
- return `${getAssetsUrl("media/flags")}/${flagCode}.svg`;
9
- }
10
-
11
- // src/lib/analytics.ts
12
- var googleTrackEvent = ({ name, properties }) => {
13
- if (!name || typeof name !== "string" || name.trim().length === 0) {
14
- console.warn("Analytics: Event name is required and must be a non-empty string");
15
- return;
16
- }
17
- if (properties && typeof properties !== "object") {
18
- console.warn("Analytics: Properties must be an object");
19
- return;
20
- }
21
- try {
22
- if (typeof window !== "undefined" && window.gtag) {
23
- window.gtag("event", name.trim(), {
24
- ...properties,
25
- // GA4 recommended parameters
26
- event_category: _optionalChain([properties, 'optionalAccess', _ => _.category]) || "engagement",
27
- event_label: _optionalChain([properties, 'optionalAccess', _2 => _2.label]),
28
- value: _optionalChain([properties, 'optionalAccess', _3 => _3.value])
29
- });
30
- }
31
- } catch (error) {
32
- console.error("Analytics: Failed to track event", { name, error });
33
- }
34
- };
35
-
36
-
37
-
38
-
39
-
40
- exports.getAssetsUrl = getAssetsUrl; exports.getFlagUrl = getFlagUrl; exports.googleTrackEvent = googleTrackEvent;
@@ -1,576 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true});'use client';
2
-
3
-
4
-
5
- var _chunkCJXIPSTGcjs = require('./chunk-CJXIPSTG.cjs');
6
-
7
- // src/ui/default/input.tsx
8
- var _classvarianceauthority = require('class-variance-authority');
9
- var _jsxruntime = require('react/jsx-runtime');
10
- var inputVariants = _classvarianceauthority.cva.call(void 0,
11
- `
12
- flex w-full bg-background border border-input shadow-xs shadow-black/5 transition-[color,box-shadow] text-foreground placeholder:text-muted-foreground/80
13
- focus-visible:ring-ring/30 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px]
14
- disabled:cursor-not-allowed disabled:opacity-60
15
- [[readonly]]:bg-muted/80 [[readonly]]:cursor-not-allowed
16
- file:h-full [[type=file]]:py-0 file:border-solid file:border-input file:bg-transparent
17
- file:font-medium file:not-italic file:text-foreground file:p-0 file:border-0 file:border-e
18
- aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/20
19
- `,
20
- {
21
- variants: {
22
- variant: {
23
- lg: "h-10 px-4 text-sm rounded-md file:pe-4 file:me-4",
24
- md: "h-9 px-3 text-sm rounded-md file:pe-3 file:me-3",
25
- sm: "h-8 px-2.5 text-xs rounded-md file:pe-2.5 file:me-2.5"
26
- }
27
- },
28
- defaultVariants: {
29
- variant: "md"
30
- }
31
- }
32
- );
33
- var inputAddonVariants = _classvarianceauthority.cva.call(void 0,
34
- "flex items-center shrink-0 justify-center bg-muted border border-input shadow-xs shadow-[rgba(0,0,0,0.05)] text-secondary-foreground [&_svg]:text-secondary-foreground/60",
35
- {
36
- variants: {
37
- variant: {
38
- lg: "rounded-md h-10 min-w-10 px-4 text-sm [&_svg:not([class*=size-])]:size-4.5",
39
- md: "rounded-md h-9 min-w-9 px-3 text-sm [&_svg:not([class*=size-])]:size-4.5",
40
- sm: "rounded-md h-8 min-w-7 text-xs px-2.5 [&_svg:not([class*=size-])]:size-3.5"
41
- },
42
- mode: {
43
- default: "",
44
- icon: "px-0 justify-center"
45
- }
46
- },
47
- defaultVariants: {
48
- variant: "md",
49
- mode: "default"
50
- }
51
- }
52
- );
53
- var inputGroupVariants = _classvarianceauthority.cva.call(void 0,
54
- `
55
- flex items-stretch
56
- **:data-[slot=input]:grow
57
- [&_[data-slot=input-addon]:has(+[data-slot=input])]:rounded-e-none [&_[data-slot=input-addon]:has(+[data-slot=input])]:border-e-0
58
- [&_[data-slot=input-addon]:has(+[data-slot=datefield])]:rounded-e-none [&_[data-slot=input-addon]:has(+[data-slot=datefield])]:border-e-0
59
- [&_[data-slot=input]+[data-slot=input-addon]]:rounded-s-none [&_[data-slot=input]+[data-slot=input-addon]]:border-s-0
60
- [&_[data-slot=input-addon]:has(+[data-slot=button])]:rounded-e-none
61
- [&_[data-slot=input]+[data-slot=button]]:rounded-s-none
62
- [&_[data-slot=button]+[data-slot=input]]:rounded-s-none
63
- [&_[data-slot=input-addon]+[data-slot=input]]:rounded-s-none
64
- [&_[data-slot=input-addon]+[data-slot=datefield]]:**:data-[slot=input]:rounded-s-none
65
- [&_[data-slot=datefield]:has(+[data-slot=input-addon])]:**:data-[slot=input]:rounded-e-none
66
- [&_[data-slot=input]:has(+[data-slot=button])]:rounded-e-none
67
- [&_[data-slot=input]:has(+[data-slot=input-addon])]:rounded-e-none
68
- **:data-[slot=datefield]:grow
69
- [&_[data-slot=datefield]+[data-slot=input-addon]]:rounded-s-none
70
- [&_[data-slot=datefield]+[data-slot=input-addon]]:border-s-0
71
- [&_[data-slot=datefield]:has(~[data-slot=input-addon])]:**:data-[slot=input]:rounded-e-none
72
- [&_[data-slot=datefield]~[data-slot=input-addon]]:rounded-s-none
73
- `,
74
- {
75
- variants: {},
76
- defaultVariants: {}
77
- }
78
- );
79
- var inputWrapperVariants = _classvarianceauthority.cva.call(void 0,
80
- `
81
- flex items-center gap-1.5
82
- has-focus-visible:ring-ring/30
83
- has-focus-visible:border-ring
84
- has-focus-visible:outline-none
85
- has-focus-visible:ring-[3px]
86
-
87
- **:data-[slot=datefield]:grow
88
- **:data-[slot=input]:data-focus-within:ring-transparent
89
- **:data-[slot=input]:data-focus-within:ring-0
90
- **:data-[slot=input]:data-focus-within:border-0
91
- **:data-[slot=input]:flex
92
- **:data-[slot=input]:w-full
93
- **:data-[slot=input]:outline-none
94
- **:data-[slot=input]:transition-colors
95
- **:data-[slot=input]:text-foreground
96
- **:data-[slot=input]:placeholder:text-muted-foreground
97
- **:data-[slot=input]:border-0
98
- **:data-[slot=input]:bg-transparent
99
- **:data-[slot=input]:p-0
100
- **:data-[slot=input]:shadow-none
101
- **:data-[slot=input]:focus-visible:ring-0
102
- **:data-[slot=input]:h-auto
103
- **:data-[slot=input]:disabled:cursor-not-allowed
104
- **:data-[slot=input]:disabled:opacity-50
105
-
106
- [&_svg]:text-muted-foreground
107
- [&_svg]:shrink-0
108
-
109
- has-aria-invalid:border-destructive/60
110
- has-aria-invalid:ring-destructive/10
111
- dark:has-aria-invalid:border-destructive
112
- dark:has-aria-invalid:ring-destructive/20
113
- `,
114
- {
115
- variants: {
116
- variant: {
117
- sm: "gap-1.25 [&_svg:not([class*=size-])]:size-3.5",
118
- md: "gap-1.5 [&_svg:not([class*=size-])]:size-4",
119
- lg: "gap-1.5 [&_svg:not([class*=size-])]:size-4"
120
- }
121
- },
122
- defaultVariants: {
123
- variant: "md"
124
- }
125
- }
126
- );
127
- function Input({
128
- className,
129
- type,
130
- variant,
131
- ...props
132
- }) {
133
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
134
- "input",
135
- {
136
- "data-slot": "input",
137
- type,
138
- className: _chunkCJXIPSTGcjs.cn.call(void 0, inputVariants({ variant }), className),
139
- ...props
140
- }
141
- );
142
- }
143
- function InputAddon({
144
- className,
145
- variant,
146
- mode,
147
- ...props
148
- }) {
149
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
150
- "div",
151
- {
152
- "data-slot": "input-addon",
153
- className: _chunkCJXIPSTGcjs.cn.call(void 0, inputAddonVariants({ variant, mode }), className),
154
- ...props
155
- }
156
- );
157
- }
158
- function InputGroup({
159
- className,
160
- ...props
161
- }) {
162
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "input-group", className: _chunkCJXIPSTGcjs.cn.call(void 0, inputGroupVariants(), className), ...props });
163
- }
164
- function InputWrapper({
165
- className,
166
- variant,
167
- ...props
168
- }) {
169
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
170
- "div",
171
- {
172
- "data-slot": "input-wrapper",
173
- className: _chunkCJXIPSTGcjs.cn.call(void 0, inputVariants({ variant }), inputWrapperVariants({ variant }), className),
174
- ...props
175
- }
176
- );
177
- }
178
-
179
- // src/ui/default/button.tsx
180
-
181
- var _lucidereact = require('lucide-react');
182
- var _radixui = require('radix-ui');
183
-
184
- var buttonVariants = _classvarianceauthority.cva.call(void 0,
185
- "cursor-pointer group whitespace-nowrap focus-visible:outline-hidden inline-flex items-center justify-center has-data-[arrow=true]:justify-between text-sm font-medium ring-offset-background transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0",
186
- {
187
- variants: {
188
- variant: {
189
- primary: "bg-primary text-primary-foreground hover:bg-primary/90 data-[state=open]:bg-primary/90",
190
- mono: "bg-zinc-950 text-white dark:bg-zinc-300 dark:text-black hover:bg-zinc-950/90 dark:hover:bg-zinc-300/90 data-[state=open]:bg-zinc-950/90 dark:data-[state=open]:bg-zinc-300/90",
191
- destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 data-[state=open]:bg-destructive/90",
192
- secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 data-[state=open]:bg-secondary/90",
193
- outline: "bg-background text-accent-foreground border border-input hover:bg-accent data-[state=open]:bg-accent",
194
- dashed: "text-accent-foreground border border-input border-dashed bg-background hover:bg-accent hover:text-accent-foreground data-[state=open]:text-accent-foreground",
195
- ghost: "text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
196
- dim: "text-muted-foreground hover:text-foreground data-[state=open]:text-foreground",
197
- foreground: "",
198
- inverse: ""
199
- },
200
- appearance: {
201
- default: "",
202
- ghost: ""
203
- },
204
- underline: {
205
- solid: "",
206
- dashed: ""
207
- },
208
- underlined: {
209
- solid: "",
210
- dashed: ""
211
- },
212
- size: {
213
- lg: "h-10 px-4 text-sm gap-1.5 [&_svg:not([class*=size-])]:size-4",
214
- md: "h-9 px-3 gap-1.5 text-sm [&_svg:not([class*=size-])]:size-4",
215
- sm: "h-8 px-2.5 gap-1.25 text-xs [&_svg:not([class*=size-])]:size-3.5",
216
- xs: "h-7 px-2 gap-1 text-xs [&_svg:not([class*=size-])]:size-3.5",
217
- icon: "size-9 [&_svg:not([class*=size-])]:size-4 shrink-0"
218
- },
219
- autoHeight: {
220
- true: "",
221
- false: ""
222
- },
223
- radius: {
224
- md: "rounded-md",
225
- full: "rounded-full"
226
- },
227
- mode: {
228
- default: "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
229
- icon: "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 shrink-0",
230
- link: "text-primary h-auto p-0 bg-transparent rounded-none hover:bg-transparent data-[state=open]:bg-transparent",
231
- input: `
232
- justify-start font-normal hover:bg-background [&_svg]:transition-colors [&_svg]:hover:text-foreground data-[state=open]:bg-background
233
- focus-visible:border-ring focus-visible:outline-hidden focus-visible:ring-[3px] focus-visible:ring-ring/30
234
- [[data-state=open]>&]:border-ring [[data-state=open]>&]:outline-hidden [[data-state=open]>&]:ring-[3px]
235
- [[data-state=open]>&]:ring-ring/30
236
- aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/20
237
- in-data-[invalid=true]:border-destructive/60 in-data-[invalid=true]:ring-destructive/10 dark:in-data-[invalid=true]:border-destructive dark:in-data-[invalid=true]:ring-destructive/20
238
- `
239
- },
240
- placeholder: {
241
- true: "text-muted-foreground",
242
- false: ""
243
- }
244
- },
245
- compoundVariants: [
246
- // Icons opacity for default mode
247
- {
248
- variant: "ghost",
249
- mode: "default",
250
- className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
251
- },
252
- {
253
- variant: "outline",
254
- mode: "default",
255
- className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
256
- },
257
- {
258
- variant: "dashed",
259
- mode: "default",
260
- className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
261
- },
262
- {
263
- variant: "secondary",
264
- mode: "default",
265
- className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
266
- },
267
- // Icons opacity for default mode
268
- {
269
- variant: "outline",
270
- mode: "input",
271
- className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
272
- },
273
- {
274
- variant: "outline",
275
- mode: "icon",
276
- className: "[&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60"
277
- },
278
- // Auto height
279
- {
280
- size: "xs",
281
- autoHeight: true,
282
- className: "h-auto min-h-7"
283
- },
284
- {
285
- size: "md",
286
- autoHeight: true,
287
- className: "h-auto min-h-9"
288
- },
289
- {
290
- size: "sm",
291
- autoHeight: true,
292
- className: "h-auto min-h-8"
293
- },
294
- {
295
- size: "lg",
296
- autoHeight: true,
297
- className: "h-auto min-h-10"
298
- },
299
- // Shadow support
300
- {
301
- variant: "primary",
302
- mode: "default",
303
- appearance: "default",
304
- className: "shadow-xs shadow-black/5"
305
- },
306
- {
307
- variant: "mono",
308
- mode: "default",
309
- appearance: "default",
310
- className: "shadow-xs shadow-black/5"
311
- },
312
- {
313
- variant: "secondary",
314
- mode: "default",
315
- appearance: "default",
316
- className: "shadow-xs shadow-black/5"
317
- },
318
- {
319
- variant: "outline",
320
- mode: "default",
321
- appearance: "default",
322
- className: "shadow-xs shadow-black/5"
323
- },
324
- {
325
- variant: "dashed",
326
- mode: "default",
327
- appearance: "default",
328
- className: "shadow-xs shadow-black/5"
329
- },
330
- {
331
- variant: "destructive",
332
- mode: "default",
333
- appearance: "default",
334
- className: "shadow-xs shadow-black/5"
335
- },
336
- // Shadow support
337
- {
338
- variant: "primary",
339
- mode: "icon",
340
- appearance: "default",
341
- className: "shadow-xs shadow-black/5"
342
- },
343
- {
344
- variant: "mono",
345
- mode: "icon",
346
- appearance: "default",
347
- className: "shadow-xs shadow-black/5"
348
- },
349
- {
350
- variant: "secondary",
351
- mode: "icon",
352
- appearance: "default",
353
- className: "shadow-xs shadow-black/5"
354
- },
355
- {
356
- variant: "outline",
357
- mode: "icon",
358
- appearance: "default",
359
- className: "shadow-xs shadow-black/5"
360
- },
361
- {
362
- variant: "dashed",
363
- mode: "icon",
364
- appearance: "default",
365
- className: "shadow-xs shadow-black/5"
366
- },
367
- {
368
- variant: "destructive",
369
- mode: "icon",
370
- appearance: "default",
371
- className: "shadow-xs shadow-black/5"
372
- },
373
- // Link
374
- {
375
- variant: "primary",
376
- mode: "link",
377
- underline: "solid",
378
- className: "font-medium text-primary hover:text-primary/90 [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-solid"
379
- },
380
- {
381
- variant: "primary",
382
- mode: "link",
383
- underline: "dashed",
384
- className: "font-medium text-primary hover:text-primary/90 [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-dashed decoration-1"
385
- },
386
- {
387
- variant: "primary",
388
- mode: "link",
389
- underlined: "solid",
390
- className: "font-medium text-primary hover:text-primary/90 [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-solid"
391
- },
392
- {
393
- variant: "primary",
394
- mode: "link",
395
- underlined: "dashed",
396
- className: "font-medium text-primary hover:text-primary/90 [&_svg]:opacity-60 underline underline-offset-4 decoration-dashed decoration-1"
397
- },
398
- {
399
- variant: "inverse",
400
- mode: "link",
401
- underline: "solid",
402
- className: "font-medium text-inherit [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-solid"
403
- },
404
- {
405
- variant: "inverse",
406
- mode: "link",
407
- underline: "dashed",
408
- className: "font-medium text-inherit [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-dashed decoration-1"
409
- },
410
- {
411
- variant: "inverse",
412
- mode: "link",
413
- underlined: "solid",
414
- className: "font-medium text-inherit [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-solid"
415
- },
416
- {
417
- variant: "inverse",
418
- mode: "link",
419
- underlined: "dashed",
420
- className: "font-medium text-inherit [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-dashed decoration-1"
421
- },
422
- {
423
- variant: "foreground",
424
- mode: "link",
425
- underline: "solid",
426
- className: "font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-solid"
427
- },
428
- {
429
- variant: "foreground",
430
- mode: "link",
431
- underline: "dashed",
432
- className: "font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 hover:underline hover:underline-offset-4 hover:decoration-dashed decoration-1"
433
- },
434
- {
435
- variant: "foreground",
436
- mode: "link",
437
- underlined: "solid",
438
- className: "font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-solid"
439
- },
440
- {
441
- variant: "foreground",
442
- mode: "link",
443
- underlined: "dashed",
444
- className: "font-medium text-foreground [&_svg:not([role=img]):not([class*=text-])]:opacity-60 underline underline-offset-4 decoration-dashed decoration-1"
445
- },
446
- // Ghost
447
- {
448
- variant: "primary",
449
- appearance: "ghost",
450
- className: "bg-transparent text-primary/90 hover:bg-primary/5 data-[state=open]:bg-primary/5"
451
- },
452
- {
453
- variant: "destructive",
454
- appearance: "ghost",
455
- className: "bg-transparent text-destructive/90 hover:bg-destructive/5 data-[state=open]:bg-destructive/5"
456
- },
457
- {
458
- variant: "ghost",
459
- mode: "icon",
460
- className: "text-muted-foreground"
461
- },
462
- // Size
463
- {
464
- size: "xs",
465
- mode: "icon",
466
- className: "w-7 h-7 p-0 [[&_svg:not([class*=size-])]:size-3.5"
467
- },
468
- {
469
- size: "sm",
470
- mode: "icon",
471
- className: "w-8 h-8 p-0 [[&_svg:not([class*=size-])]:size-3.5"
472
- },
473
- {
474
- size: "md",
475
- mode: "icon",
476
- className: "w-9 h-9 p-0 [&_svg:not([class*=size-])]:size-4"
477
- },
478
- {
479
- size: "icon",
480
- className: "w-9 h-9 p-0 [&_svg:not([class*=size-])]:size-4"
481
- },
482
- {
483
- size: "lg",
484
- mode: "icon",
485
- className: "w-10 h-10 p-0 [&_svg:not([class*=size-])]:size-4"
486
- },
487
- // Input mode
488
- {
489
- mode: "input",
490
- placeholder: true,
491
- variant: "outline",
492
- className: "font-normal text-muted-foreground"
493
- },
494
- {
495
- mode: "input",
496
- variant: "outline",
497
- size: "sm",
498
- className: "gap-1.25"
499
- },
500
- {
501
- mode: "input",
502
- variant: "outline",
503
- size: "md",
504
- className: "gap-1.5"
505
- },
506
- {
507
- mode: "input",
508
- variant: "outline",
509
- size: "lg",
510
- className: "gap-1.5"
511
- }
512
- ],
513
- defaultVariants: {
514
- variant: "primary",
515
- mode: "default",
516
- size: "md",
517
- radius: "md",
518
- appearance: "default"
519
- }
520
- }
521
- );
522
- function Button({
523
- className,
524
- selected,
525
- variant,
526
- radius,
527
- appearance,
528
- mode,
529
- size,
530
- autoHeight,
531
- underlined,
532
- underline,
533
- asChild = false,
534
- placeholder = false,
535
- ...props
536
- }) {
537
- const Comp = asChild ? _radixui.Slot.Slot : "button";
538
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
539
- Comp,
540
- {
541
- "data-slot": "button",
542
- className: _chunkCJXIPSTGcjs.cn.call(void 0,
543
- buttonVariants({
544
- variant,
545
- size,
546
- radius,
547
- appearance,
548
- mode,
549
- autoHeight,
550
- placeholder,
551
- underlined,
552
- underline,
553
- className
554
- }),
555
- asChild && props.disabled && "pointer-events-none opacity-50"
556
- ),
557
- ...selected && { "data-state": "open" },
558
- ...props
559
- }
560
- );
561
- }
562
- function ButtonArrow({ icon: Icon = _lucidereact.ChevronDown, className, ...props }) {
563
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { "data-slot": "button-arrow", className: _chunkCJXIPSTGcjs.cn.call(void 0, "-me-1 ms-auto", className), ...props });
564
- }
565
-
566
-
567
-
568
-
569
-
570
-
571
-
572
-
573
-
574
-
575
-
576
- exports.inputVariants = inputVariants; exports.inputAddonVariants = inputAddonVariants; exports.Input = Input; exports.InputAddon = InputAddon; exports.InputGroup = InputGroup; exports.InputWrapper = InputWrapper; exports.buttonVariants = buttonVariants; exports.Button = Button; exports.ButtonArrow = ButtonArrow;