@luxfi/ui 8.2.7 → 8.2.8

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 (240) hide show
  1. package/dist/3d-model-viewer.cjs +25 -421
  2. package/dist/3d-model-viewer.js +20 -416
  3. package/dist/accordion.cjs +3 -10
  4. package/dist/accordion.js +2 -10
  5. package/dist/advanced-navigation-bar.cjs +5 -401
  6. package/dist/advanced-navigation-bar.js +5 -401
  7. package/dist/ai-agents.cjs +45 -890
  8. package/dist/ai-agents.js +8 -834
  9. package/dist/ai-assistant.cjs +13 -740
  10. package/dist/ai-assistant.js +10 -738
  11. package/dist/ai-chat.cjs +24 -770
  12. package/dist/ai-chat.js +18 -765
  13. package/dist/ai-code.cjs +67 -923
  14. package/dist/ai-code.js +49 -905
  15. package/dist/ai-playground.cjs +25 -801
  16. package/dist/ai-playground.js +18 -795
  17. package/dist/ai-tools.cjs +22 -767
  18. package/dist/ai-tools.js +15 -761
  19. package/dist/ai-vision.cjs +41 -993
  20. package/dist/ai-vision.js +30 -983
  21. package/dist/ai-voice-settings.cjs +35 -1006
  22. package/dist/ai-voice-settings.js +32 -1004
  23. package/dist/ai-voice.cjs +51 -1024
  24. package/dist/ai-voice.js +9 -963
  25. package/dist/alert.cjs +11 -129
  26. package/dist/alert.js +8 -127
  27. package/dist/announcement.cjs +6 -402
  28. package/dist/announcement.js +6 -402
  29. package/dist/app-switcher-navigation-bar.cjs +5 -401
  30. package/dist/app-switcher-navigation-bar.js +5 -401
  31. package/dist/apple-cards-carousel.cjs +84 -480
  32. package/dist/apple-cards-carousel.js +19 -415
  33. package/dist/auth.cjs +10 -387
  34. package/dist/auth.js +7 -385
  35. package/dist/avatar.cjs +2 -9
  36. package/dist/avatar.js +2 -10
  37. package/dist/badge.cjs +8 -228
  38. package/dist/badge.js +5 -210
  39. package/dist/button.cjs +14 -67
  40. package/dist/button.js +12 -65
  41. package/dist/chrome.cjs +29 -493
  42. package/dist/chrome.js +9 -474
  43. package/dist/code-block.cjs +16 -664
  44. package/dist/code-block.js +13 -662
  45. package/dist/code-compare.cjs +28 -1302
  46. package/dist/code-compare.js +18 -1293
  47. package/dist/code-diff.cjs +21 -669
  48. package/dist/code-diff.js +17 -666
  49. package/dist/code-editor.cjs +13 -409
  50. package/dist/code-editor.js +12 -408
  51. package/dist/code-explorer.cjs +14 -456
  52. package/dist/code-explorer.js +13 -456
  53. package/dist/code-preview.cjs +31 -983
  54. package/dist/code-preview.js +23 -976
  55. package/dist/code-snippet.cjs +19 -667
  56. package/dist/code-snippet.js +14 -663
  57. package/dist/code-terminal.cjs +24 -485
  58. package/dist/code-terminal.js +19 -481
  59. package/dist/collapsible.cjs +13 -347
  60. package/dist/collapsible.js +11 -330
  61. package/dist/color-picker.cjs +8 -450
  62. package/dist/color-picker.js +7 -450
  63. package/dist/combobox.cjs +6 -402
  64. package/dist/combobox.js +6 -402
  65. package/dist/communication-navigation-bar.cjs +7 -403
  66. package/dist/communication-navigation-bar.js +5 -401
  67. package/dist/dashboard-navigation-bar.cjs +6 -402
  68. package/dist/dashboard-navigation-bar.js +5 -401
  69. package/dist/dialog-stack.cjs +5 -401
  70. package/dist/dialog-stack.js +5 -401
  71. package/dist/dialog.cjs +13 -70
  72. package/dist/dialog.js +13 -70
  73. package/dist/drawer.cjs +23 -99
  74. package/dist/drawer.js +19 -96
  75. package/dist/e-commerce-navigation-bar.cjs +7 -403
  76. package/dist/e-commerce-navigation-bar.js +5 -401
  77. package/dist/editor.cjs +9 -405
  78. package/dist/editor.js +6 -402
  79. package/dist/iam.cjs +2 -123
  80. package/dist/iam.js +1 -122
  81. package/dist/icon-button.cjs +2 -56
  82. package/dist/icon-button.js +1 -55
  83. package/dist/identity.cjs +28 -242
  84. package/dist/identity.js +20 -235
  85. package/dist/image-crop.cjs +10 -406
  86. package/dist/image-crop.js +7 -403
  87. package/dist/image.cjs +14 -83
  88. package/dist/image.js +13 -67
  89. package/dist/index.cjs +1868 -38770
  90. package/dist/index.js +174 -38320
  91. package/dist/input-group.cjs +3 -10
  92. package/dist/input-group.js +2 -10
  93. package/dist/item.cjs +2 -27
  94. package/dist/item.js +1 -22
  95. package/dist/kanban.cjs +25 -751
  96. package/dist/kanban.js +15 -742
  97. package/dist/limelight-nav.cjs +10 -452
  98. package/dist/limelight-nav.js +9 -452
  99. package/dist/link.cjs +11 -80
  100. package/dist/link.js +6 -60
  101. package/dist/lux.config.cjs +14 -32
  102. package/dist/lux.config.js +3 -26
  103. package/dist/menu.cjs +5 -13
  104. package/dist/menu.js +1 -9
  105. package/dist/message-dock.cjs +5 -401
  106. package/dist/message-dock.js +5 -401
  107. package/dist/mini-calendar.cjs +7 -403
  108. package/dist/mini-calendar.js +6 -402
  109. package/dist/music-player.cjs +30 -528
  110. package/dist/music-player.js +22 -520
  111. package/dist/next.cjs +8 -89
  112. package/dist/next.js +3 -86
  113. package/dist/popover.cjs +17 -74
  114. package/dist/popover.js +16 -73
  115. package/dist/progress-circle.cjs +3 -10
  116. package/dist/progress-circle.js +2 -10
  117. package/dist/provider.cjs +7 -176
  118. package/dist/provider.js +4 -174
  119. package/dist/select.cjs +36 -89
  120. package/dist/select.js +35 -88
  121. package/dist/sidebar.cjs +22 -493
  122. package/dist/sidebar.js +17 -489
  123. package/dist/site/commerce/ui/context.cjs +9 -214
  124. package/dist/site/commerce/ui/context.js +6 -215
  125. package/dist/site/components/analytics.cjs +2 -42
  126. package/dist/site/components/analytics.js +1 -37
  127. package/dist/site/components/auth/callback.cjs +2 -8
  128. package/dist/site/components/auth/callback.js +1 -7
  129. package/dist/site/components/auth/login-panel.cjs +15 -74
  130. package/dist/site/components/auth/login-panel.js +12 -73
  131. package/dist/site/components/auth/login.cjs +2 -6
  132. package/dist/site/components/auth/login.js +1 -5
  133. package/dist/site/components/auth/widget.cjs +2 -6
  134. package/dist/site/components/auth/widget.js +1 -5
  135. package/dist/site/components/commerce/bag-button.cjs +2 -3
  136. package/dist/site/components/commerce/bag-button.js +2 -3
  137. package/dist/site/components/commerce/buy-button.cjs +2 -11
  138. package/dist/site/components/commerce/buy-button.js +1 -10
  139. package/dist/site/components/commerce/checkout-button.cjs +2 -3
  140. package/dist/site/components/commerce/checkout-button.js +2 -3
  141. package/dist/site/components/commerce/checkout-panel/desktop-cp.cjs +15 -173
  142. package/dist/site/components/commerce/checkout-panel/desktop-cp.js +14 -174
  143. package/dist/site/components/commerce/checkout-panel/index.cjs +9 -400
  144. package/dist/site/components/commerce/checkout-panel/index.js +10 -403
  145. package/dist/site/components/commerce/checkout-panel/mobile-cp.cjs +15 -236
  146. package/dist/site/components/commerce/checkout-panel/mobile-cp.js +13 -237
  147. package/dist/site/components/commerce/desktop-bag-popup.cjs +7 -8
  148. package/dist/site/components/commerce/desktop-bag-popup.js +3 -8
  149. package/dist/site/components/commerce/drawer/index.cjs +15 -289
  150. package/dist/site/components/commerce/drawer/index.js +10 -290
  151. package/dist/site/components/commerce/drawer/micro.cjs +8 -115
  152. package/dist/site/components/commerce/drawer/micro.js +4 -115
  153. package/dist/site/components/commerce/drawer/shell.cjs +2 -10
  154. package/dist/site/components/commerce/drawer/shell.js +2 -10
  155. package/dist/site/components/contact-dialog/index.cjs +6 -69
  156. package/dist/site/components/contact-dialog/index.js +7 -71
  157. package/dist/site/components/drawer-margin.cjs +2 -10
  158. package/dist/site/components/drawer-margin.js +2 -10
  159. package/dist/site/components/footer.cjs +11 -81
  160. package/dist/site/components/footer.js +8 -80
  161. package/dist/site/components/header/desktop.cjs +18 -374
  162. package/dist/site/components/header/desktop.js +12 -355
  163. package/dist/site/components/header/index.cjs +9 -674
  164. package/dist/site/components/header/index.js +8 -657
  165. package/dist/site/components/header/mobile-bag-drawer.cjs +6 -71
  166. package/dist/site/components/header/mobile-bag-drawer.js +5 -74
  167. package/dist/site/components/header/mobile-nav-menu-ai.cjs +25 -28
  168. package/dist/site/components/header/mobile-nav-menu-ai.js +24 -27
  169. package/dist/site/components/header/mobile-nav-menu-item.cjs +6 -60
  170. package/dist/site/components/header/mobile-nav-menu-item.js +6 -61
  171. package/dist/site/components/header/mobile-nav-menu.cjs +7 -110
  172. package/dist/site/components/header/mobile-nav-menu.js +7 -112
  173. package/dist/site/components/header/mobile.cjs +48 -330
  174. package/dist/site/components/header/mobile.js +42 -330
  175. package/dist/site/components/icons/index.cjs +34 -35
  176. package/dist/site/components/icons/index.js +5 -33
  177. package/dist/site/components/index.cjs +118 -1961
  178. package/dist/site/components/index.js +23 -1951
  179. package/dist/site/components/mini-chart/index.cjs +7 -90
  180. package/dist/site/components/mini-chart/index.js +1 -92
  181. package/dist/site/components/mini-chart/wrapper.cjs +7 -76
  182. package/dist/site/components/mini-chart/wrapper.js +4 -77
  183. package/dist/site/components/not-found/index.cjs +9 -819
  184. package/dist/site/components/not-found/index.js +8 -802
  185. package/dist/site/components/security/index.cjs +9 -819
  186. package/dist/site/components/security/index.js +8 -802
  187. package/dist/site/next/analytics/index.cjs +16 -49
  188. package/dist/site/next/analytics/index.js +3 -49
  189. package/dist/site/next/analytics/pixel-analytics.cjs +23 -8
  190. package/dist/site/next/analytics/pixel-analytics.js +4 -8
  191. package/dist/site/next/index.cjs +13 -140
  192. package/dist/site/next/index.js +2 -140
  193. package/dist/site/root-layout/index.cjs +12 -1435
  194. package/dist/site/root-layout/index.css +0 -133
  195. package/dist/site/root-layout/index.js +12 -1416
  196. package/dist/site/site-def/footer/community.cjs +11 -27
  197. package/dist/site/site-def/footer/community.js +2 -18
  198. package/dist/site/site-def/footer/index.cjs +38 -218
  199. package/dist/site/site-def/footer/index.js +14 -215
  200. package/dist/site/site-def/index.cjs +28 -620
  201. package/dist/site/site-def/index.js +3 -624
  202. package/dist/table.cjs +20 -338
  203. package/dist/table.js +19 -338
  204. package/dist/tabs.cjs +3 -10
  205. package/dist/tabs.js +1 -9
  206. package/dist/tag.cjs +9 -270
  207. package/dist/tag.js +6 -268
  208. package/dist/tags.cjs +6 -314
  209. package/dist/tags.js +5 -314
  210. package/dist/textarea.cjs +4 -50
  211. package/dist/textarea.js +3 -49
  212. package/dist/tooltip.cjs +15 -34
  213. package/dist/tooltip.js +13 -33
  214. package/dist/vite.cjs +3 -82
  215. package/dist/vite.js +1 -80
  216. package/package.json +1 -1
  217. package/dist/index.css +0 -132
  218. package/dist/site/components/auth/login-panel.css +0 -4
  219. package/dist/site/components/commerce/bag-button.css +0 -4
  220. package/dist/site/components/commerce/checkout-button.css +0 -4
  221. package/dist/site/components/commerce/checkout-panel/desktop-cp.css +0 -132
  222. package/dist/site/components/commerce/checkout-panel/index.css +0 -132
  223. package/dist/site/components/commerce/checkout-panel/mobile-cp.css +0 -132
  224. package/dist/site/components/commerce/desktop-bag-popup.css +0 -4
  225. package/dist/site/components/commerce/drawer/index.css +0 -132
  226. package/dist/site/components/commerce/drawer/micro.css +0 -4
  227. package/dist/site/components/header/desktop.css +0 -4
  228. package/dist/site/components/header/index.css +0 -132
  229. package/dist/site/components/header/mobile-bag-drawer.css +0 -4
  230. package/dist/site/components/header/mobile-nav-menu-ai.css +0 -132
  231. package/dist/site/components/header/mobile-nav-menu-item.css +0 -132
  232. package/dist/site/components/header/mobile-nav-menu.css +0 -132
  233. package/dist/site/components/header/mobile.css +0 -132
  234. package/dist/site/components/icons/index.css +0 -4
  235. package/dist/site/components/index.css +0 -132
  236. package/dist/site/components/not-found/index.css +0 -132
  237. package/dist/site/components/security/index.css +0 -132
  238. package/dist/site/site-def/footer/community.css +0 -4
  239. package/dist/site/site-def/footer/index.css +0 -4
  240. package/dist/site/site-def/index.css +0 -4
package/dist/ai-code.js CHANGED
@@ -1,874 +1,18 @@
1
1
  'use client';
2
- import { Box, sx, cn, variants, css, ScrollArea, Avatar, AvatarFallback, ScrollBar, TooltipProvider, Tooltip as Tooltip$2, TooltipTrigger, TooltipContent, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem, Tabs, TabsList, TabsTrigger, TabsContent } from '@hanzo/ui';
3
- import * as React10 from 'react';
4
- import React10__default, { Children, createElement } from 'react';
2
+ import { variants, Box, cn, css, sx, ScrollArea, Avatar, AvatarFallback, ScrollBar, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem, Tabs, TabsList, TabsTrigger, TabsContent } from '@hanzo/ui';
3
+ import * as React from 'react';
5
4
  import Editor from '@monaco-editor/react';
6
- import { Shield, Zap, GitCompare, FileText, TestTube, Bug, Code, Eye, Wand2, MessageSquare, Bot, User, Loader2, Send, FileCode, Check, EyeOff, Settings, ChevronDown, Download, Upload, GripVertical } from 'lucide-react';
5
+ import { Shield, Zap, GitCompare, FileText, TestTube, Bug, Code, Eye, Wand2, MessageSquare, Bot, User, Loader2, Send, FileCode, Check, EyeOff, Settings, ChevronDown, Download, Upload } from 'lucide-react';
7
6
  import { useTheme } from 'next-themes';
8
7
  import { toast } from 'sonner';
9
- import { TooltipGroup, Tooltip as Tooltip$1, Text, XStack, styled, View, Progress as Progress$1, Separator as Separator$1, Input as Input$1, TextArea } from '@hanzo/gui';
10
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
11
- import { useClickAway } from '@uidotdev/usehooks';
12
- import * as ResizablePrimitive from 'react-resizable-panels';
8
+ import { Badge } from './badge.js';
9
+ import { Button } from './button.js';
10
+ import { Progress } from './progress.js';
11
+ import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './resizable.js';
12
+ import { Separator } from './separator.js';
13
+ import { Textarea } from './textarea.js';
14
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
13
15
 
14
- var SKELETON_CLASSES = "lux-skeleton rounded-sm";
15
- var Skeleton = React10.forwardRef(
16
- function Skeleton2(props, ref) {
17
- const { loading = true, asChild, className, children, style, ...rest } = props;
18
- if (!loading) {
19
- if (asChild && React10.isValidElement(children)) return children;
20
- return /* @__PURE__ */ jsx(Box, { ref, className, style, ...rest, children });
21
- }
22
- return /* @__PURE__ */ jsx(
23
- "div",
24
- {
25
- ref,
26
- "data-loading": true,
27
- ...sx(
28
- SKELETON_CLASSES,
29
- asChild || children ? "[&_*]:invisible" : "min-h-5",
30
- className
31
- ),
32
- style,
33
- ...rest,
34
- children
35
- }
36
- );
37
- }
38
- );
39
- React10.forwardRef(
40
- function SkeletonCircle2(props, ref) {
41
- const { size = 40, loading = true, className, ...rest } = props;
42
- const dimension = typeof size === "number" ? `${size}px` : size;
43
- return /* @__PURE__ */ jsx(
44
- Skeleton,
45
- {
46
- ref,
47
- loading,
48
- ...sx("rounded-full shrink-0", className),
49
- style: { width: dimension, height: dimension, ...rest.style },
50
- ...rest
51
- }
52
- );
53
- }
54
- );
55
- React10.forwardRef(
56
- function SkeletonText2(props, ref) {
57
- const { noOfLines = 3, loading = true, className, ...rest } = props;
58
- return /* @__PURE__ */ jsx(Box, { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
59
- Skeleton,
60
- {
61
- loading,
62
- ...sx(cn("h-4", index === noOfLines - 1 && "max-w-[80%]"))
63
- },
64
- index
65
- )) });
66
- }
67
- );
68
- var ink = (children, Wrap = Text, props = {}) => {
69
- let hasText = false;
70
- Children.forEach(children, (child) => {
71
- if (typeof child === "string" || typeof child === "number") hasText = true;
72
- });
73
- if (!hasText) return children;
74
- return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
75
- };
76
- var TOUCH_PX = 1024;
77
- function useBelow(px) {
78
- const [below, setBelow] = React10.useState(false);
79
- React10.useEffect(() => {
80
- const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
81
- const apply = () => setBelow(mql.matches);
82
- apply();
83
- mql.addEventListener("change", apply);
84
- return () => mql.removeEventListener("change", apply);
85
- }, [px]);
86
- return below;
87
- }
88
- var useIsTouch = () => useBelow(TOUCH_PX);
89
- function mapPlacement(p) {
90
- if (!p) return void 0;
91
- return p;
92
- }
93
- var Tooltip = React10.forwardRef(
94
- function Tooltip2(props, ref) {
95
- const {
96
- showArrow: showArrowProp,
97
- onOpenChange,
98
- variant,
99
- selected,
100
- children,
101
- disabled,
102
- disableOnMobile,
103
- content,
104
- contentProps,
105
- defaultOpen = false,
106
- triggerProps,
107
- closeDelay = 100,
108
- openDelay = 100,
109
- interactive,
110
- positioning
111
- } = props;
112
- const [open, setOpen] = React10.useState(defaultOpen);
113
- const timeoutRef = React10.useRef(null);
114
- const isMobile = useIsTouch();
115
- const handleOpenChange = React10.useCallback((nextOpen) => {
116
- setOpen(nextOpen);
117
- onOpenChange?.({ open: nextOpen });
118
- }, [onOpenChange]);
119
- const handleOpenChangeManual = React10.useCallback((nextOpen) => {
120
- timeoutRef.current && window.clearTimeout(timeoutRef.current);
121
- timeoutRef.current = window.setTimeout(() => {
122
- setOpen(nextOpen);
123
- onOpenChange?.({ open: nextOpen });
124
- }, nextOpen ? openDelay : closeDelay);
125
- }, [closeDelay, openDelay, onOpenChange]);
126
- const handleClickAway = React10.useCallback(() => {
127
- if (open) handleOpenChangeManual(false);
128
- }, [open, handleOpenChangeManual]);
129
- const triggerRef = useClickAway(handleClickAway);
130
- const handleTriggerClick = React10.useCallback(() => {
131
- handleOpenChangeManual(!open);
132
- }, [handleOpenChangeManual, open]);
133
- const handleContentClick = React10.useCallback((event) => {
134
- event.stopPropagation();
135
- if (interactive) {
136
- const closestLink = event.target?.closest("a");
137
- if (closestLink) {
138
- handleOpenChangeManual(false);
139
- }
140
- }
141
- }, [interactive, handleOpenChangeManual]);
142
- React10.useEffect(() => {
143
- return () => {
144
- if (timeoutRef.current) {
145
- clearTimeout(timeoutRef.current);
146
- }
147
- };
148
- }, []);
149
- if (disabled || disableOnMobile && isMobile) return children;
150
- const defaultShowArrow = variant === "popover" ? false : true;
151
- const showArrow = showArrowProp !== void 0 ? showArrowProp : defaultShowArrow;
152
- const isPopover = variant === "popover";
153
- const placement = mapPlacement(positioning?.placement) ?? "top";
154
- const offset = positioning?.offset?.mainAxis ?? 4;
155
- return /* @__PURE__ */ jsx(TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxs(
156
- Tooltip$1,
157
- {
158
- open,
159
- onOpenChange: handleOpenChange,
160
- delay: { open: openDelay, close: closeDelay },
161
- placement,
162
- offset,
163
- unstyled: true,
164
- children: [
165
- /* @__PURE__ */ jsx(
166
- Tooltip$1.Trigger,
167
- {
168
- ref: triggerRef,
169
- asChild: true,
170
- ...isMobile ? { onClick: handleTriggerClick } : {},
171
- ...triggerProps,
172
- children
173
- }
174
- ),
175
- /* @__PURE__ */ jsxs(
176
- Tooltip$1.Content,
177
- {
178
- ref,
179
- unstyled: true,
180
- zIndex: 9999,
181
- overflow: "hidden",
182
- borderRadius: 8,
183
- paddingHorizontal: 12,
184
- paddingVertical: 8,
185
- maxWidth: isPopover ? 384 : 320,
186
- backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)",
187
- transition: "quick",
188
- enterStyle: { opacity: 0, scale: 0.95 },
189
- exitStyle: { opacity: 0, scale: 0.95 },
190
- ...isPopover ? {
191
- borderWidth: 1,
192
- borderColor: "var(--color-border-divider)",
193
- shadowColor: "var(--shadow-popover)"
194
- } : {},
195
- onClick: interactive ? handleContentClick : void 0,
196
- ...selected ? { "data-selected": true } : {},
197
- ...contentProps,
198
- children: [
199
- showArrow && /* @__PURE__ */ jsx(
200
- Tooltip$1.Arrow,
201
- {
202
- unstyled: true,
203
- backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)"
204
- }
205
- ),
206
- ink(content, void 0, {
207
- fontSize: 14,
208
- color: isPopover ? "var(--color-text-primary)" : "var(--color-tooltip-fg)"
209
- })
210
- ]
211
- }
212
- )
213
- ]
214
- }
215
- ) });
216
- }
217
- );
218
- function TruncatedTextTooltip({ label, children }) {
219
- return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
220
- }
221
- var SIZE = {
222
- sm: { padding: 4, height: 18, minHeight: 18 },
223
- md: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 24 },
224
- lg: { paddingHorizontal: 8, paddingVertical: 4, minHeight: 28 }
225
- };
226
- var SIZE_TEXT = {
227
- sm: { fontSize: 12, fontWeight: "500" },
228
- md: { fontSize: 14, fontWeight: "500" },
229
- lg: { fontSize: 14, fontWeight: "600" }
230
- };
231
- var COLOR_PALETTE = {
232
- gray: { bg: "var(--color-badge-gray-bg)", fg: "var(--color-badge-gray-fg)" },
233
- green: { bg: "var(--color-badge-green-bg)", fg: "var(--color-badge-green-fg)" },
234
- red: { bg: "var(--color-badge-red-bg)", fg: "var(--color-badge-red-fg)" },
235
- purple: { bg: "var(--color-badge-purple-bg)", fg: "var(--color-badge-purple-fg)" },
236
- orange: { bg: "var(--color-badge-orange-bg)", fg: "var(--color-badge-orange-fg)" },
237
- blue: { bg: "var(--color-badge-blue-bg)", fg: "var(--color-badge-blue-fg)" },
238
- yellow: { bg: "var(--color-badge-yellow-bg)", fg: "var(--color-badge-yellow-fg)" },
239
- teal: { bg: "var(--color-badge-teal-bg)", fg: "var(--color-badge-teal-fg)" },
240
- cyan: { bg: "var(--color-badge-cyan-bg)", fg: "var(--color-badge-cyan-fg)" },
241
- pink: { bg: "var(--color-badge-pink-bg)", fg: "var(--color-badge-pink-fg)" },
242
- purple_alt: { bg: "var(--color-badge-purple-alt-bg)", fg: "var(--color-badge-purple-alt-fg)" },
243
- blue_alt: { bg: "var(--color-badge-blue-alt-bg)", fg: "var(--color-badge-blue-alt-fg)" },
244
- bright_gray: { bg: "var(--color-badge-bright-gray-bg)", fg: "var(--color-badge-bright-gray-fg)" },
245
- bright_green: { bg: "var(--color-badge-bright-green-bg)", fg: "var(--color-badge-bright-green-fg)" },
246
- bright_red: { bg: "var(--color-badge-bright-red-bg)", fg: "var(--color-badge-bright-red-fg)" },
247
- bright_blue: { bg: "var(--color-badge-bright-blue-bg)", fg: "var(--color-badge-bright-blue-fg)" },
248
- bright_yellow: { bg: "var(--color-badge-bright-yellow-bg)", fg: "var(--color-badge-bright-yellow-fg)" },
249
- bright_teal: { bg: "var(--color-badge-bright-teal-bg)", fg: "var(--color-badge-bright-teal-fg)" },
250
- bright_cyan: { bg: "var(--color-badge-bright-cyan-bg)", fg: "var(--color-badge-bright-cyan-fg)" },
251
- bright_orange: { bg: "var(--color-badge-bright-orange-bg)", fg: "var(--color-badge-bright-orange-fg)" },
252
- bright_purple: { bg: "var(--color-badge-bright-purple-bg)", fg: "var(--color-badge-bright-purple-fg)" },
253
- bright_pink: { bg: "var(--color-badge-bright-pink-bg)", fg: "var(--color-badge-bright-pink-fg)" }
254
- };
255
- var TONE = {
256
- subtle: (p) => ({ backgroundColor: p.bg, color: p.fg, borderWidth: 0 }),
257
- solid: (p) => ({ backgroundColor: p.fg, color: p.bg, borderWidth: 0 }),
258
- outline: (p) => ({
259
- backgroundColor: "transparent",
260
- color: p.fg,
261
- borderWidth: 1,
262
- borderColor: p.fg
263
- })
264
- };
265
- var Badge = React10__default.forwardRef(
266
- function Badge2(props, ref) {
267
- const {
268
- loading,
269
- startElement,
270
- children,
271
- truncated = false,
272
- endElement,
273
- variant = "subtle",
274
- size = "md",
275
- colorPalette = "gray",
276
- className,
277
- style: badgeStyle,
278
- ...rest
279
- } = props;
280
- const palette = COLOR_PALETTE[colorPalette];
281
- const tone = TONE[variant](palette);
282
- const child = children ? (
283
- // `ellipsis` is gui Text's own built-in variant for single-line
284
- // truncation — it expands to the same overflow/text-overflow/
285
- // white-space/max-width rule Tailwind's `text-ellipsis` did, but
286
- // through the component's own variants (guaranteed to compile),
287
- // rather than naming each longhand as a separate style prop.
288
- /* @__PURE__ */ jsx(Text, { ellipsis: true, ...SIZE_TEXT[size], color: tone.color, children })
289
- ) : null;
290
- const childrenElement = truncated ? /* @__PURE__ */ jsx(TruncatedTextTooltip, { label: children, children: child }) : child;
291
- const badgeElement = /* @__PURE__ */ jsxs(
292
- XStack,
293
- {
294
- ref,
295
- render: /* @__PURE__ */ jsx("span", {}),
296
- display: "inline-flex",
297
- alignItems: "center",
298
- alignSelf: "flex-start",
299
- borderRadius: 2,
300
- gap: 4,
301
- maxWidth: "100%",
302
- userSelect: "text",
303
- ...SIZE[size],
304
- ...tone,
305
- className,
306
- style: badgeStyle,
307
- ...rest,
308
- children: [
309
- startElement,
310
- childrenElement,
311
- endElement
312
- ]
313
- }
314
- );
315
- if (loading) {
316
- return /* @__PURE__ */ jsx(Skeleton, { loading, asChild: true, children: badgeElement });
317
- }
318
- return badgeElement;
319
- }
320
- );
321
- var SpinnerFrame = styled(View, {
322
- name: "ButtonSpinner",
323
- render: /* @__PURE__ */ jsx("span", {}),
324
- width: 16,
325
- height: 16,
326
- borderRadius: 1e3,
327
- borderWidth: 2,
328
- borderColor: "currentColor",
329
- borderBottomColor: "transparent",
330
- borderLeftColor: "transparent"
331
- });
332
- function Spinner({ className }) {
333
- return /* @__PURE__ */ jsx(
334
- SpinnerFrame,
335
- {
336
- role: "status",
337
- "aria-label": "Loading",
338
- className: [
339
- "animate-spin",
340
- className
341
- ].filter(Boolean).join(" ")
342
- }
343
- );
344
- }
345
- var ButtonFrame = styled(View, {
346
- name: "LuxButton",
347
- render: /* @__PURE__ */ jsx("button", { type: "button" }),
348
- role: "button",
349
- tabIndex: 0,
350
- cursor: "pointer",
351
- userSelect: "none",
352
- display: "inline-flex",
353
- alignItems: "center",
354
- justifyContent: "center",
355
- gap: 0,
356
- overflow: "hidden",
357
- borderRadius: 6,
358
- // Whitespace nowrap via className since hanzogui doesn't have a direct token
359
- // Transition via className
360
- variants: {
361
- size: {
362
- "2xs": { paddingHorizontal: 8, height: 20, minWidth: 20, fontSize: 12, borderRadius: 4, gap: 4 },
363
- xs: { paddingHorizontal: 8, height: 24, minWidth: 24, fontSize: 14, borderRadius: 4, gap: 4 },
364
- sm: { paddingHorizontal: 12, height: 32, minWidth: 32, fontSize: 14, borderRadius: 6, gap: 4 },
365
- md: { paddingHorizontal: 12, height: 40, minWidth: 40, fontSize: 16, borderRadius: 6, gap: 8 }
366
- },
367
- disabled: {
368
- true: {
369
- opacity: 0.2,
370
- cursor: "not-allowed",
371
- pointerEvents: "none"
372
- }
373
- }
374
- },
375
- defaultVariants: {
376
- size: "md"
377
- }
378
- });
379
- var VARIANT_CLASSES = {
380
- solid: [
381
- "bg-[var(--color-button-solid-bg)] text-[var(--color-button-solid-text)]",
382
- "hover:bg-[var(--color-hover)]",
383
- "data-[expanded]:bg-[var(--color-hover)]"
384
- ].join(" "),
385
- solid_danger: [
386
- "bg-[var(--color-button-danger-bg)] text-[var(--color-button-danger-fg)]",
387
- "hover:bg-[var(--color-button-danger-bg-hover)]",
388
- "data-[expanded]:bg-[var(--color-button-danger-bg-hover)]"
389
- ].join(" "),
390
- outline: [
391
- "border-2 border-solid bg-transparent",
392
- "text-[var(--color-button-outline-fg)] border-[var(--color-button-outline-fg)]",
393
- "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]"
394
- ].join(" "),
395
- outline_danger: [
396
- "border-2 border-solid bg-transparent",
397
- "text-[var(--color-button-danger-bg)] border-[var(--color-button-danger-bg)]",
398
- "hover:bg-transparent hover:text-[var(--color-button-danger-bg-hover)] hover:border-[var(--color-button-danger-bg-hover)]"
399
- ].join(" "),
400
- dropdown: [
401
- "border-2 border-solid bg-transparent",
402
- "text-[var(--color-button-dropdown-fg)] border-[var(--color-button-dropdown-border)]",
403
- "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
404
- "data-[expanded]:bg-transparent data-[expanded]:text-[var(--color-hover)] data-[expanded]:border-[var(--color-hover)]",
405
- "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
406
- "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
407
- "data-[selected]:hover:text-[var(--color-hover)] data-[selected]:hover:border-transparent",
408
- "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
409
- ].join(" "),
410
- header: [
411
- "bg-transparent border-2 border-solid",
412
- "text-[var(--color-button-header-fg)] border-[var(--color-button-header-border)]",
413
- "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
414
- "data-[selected]:bg-[var(--color-button-header-bg-selected)]",
415
- "data-[selected]:text-[var(--color-button-header-fg-selected)] data-[selected]:border-transparent data-[selected]:border-0",
416
- "data-[selected]:hover:bg-[var(--color-button-header-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
417
- "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
418
- "data-[selected]:data-[highlighted]:bg-[var(--color-button-header-bg-highlighted)]",
419
- "data-[selected]:data-[highlighted]:text-[var(--color-button-header-fg-highlighted)]",
420
- "data-[selected]:data-[highlighted]:border-transparent data-[selected]:data-[highlighted]:border-0",
421
- "data-[selected]:data-[highlighted]:hover:bg-[var(--color-button-header-bg-highlighted)]",
422
- "data-[selected]:data-[highlighted]:hover:text-[var(--color-hover)]",
423
- "data-[selected]:data-[highlighted]:data-[expanded]:text-[var(--color-hover)]"
424
- ].join(" "),
425
- hero: [
426
- "bg-[var(--color-button-hero-bg)] text-[var(--color-button-hero-fg)]",
427
- "hover:bg-[var(--color-button-hero-bg-hover)] hover:text-[var(--color-button-hero-fg-hover)]",
428
- "data-[selected]:bg-[var(--color-button-hero-bg-selected)] data-[selected]:text-[var(--color-button-hero-fg-selected)]",
429
- "data-[selected]:hover:bg-[var(--color-button-hero-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
430
- "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
431
- ].join(" "),
432
- segmented: [
433
- "bg-transparent border-2 border-solid rounded-none",
434
- "text-[var(--color-button-segmented-fg)] border-[var(--color-selected-control-bg)]",
435
- "hover:text-[var(--color-hover)]",
436
- "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
437
- "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-selected-control-text)]",
438
- "[&:not(:last-child)]:border-r-0 data-[selected]:[&:not(:last-child)]:border-r-2",
439
- "data-[selected]+*:border-l-0",
440
- "first:rounded-l-md last:rounded-r-md"
441
- ].join(" "),
442
- plain: "bg-transparent text-inherit border-none hover:bg-transparent",
443
- subtle: [
444
- "bg-[var(--color-button-subtle-bg)] text-[var(--color-button-subtle-fg)]",
445
- "hover:bg-[var(--color-button-subtle-bg)] hover:text-[var(--color-hover)]",
446
- "disabled:bg-[var(--color-button-subtle-bg)] disabled:text-[var(--color-button-subtle-fg)]"
447
- ].join(" "),
448
- link: [
449
- "bg-transparent text-[var(--color-link-primary)] border-none font-normal",
450
- "px-0 h-auto",
451
- "hover:bg-transparent hover:text-[var(--color-link-primary-hover)]",
452
- "disabled:text-[var(--color-text-secondary)]"
453
- ].join(" "),
454
- icon_secondary: [
455
- "bg-transparent text-[var(--color-icon-secondary)] border-none",
456
- "hover:text-[var(--color-hover)]",
457
- "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
458
- "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
459
- "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
460
- "data-[expanded]:text-[var(--color-hover)]"
461
- ].join(" "),
462
- icon_background: [
463
- "bg-[var(--color-button-icon-background-bg)] text-[var(--color-icon-secondary)] border-none",
464
- "hover:text-[var(--color-hover)]",
465
- "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
466
- "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
467
- "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
468
- "data-[expanded]:text-[var(--color-hover)]"
469
- ].join(" "),
470
- pagination: [
471
- "border-2 border-solid bg-transparent",
472
- "text-[var(--color-button-pagination-fg)] border-[var(--color-button-pagination-border)]",
473
- "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
474
- "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
475
- "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
476
- "data-[selected]:hover:text-[var(--color-selected-control-text)] data-[selected]:hover:border-transparent"
477
- ].join(" ")
478
- };
479
- var BASE_CLASSES = "font-semibold whitespace-nowrap transition-colors duration-150";
480
- var SP = 4;
481
- function buildShimStyle(props) {
482
- const s = { ...props.style };
483
- if (props.mt !== void 0) s.marginTop = typeof props.mt === "number" ? `${props.mt * SP}px` : props.mt;
484
- if (props.ml !== void 0) s.marginLeft = typeof props.ml === "number" ? `${props.ml * SP}px` : props.ml;
485
- if (props.mr !== void 0) s.marginRight = typeof props.mr === "number" ? `${props.mr * SP}px` : props.mr;
486
- if (props.px !== void 0) {
487
- const v = typeof props.px === "number" ? `${props.px * SP}px` : props.px;
488
- s.paddingLeft = v;
489
- s.paddingRight = v;
490
- }
491
- if (props.py !== void 0) {
492
- const v = typeof props.py === "number" ? `${props.py * SP}px` : props.py;
493
- s.paddingTop = v;
494
- s.paddingBottom = v;
495
- }
496
- if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
497
- if (props.gap !== void 0) s.gap = typeof props.gap === "number" ? `${props.gap * SP}px` : props.gap;
498
- if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
499
- if (props.columnGap !== void 0) s.columnGap = typeof props.columnGap === "number" ? `${props.columnGap * SP}px` : props.columnGap;
500
- if (props.gridColumn !== void 0) s.gridColumn = typeof props.gridColumn === "number" ? String(props.gridColumn) : props.gridColumn;
501
- if (props.gridRow) s.gridRow = props.gridRow;
502
- if (props.justifySelf) s.justifySelf = props.justifySelf;
503
- if (props.alignSelf) s.alignSelf = props.alignSelf;
504
- if (props.h) s.height = props.h;
505
- if (props.w) s.width = props.w;
506
- if (props.display) s.display = props.display;
507
- if (props.borderBottomRightRadius !== void 0) s.borderBottomRightRadius = typeof props.borderBottomRightRadius === "number" ? `${props.borderBottomRightRadius}px` : props.borderBottomRightRadius;
508
- if (props.borderTopRightRadius !== void 0) s.borderTopRightRadius = typeof props.borderTopRightRadius === "number" ? `${props.borderTopRightRadius}px` : props.borderTopRightRadius;
509
- return Object.keys(s).length > 0 ? s : void 0;
510
- }
511
- var Button = React10.forwardRef(
512
- function Button2(props, ref) {
513
- const {
514
- className,
515
- variant = "solid",
516
- size = "md",
517
- asChild = false,
518
- loading = false,
519
- loadingText,
520
- loadingSkeleton = false,
521
- expanded,
522
- selected,
523
- highlighted,
524
- disabled,
525
- children,
526
- style: styleProp,
527
- // Strip Chakra style props
528
- mt,
529
- ml,
530
- mr,
531
- px,
532
- py,
533
- fontWeight,
534
- gap,
535
- flexShrink,
536
- columnGap,
537
- gridColumn,
538
- gridRow,
539
- justifySelf,
540
- alignSelf,
541
- textStyle: _textStyle,
542
- h,
543
- w,
544
- display,
545
- borderBottomRightRadius,
546
- borderTopRightRadius,
547
- ...rest
548
- } = props;
549
- const mergedStyle = buildShimStyle({
550
- style: styleProp,
551
- mt,
552
- ml,
553
- mr,
554
- px,
555
- py,
556
- fontWeight,
557
- gap,
558
- flexShrink,
559
- columnGap,
560
- gridColumn,
561
- gridRow,
562
- justifySelf,
563
- alignSelf,
564
- h,
565
- w,
566
- display,
567
- borderBottomRightRadius,
568
- borderTopRightRadius
569
- });
570
- const dataAttrs = {};
571
- if (expanded) dataAttrs["data-expanded"] = true;
572
- if (selected) dataAttrs["data-selected"] = true;
573
- if (highlighted) dataAttrs["data-highlighted"] = true;
574
- if (loadingSkeleton) dataAttrs["data-loading-skeleton"] = true;
575
- const isDisabled = !loadingSkeleton && (loading || disabled);
576
- const inner = loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
577
- /* @__PURE__ */ jsx(Spinner, {}),
578
- loadingText != null && /* @__PURE__ */ jsx("span", { style: { marginLeft: 8 }, children: loadingText })
579
- ] }) : children;
580
- const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.solid;
581
- const combinedClassName = [BASE_CLASSES, variantClass, className].filter(Boolean).join(" ");
582
- const button = /* @__PURE__ */ jsx(
583
- ButtonFrame,
584
- {
585
- ref,
586
- size,
587
- disabled: isDisabled || void 0,
588
- asChild: asChild || void 0,
589
- className: combinedClassName,
590
- style: mergedStyle,
591
- ...dataAttrs,
592
- ...rest,
593
- children: inner
594
- }
595
- );
596
- if (loadingSkeleton) {
597
- return /* @__PURE__ */ jsx(Skeleton, { loading: loadingSkeleton, asChild: true, ref, children: button });
598
- }
599
- return button;
600
- }
601
- );
602
- React10.forwardRef(
603
- function ButtonGroup2(props, ref) {
604
- const { className, ...rest } = props;
605
- return /* @__PURE__ */ jsx(
606
- Box,
607
- {
608
- ref,
609
- className: ["inline-flex", className].filter(Boolean).join(" "),
610
- role: "group",
611
- ...rest
612
- }
613
- );
614
- }
615
- );
616
- React10.forwardRef(
617
- function ButtonGroupRadio2(props, ref) {
618
- const {
619
- children,
620
- onChange,
621
- variant = "segmented",
622
- defaultValue,
623
- loading = false,
624
- equalWidth = false,
625
- className,
626
- ...rest
627
- } = props;
628
- const firstChildValue = React10.useMemo(() => {
629
- const firstChild = Array.isArray(children) ? children[0] : void 0;
630
- return typeof firstChild?.props.value === "string" ? firstChild.props.value : void 0;
631
- }, [children]);
632
- const [value, setValue] = React10.useState(defaultValue ?? firstChildValue);
633
- const handleItemClick = React10.useCallback((event) => {
634
- const v = event.currentTarget.value;
635
- setValue(v);
636
- onChange?.(v);
637
- }, [onChange]);
638
- const clonedChildren = React10.Children.map(children, (child) => {
639
- return React10.cloneElement(child, {
640
- onClick: handleItemClick,
641
- selected: value === child.props.value,
642
- variant
643
- });
644
- });
645
- const childrenLength = React10.Children.count(children);
646
- return /* @__PURE__ */ jsx(Skeleton, { loading, children: /* @__PURE__ */ jsx(
647
- Box,
648
- {
649
- ref,
650
- className: [
651
- "inline-flex gap-0",
652
- equalWidth ? "grid" : "",
653
- className
654
- ].filter(Boolean).join(" "),
655
- style: equalWidth ? { gridTemplateColumns: `repeat(${childrenLength}, 1fr)` } : void 0,
656
- role: "group",
657
- ...rest,
658
- children: clonedChildren
659
- }
660
- ) });
661
- }
662
- );
663
- var SIZE2 = {
664
- sm: 4,
665
- md: 8,
666
- lg: 12,
667
- xl: 16
668
- };
669
- function normalizeValue(value, min, max) {
670
- if (value == null) return 0;
671
- if (max <= min) return 0;
672
- return Math.round((value - min) / (max - min) * 100);
673
- }
674
- var Progress = React10.forwardRef(
675
- function Progress2(props, ref) {
676
- const {
677
- value,
678
- min = 0,
679
- max = 100,
680
- size = "md",
681
- color,
682
- trackProps,
683
- style,
684
- w,
685
- flex,
686
- ...rest
687
- } = props;
688
- const percent = normalizeValue(value, min, max);
689
- const trackStyle = {
690
- ...trackProps?.style,
691
- ...trackProps?.borderStartRadius !== void 0 && {
692
- borderStartStartRadius: trackProps.borderStartRadius,
693
- borderEndStartRadius: trackProps.borderStartRadius
694
- },
695
- ...trackProps?.borderEndRadius !== void 0 && {
696
- borderStartEndRadius: trackProps.borderEndRadius,
697
- borderEndEndRadius: trackProps.borderEndRadius
698
- }
699
- };
700
- const rootStyle = {
701
- position: "relative",
702
- ...style,
703
- ...w !== void 0 && { width: w === "full" ? "100%" : w },
704
- ...flex !== void 0 && { flex }
705
- };
706
- return /* @__PURE__ */ jsx(
707
- "div",
708
- {
709
- ref,
710
- style: rootStyle,
711
- ...rest,
712
- children: /* @__PURE__ */ jsx(
713
- Progress$1,
714
- {
715
- value: percent,
716
- max: 100,
717
- unstyled: true,
718
- className: trackProps?.className,
719
- width: "100%",
720
- overflow: "hidden",
721
- borderRadius: 9999,
722
- height: SIZE2[size],
723
- backgroundColor: "var(--color-progress-track)",
724
- style: trackStyle,
725
- children: /* @__PURE__ */ jsx(
726
- Progress$1.Indicator,
727
- {
728
- unstyled: true,
729
- transition: "slow",
730
- height: "100%",
731
- borderRadius: 9999,
732
- backgroundColor: color ? void 0 : "var(--color-progress-indicator)",
733
- style: {
734
- ...color && { backgroundColor: `var(--color-${color.replace(".", "-")}, ${color})` }
735
- }
736
- }
737
- )
738
- }
739
- )
740
- }
741
- );
742
- }
743
- );
744
- var ResizablePanelGroup = ({
745
- className,
746
- ...props
747
- }) => /* @__PURE__ */ jsx(
748
- ResizablePrimitive.PanelGroup,
749
- {
750
- className: cn(
751
- "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
752
- className
753
- ),
754
- ...props
755
- }
756
- );
757
- var ResizablePanel = ResizablePrimitive.Panel;
758
- var ResizableHandle = ({
759
- withHandle,
760
- className,
761
- ...props
762
- }) => /* @__PURE__ */ jsx(
763
- ResizablePrimitive.PanelResizeHandle,
764
- {
765
- className: cn(
766
- "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
767
- className
768
- ),
769
- ...props,
770
- children: withHandle && /* @__PURE__ */ jsx(Box, { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx(GripVertical, { style: css("h-2.5 w-2.5") }) })
771
- }
772
- );
773
- var WEIGHT = { xs: 0.5, sm: 1, md: 2, lg: 3 };
774
- var Separator = React10__default.forwardRef(
775
- function Separator2({ orientation = "horizontal", variant = "solid", size = "sm", ...rest }, ref) {
776
- const vertical = orientation === "vertical";
777
- return /* @__PURE__ */ jsx(
778
- Separator$1,
779
- {
780
- ref,
781
- vertical,
782
- role: "separator",
783
- "aria-orientation": orientation,
784
- borderWidth: 0,
785
- borderStyle: variant,
786
- borderColor: "var(--color-border-divider)",
787
- ...vertical ? { borderLeftWidth: WEIGHT[size], alignSelf: "stretch", height: "auto", width: 0 } : { borderTopWidth: WEIGHT[size], width: "100%" },
788
- ...rest
789
- }
790
- );
791
- }
792
- );
793
- var SIZE3 = {
794
- xs: { height: 24, paddingHorizontal: 8, fontSize: "$1", borderRadius: 4 },
795
- sm: { height: 32, paddingHorizontal: 12, fontSize: "$3", borderRadius: 6 },
796
- md: { height: 40, paddingHorizontal: 16, fontSize: "$5", borderRadius: 6 },
797
- lg: { height: 48, paddingHorizontal: 16, fontSize: "$6", borderRadius: 8 },
798
- "2xl": { height: 56, paddingHorizontal: 16, fontSize: "$7", borderRadius: 8 }
799
- };
800
- var VARIANT = {
801
- outline: { borderWidth: 1, borderStyle: "solid" },
802
- filled: { borderWidth: 0, backgroundColor: "var(--color-input-filled-bg)" },
803
- unstyled: { borderWidth: 0, backgroundColor: "transparent", padding: 0, height: "auto" }
804
- };
805
- var CONTROL = {
806
- width: "100%",
807
- outlineWidth: 0,
808
- backgroundColor: "var(--color-input-bg)",
809
- color: "var(--color-input-fg)",
810
- borderColor: "var(--color-input-border)",
811
- hoverStyle: { borderColor: "var(--color-input-border-hover)" },
812
- focusStyle: { borderColor: "var(--color-input-border-focus)" },
813
- disabledStyle: { opacity: 0.4, cursor: "not-allowed" }
814
- };
815
- var Input = React10__default.forwardRef(
816
- ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
817
- const handleChange = React10__default.useCallback(
818
- (event) => {
819
- onChange?.(event);
820
- onChangeText?.(event.target.value);
821
- },
822
- [onChange, onChangeText]
823
- );
824
- return /* @__PURE__ */ jsx(
825
- Input$1,
826
- {
827
- ref,
828
- unstyled: true,
829
- className: className ? `lux-control ${className}` : "lux-control",
830
- ...CONTROL,
831
- ...SIZE3[size],
832
- ...VARIANT[variant],
833
- ...rest,
834
- onChange: handleChange
835
- }
836
- );
837
- }
838
- );
839
- Input.displayName = "Input";
840
- var SIZE4 = {
841
- xs: { paddingHorizontal: 8, paddingVertical: 4, fontSize: "$1", borderRadius: 4 },
842
- sm: { paddingHorizontal: 12, paddingVertical: 8, fontSize: "$3", borderRadius: 6 },
843
- md: { paddingHorizontal: 16, paddingVertical: 8, fontSize: "$5", borderRadius: 6 },
844
- lg: { paddingHorizontal: 16, paddingVertical: 12, fontSize: "$6", borderRadius: 8 },
845
- "2xl": { paddingHorizontal: 16, paddingVertical: 12, fontSize: "$7", borderRadius: 8 }
846
- };
847
- var Textarea = React10__default.forwardRef(
848
- ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
849
- const handleChange = React10__default.useCallback(
850
- (event) => {
851
- onChange?.(event);
852
- onChangeText?.(event.target.value);
853
- },
854
- [onChange, onChangeText]
855
- );
856
- return /* @__PURE__ */ jsx(
857
- TextArea,
858
- {
859
- ref,
860
- unstyled: true,
861
- className: className ? `lux-control ${className}` : "lux-control",
862
- ...CONTROL,
863
- ...SIZE4[size],
864
- ...VARIANT[variant],
865
- ...rest,
866
- onChange: handleChange
867
- }
868
- );
869
- }
870
- );
871
- Textarea.displayName = "Textarea";
872
16
  var suggestionVariants = variants(
873
17
  "relative rounded-lg border p-3 transition-colors",
874
18
  {
@@ -907,7 +51,7 @@ var languagePatterns = {
907
51
  ruby: /\.rb$/,
908
52
  swift: /\.swift$/
909
53
  };
910
- var SecurityPanel = React10.forwardRef(({ issues, onFixIssue, className, ...props }, ref) => /* @__PURE__ */ jsxs(Box, { ref, className: cn("space-y-2", className), ...props, children: [
54
+ var SecurityPanel = React.forwardRef(({ issues, onFixIssue, className, ...props }, ref) => /* @__PURE__ */ jsxs(Box, { ref, className: cn("space-y-2", className), ...props, children: [
911
55
  /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
912
56
  /* @__PURE__ */ jsx(Shield, { style: css("h-4 w-4") }),
913
57
  /* @__PURE__ */ jsx(Box, { tag: "span", className: "font-medium", children: "Security Analysis" }),
@@ -970,7 +114,7 @@ var SecurityPanel = React10.forwardRef(({ issues, onFixIssue, className, ...prop
970
114
  )) })
971
115
  ] }));
972
116
  SecurityPanel.displayName = "SecurityPanel";
973
- var SuggestionsPanel = React10.forwardRef(({ suggestions, onApplySuggestion, className, ...props }, ref) => /* @__PURE__ */ jsxs(Box, { ref, className: cn("space-y-2", className), ...props, children: [
117
+ var SuggestionsPanel = React.forwardRef(({ suggestions, onApplySuggestion, className, ...props }, ref) => /* @__PURE__ */ jsxs(Box, { ref, className: cn("space-y-2", className), ...props, children: [
974
118
  /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
975
119
  /* @__PURE__ */ jsx(Zap, { style: css("h-4 w-4") }),
976
120
  /* @__PURE__ */ jsx(Box, { tag: "span", className: "font-medium", children: "AI Suggestions" })
@@ -1017,7 +161,7 @@ var SuggestionsPanel = React10.forwardRef(({ suggestions, onApplySuggestion, cla
1017
161
  }) })
1018
162
  ] }));
1019
163
  SuggestionsPanel.displayName = "SuggestionsPanel";
1020
- var ChatPanel = React10.forwardRef(
164
+ var ChatPanel = React.forwardRef(
1021
165
  ({
1022
166
  messages,
1023
167
  onSendMessage,
@@ -1026,9 +170,9 @@ var ChatPanel = React10.forwardRef(
1026
170
  className,
1027
171
  ...props
1028
172
  }, ref) => {
1029
- const [input, setInput] = React10.useState("");
1030
- const scrollRef = React10.useRef(null);
1031
- React10.useEffect(() => {
173
+ const [input, setInput] = React.useState("");
174
+ const scrollRef = React.useRef(null);
175
+ React.useEffect(() => {
1032
176
  if (scrollRef.current) {
1033
177
  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
1034
178
  }
@@ -1117,7 +261,7 @@ var ChatPanel = React10.forwardRef(
1117
261
  }
1118
262
  );
1119
263
  ChatPanel.displayName = "ChatPanel";
1120
- var FileTabs = React10.forwardRef(
264
+ var FileTabs = React.forwardRef(
1121
265
  ({
1122
266
  files,
1123
267
  activeFile,
@@ -1127,8 +271,8 @@ var FileTabs = React10.forwardRef(
1127
271
  className,
1128
272
  ...props
1129
273
  }, ref) => {
1130
- const [newFileName, setNewFileName] = React10.useState("");
1131
- const [isCreating, setIsCreating] = React10.useState(false);
274
+ const [newFileName, setNewFileName] = React.useState("");
275
+ const [isCreating, setIsCreating] = React.useState(false);
1132
276
  const handleCreateFile = () => {
1133
277
  if (newFileName.trim() && onFileCreate) {
1134
278
  onFileCreate(newFileName.trim());
@@ -1218,7 +362,7 @@ var FileTabs = React10.forwardRef(
1218
362
  }
1219
363
  );
1220
364
  FileTabs.displayName = "FileTabs";
1221
- var AICode = React10.forwardRef(
365
+ var AICode = React.forwardRef(
1222
366
  ({
1223
367
  value,
1224
368
  defaultValue = "",
@@ -1256,27 +400,27 @@ var AICode = React10.forwardRef(
1256
400
  ...props
1257
401
  }, ref) => {
1258
402
  const { theme: systemTheme } = useTheme();
1259
- const [editorValue, setEditorValue] = React10.useState(value || defaultValue);
1260
- const [currentLanguage, setCurrentLanguage] = React10.useState(language);
1261
- const [explanations, setExplanations] = React10.useState([]);
1262
- const [suggestions, setSuggestions] = React10.useState([]);
1263
- const [securityIssues, setSecurityIssues] = React10.useState(
403
+ const [editorValue, setEditorValue] = React.useState(value || defaultValue);
404
+ const [currentLanguage, setCurrentLanguage] = React.useState(language);
405
+ const [explanations, setExplanations] = React.useState([]);
406
+ const [suggestions, setSuggestions] = React.useState([]);
407
+ const [securityIssues, setSecurityIssues] = React.useState(
1264
408
  []
1265
409
  );
1266
- const [messages, setMessages] = React10.useState([]);
1267
- const [currentFiles, setCurrentFiles] = React10.useState(files);
1268
- const [currentActiveFile, setCurrentActiveFile] = React10.useState(
410
+ const [messages, setMessages] = React.useState([]);
411
+ const [currentFiles, setCurrentFiles] = React.useState(files);
412
+ const [currentActiveFile, setCurrentActiveFile] = React.useState(
1269
413
  activeFile || files[0]?.name
1270
414
  );
1271
- const [showSidePanel, setShowSidePanel] = React10.useState(true);
1272
- const [sidePanelTab, setSidePanelTab] = React10.useState("chat");
1273
- const [isProcessing, setIsProcessing] = React10.useState(false);
1274
- const [progress, setProgress] = React10.useState(0);
1275
- const editorRef = React10.useRef(null);
1276
- const currentFile = React10.useMemo(() => {
415
+ const [showSidePanel, setShowSidePanel] = React.useState(true);
416
+ const [sidePanelTab, setSidePanelTab] = React.useState("chat");
417
+ const [isProcessing, setIsProcessing] = React.useState(false);
418
+ const [progress, setProgress] = React.useState(0);
419
+ const editorRef = React.useRef(null);
420
+ const currentFile = React.useMemo(() => {
1277
421
  return currentFiles.find((f) => f.name === currentActiveFile) || currentFiles[0];
1278
422
  }, [currentFiles, currentActiveFile]);
1279
- React10.useEffect(() => {
423
+ React.useEffect(() => {
1280
424
  if (currentFile) {
1281
425
  setEditorValue(currentFile.content);
1282
426
  setCurrentLanguage(
@@ -1284,18 +428,18 @@ var AICode = React10.forwardRef(
1284
428
  );
1285
429
  }
1286
430
  }, [currentFile]);
1287
- React10.useEffect(() => {
431
+ React.useEffect(() => {
1288
432
  if (value !== void 0) {
1289
433
  setEditorValue(value);
1290
434
  }
1291
435
  }, [value]);
1292
- const resolveTheme = React10.useMemo(() => {
436
+ const resolveTheme = React.useMemo(() => {
1293
437
  if (themeProp === "auto") {
1294
438
  return systemTheme === "dark" ? "vs-dark" : "light";
1295
439
  }
1296
440
  return themeProp === "dark" ? "vs-dark" : "light";
1297
441
  }, [themeProp, systemTheme]);
1298
- const getLanguageFromFile = React10.useCallback((fileName) => {
442
+ const getLanguageFromFile = React.useCallback((fileName) => {
1299
443
  for (const [lang, pattern] of Object.entries(languagePatterns)) {
1300
444
  if (pattern.test(fileName)) {
1301
445
  return lang;
@@ -1303,7 +447,7 @@ var AICode = React10.forwardRef(
1303
447
  }
1304
448
  return "plaintext";
1305
449
  }, []);
1306
- const handleEditorChange = React10.useCallback(
450
+ const handleEditorChange = React.useCallback(
1307
451
  (newValue) => {
1308
452
  const content = newValue || "";
1309
453
  setEditorValue(content);
@@ -1318,7 +462,7 @@ var AICode = React10.forwardRef(
1318
462
  },
1319
463
  [onChange, multiFileSupport, currentActiveFile]
1320
464
  );
1321
- const handleEditorMount = React10.useCallback(
465
+ const handleEditorMount = React.useCallback(
1322
466
  (editor, monaco) => {
1323
467
  editorRef.current = editor;
1324
468
  monaco.languages.registerHoverProvider(currentLanguage, {
@@ -1368,7 +512,7 @@ var AICode = React10.forwardRef(
1368
512
  },
1369
513
  [currentLanguage, explanations, suggestions]
1370
514
  );
1371
- const handleGenerate = React10.useCallback(
515
+ const handleGenerate = React.useCallback(
1372
516
  async (prompt) => {
1373
517
  if (!onGenerate) return;
1374
518
  setIsProcessing(true);
@@ -1421,7 +565,7 @@ var AICode = React10.forwardRef(
1421
565
  },
1422
566
  [onGenerate, onChange, multiFileSupport, currentActiveFile]
1423
567
  );
1424
- const handleExplain = React10.useCallback(
568
+ const handleExplain = React.useCallback(
1425
569
  async (selectedLine) => {
1426
570
  if (!onExplain) return;
1427
571
  setIsProcessing(true);
@@ -1440,7 +584,7 @@ var AICode = React10.forwardRef(
1440
584
  },
1441
585
  [onExplain, editorValue]
1442
586
  );
1443
- const handleFeatureAction = React10.useCallback(
587
+ const handleFeatureAction = React.useCallback(
1444
588
  async (feature) => {
1445
589
  if (isProcessing) return;
1446
590
  setIsProcessing(true);
@@ -1513,7 +657,7 @@ var AICode = React10.forwardRef(
1513
657
  onChange
1514
658
  ]
1515
659
  );
1516
- const handleSecurityScan = React10.useCallback(async () => {
660
+ const handleSecurityScan = React.useCallback(async () => {
1517
661
  if (!onSecurityScan) return;
1518
662
  setIsProcessing(true);
1519
663
  try {
@@ -1529,14 +673,14 @@ var AICode = React10.forwardRef(
1529
673
  setIsProcessing(false);
1530
674
  }
1531
675
  }, [onSecurityScan, editorValue]);
1532
- const handleFileChange = React10.useCallback(
676
+ const handleFileChange = React.useCallback(
1533
677
  (fileName) => {
1534
678
  setCurrentActiveFile(fileName);
1535
679
  onFileChange?.(fileName);
1536
680
  },
1537
681
  [onFileChange]
1538
682
  );
1539
- const handleFileCreate = React10.useCallback(
683
+ const handleFileCreate = React.useCallback(
1540
684
  (fileName) => {
1541
685
  const newFile = {
1542
686
  name: fileName,
@@ -1549,7 +693,7 @@ var AICode = React10.forwardRef(
1549
693
  },
1550
694
  [getLanguageFromFile, onFileCreate]
1551
695
  );
1552
- const handleFileDelete = React10.useCallback(
696
+ const handleFileDelete = React.useCallback(
1553
697
  (fileName) => {
1554
698
  if (currentFiles.length <= 1) return;
1555
699
  setCurrentFiles((prev) => prev.filter((f) => f.name !== fileName));
@@ -1575,7 +719,7 @@ var AICode = React10.forwardRef(
1575
719
  features.map((feature) => {
1576
720
  const Icon = featureIcons[feature];
1577
721
  const isActive = feature === "explain" && explanations.length > 0;
1578
- return /* @__PURE__ */ jsxs(Tooltip$2, { children: [
722
+ return /* @__PURE__ */ jsxs(Tooltip, { children: [
1579
723
  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
1580
724
  Button,
1581
725
  {
@@ -1604,7 +748,7 @@ var AICode = React10.forwardRef(
1604
748
  ] }, feature);
1605
749
  }),
1606
750
  /* @__PURE__ */ jsx(Separator, { orientation: "vertical", ...sx("h-4") }),
1607
- /* @__PURE__ */ jsxs(Tooltip$2, { children: [
751
+ /* @__PURE__ */ jsxs(Tooltip, { children: [
1608
752
  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
1609
753
  Button,
1610
754
  {