@luxfi/ui 8.2.7 → 8.2.9

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 (241) 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 +2 -31
  168. package/dist/site/components/header/mobile-nav-menu-ai.js +1 -26
  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 +25 -330
  174. package/dist/site/components/header/mobile.js +20 -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/company.d.ts +3 -3
  199. package/dist/site/site-def/footer/index.cjs +38 -218
  200. package/dist/site/site-def/footer/index.js +14 -215
  201. package/dist/site/site-def/index.cjs +28 -620
  202. package/dist/site/site-def/index.js +3 -624
  203. package/dist/table.cjs +20 -338
  204. package/dist/table.js +19 -338
  205. package/dist/tabs.cjs +3 -10
  206. package/dist/tabs.js +1 -9
  207. package/dist/tag.cjs +9 -270
  208. package/dist/tag.js +6 -268
  209. package/dist/tags.cjs +6 -314
  210. package/dist/tags.js +5 -314
  211. package/dist/textarea.cjs +4 -50
  212. package/dist/textarea.js +3 -49
  213. package/dist/tooltip.cjs +15 -34
  214. package/dist/tooltip.js +13 -33
  215. package/dist/vite.cjs +3 -82
  216. package/dist/vite.js +1 -80
  217. package/package.json +1 -1
  218. package/dist/index.css +0 -132
  219. package/dist/site/components/auth/login-panel.css +0 -4
  220. package/dist/site/components/commerce/bag-button.css +0 -4
  221. package/dist/site/components/commerce/checkout-button.css +0 -4
  222. package/dist/site/components/commerce/checkout-panel/desktop-cp.css +0 -132
  223. package/dist/site/components/commerce/checkout-panel/index.css +0 -132
  224. package/dist/site/components/commerce/checkout-panel/mobile-cp.css +0 -132
  225. package/dist/site/components/commerce/desktop-bag-popup.css +0 -4
  226. package/dist/site/components/commerce/drawer/index.css +0 -132
  227. package/dist/site/components/commerce/drawer/micro.css +0 -4
  228. package/dist/site/components/header/desktop.css +0 -4
  229. package/dist/site/components/header/index.css +0 -132
  230. package/dist/site/components/header/mobile-bag-drawer.css +0 -4
  231. package/dist/site/components/header/mobile-nav-menu-ai.css +0 -132
  232. package/dist/site/components/header/mobile-nav-menu-item.css +0 -132
  233. package/dist/site/components/header/mobile-nav-menu.css +0 -132
  234. package/dist/site/components/header/mobile.css +0 -132
  235. package/dist/site/components/icons/index.css +0 -4
  236. package/dist/site/components/index.css +0 -132
  237. package/dist/site/components/not-found/index.css +0 -132
  238. package/dist/site/components/security/index.css +0 -132
  239. package/dist/site/site-def/footer/community.css +0 -4
  240. package/dist/site/site-def/footer/index.css +0 -4
  241. package/dist/site/site-def/index.css +0 -4
@@ -1,407 +1,11 @@
1
1
  'use client';
2
- import * as React2 from 'react';
3
- import { Box, sx, cn, css } from '@hanzo/ui';
2
+ import * as React from 'react';
3
+ import { Box, cn, css } from '@hanzo/ui';
4
4
  import { X } from 'lucide-react';
5
- import { styled, View } from '@hanzo/gui';
6
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
5
+ import { Button } from './button.js';
6
+ import { jsx, jsxs } from 'react/jsx-runtime';
7
7
 
8
- var SKELETON_CLASSES = "lux-skeleton rounded-sm";
9
- var Skeleton = React2.forwardRef(
10
- function Skeleton2(props, ref) {
11
- const { loading = true, asChild, className, children, style, ...rest } = props;
12
- if (!loading) {
13
- if (asChild && React2.isValidElement(children)) return children;
14
- return /* @__PURE__ */ jsx(Box, { ref, className, style, ...rest, children });
15
- }
16
- return /* @__PURE__ */ jsx(
17
- "div",
18
- {
19
- ref,
20
- "data-loading": true,
21
- ...sx(
22
- SKELETON_CLASSES,
23
- asChild || children ? "[&_*]:invisible" : "min-h-5",
24
- className
25
- ),
26
- style,
27
- ...rest,
28
- children
29
- }
30
- );
31
- }
32
- );
33
- React2.forwardRef(
34
- function SkeletonCircle2(props, ref) {
35
- const { size = 40, loading = true, className, ...rest } = props;
36
- const dimension = typeof size === "number" ? `${size}px` : size;
37
- return /* @__PURE__ */ jsx(
38
- Skeleton,
39
- {
40
- ref,
41
- loading,
42
- ...sx("rounded-full shrink-0", className),
43
- style: { width: dimension, height: dimension, ...rest.style },
44
- ...rest
45
- }
46
- );
47
- }
48
- );
49
- React2.forwardRef(
50
- function SkeletonText2(props, ref) {
51
- const { noOfLines = 3, loading = true, className, ...rest } = props;
52
- 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(
53
- Skeleton,
54
- {
55
- loading,
56
- ...sx(cn("h-4", index === noOfLines - 1 && "max-w-[80%]"))
57
- },
58
- index
59
- )) });
60
- }
61
- );
62
- var SpinnerFrame = styled(View, {
63
- name: "ButtonSpinner",
64
- render: /* @__PURE__ */ jsx("span", {}),
65
- width: 16,
66
- height: 16,
67
- borderRadius: 1e3,
68
- borderWidth: 2,
69
- borderColor: "currentColor",
70
- borderBottomColor: "transparent",
71
- borderLeftColor: "transparent"
72
- });
73
- function Spinner({ className }) {
74
- return /* @__PURE__ */ jsx(
75
- SpinnerFrame,
76
- {
77
- role: "status",
78
- "aria-label": "Loading",
79
- className: [
80
- "animate-spin",
81
- className
82
- ].filter(Boolean).join(" ")
83
- }
84
- );
85
- }
86
- var ButtonFrame = styled(View, {
87
- name: "LuxButton",
88
- render: /* @__PURE__ */ jsx("button", { type: "button" }),
89
- role: "button",
90
- tabIndex: 0,
91
- cursor: "pointer",
92
- userSelect: "none",
93
- display: "inline-flex",
94
- alignItems: "center",
95
- justifyContent: "center",
96
- gap: 0,
97
- overflow: "hidden",
98
- borderRadius: 6,
99
- // Whitespace nowrap via className since hanzogui doesn't have a direct token
100
- // Transition via className
101
- variants: {
102
- size: {
103
- "2xs": { paddingHorizontal: 8, height: 20, minWidth: 20, fontSize: 12, borderRadius: 4, gap: 4 },
104
- xs: { paddingHorizontal: 8, height: 24, minWidth: 24, fontSize: 14, borderRadius: 4, gap: 4 },
105
- sm: { paddingHorizontal: 12, height: 32, minWidth: 32, fontSize: 14, borderRadius: 6, gap: 4 },
106
- md: { paddingHorizontal: 12, height: 40, minWidth: 40, fontSize: 16, borderRadius: 6, gap: 8 }
107
- },
108
- disabled: {
109
- true: {
110
- opacity: 0.2,
111
- cursor: "not-allowed",
112
- pointerEvents: "none"
113
- }
114
- }
115
- },
116
- defaultVariants: {
117
- size: "md"
118
- }
119
- });
120
- var VARIANT_CLASSES = {
121
- solid: [
122
- "bg-[var(--color-button-solid-bg)] text-[var(--color-button-solid-text)]",
123
- "hover:bg-[var(--color-hover)]",
124
- "data-[expanded]:bg-[var(--color-hover)]"
125
- ].join(" "),
126
- solid_danger: [
127
- "bg-[var(--color-button-danger-bg)] text-[var(--color-button-danger-fg)]",
128
- "hover:bg-[var(--color-button-danger-bg-hover)]",
129
- "data-[expanded]:bg-[var(--color-button-danger-bg-hover)]"
130
- ].join(" "),
131
- outline: [
132
- "border-2 border-solid bg-transparent",
133
- "text-[var(--color-button-outline-fg)] border-[var(--color-button-outline-fg)]",
134
- "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]"
135
- ].join(" "),
136
- outline_danger: [
137
- "border-2 border-solid bg-transparent",
138
- "text-[var(--color-button-danger-bg)] border-[var(--color-button-danger-bg)]",
139
- "hover:bg-transparent hover:text-[var(--color-button-danger-bg-hover)] hover:border-[var(--color-button-danger-bg-hover)]"
140
- ].join(" "),
141
- dropdown: [
142
- "border-2 border-solid bg-transparent",
143
- "text-[var(--color-button-dropdown-fg)] border-[var(--color-button-dropdown-border)]",
144
- "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
145
- "data-[expanded]:bg-transparent data-[expanded]:text-[var(--color-hover)] data-[expanded]:border-[var(--color-hover)]",
146
- "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
147
- "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
148
- "data-[selected]:hover:text-[var(--color-hover)] data-[selected]:hover:border-transparent",
149
- "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
150
- ].join(" "),
151
- header: [
152
- "bg-transparent border-2 border-solid",
153
- "text-[var(--color-button-header-fg)] border-[var(--color-button-header-border)]",
154
- "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
155
- "data-[selected]:bg-[var(--color-button-header-bg-selected)]",
156
- "data-[selected]:text-[var(--color-button-header-fg-selected)] data-[selected]:border-transparent data-[selected]:border-0",
157
- "data-[selected]:hover:bg-[var(--color-button-header-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
158
- "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
159
- "data-[selected]:data-[highlighted]:bg-[var(--color-button-header-bg-highlighted)]",
160
- "data-[selected]:data-[highlighted]:text-[var(--color-button-header-fg-highlighted)]",
161
- "data-[selected]:data-[highlighted]:border-transparent data-[selected]:data-[highlighted]:border-0",
162
- "data-[selected]:data-[highlighted]:hover:bg-[var(--color-button-header-bg-highlighted)]",
163
- "data-[selected]:data-[highlighted]:hover:text-[var(--color-hover)]",
164
- "data-[selected]:data-[highlighted]:data-[expanded]:text-[var(--color-hover)]"
165
- ].join(" "),
166
- hero: [
167
- "bg-[var(--color-button-hero-bg)] text-[var(--color-button-hero-fg)]",
168
- "hover:bg-[var(--color-button-hero-bg-hover)] hover:text-[var(--color-button-hero-fg-hover)]",
169
- "data-[selected]:bg-[var(--color-button-hero-bg-selected)] data-[selected]:text-[var(--color-button-hero-fg-selected)]",
170
- "data-[selected]:hover:bg-[var(--color-button-hero-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
171
- "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
172
- ].join(" "),
173
- segmented: [
174
- "bg-transparent border-2 border-solid rounded-none",
175
- "text-[var(--color-button-segmented-fg)] border-[var(--color-selected-control-bg)]",
176
- "hover:text-[var(--color-hover)]",
177
- "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
178
- "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-selected-control-text)]",
179
- "[&:not(:last-child)]:border-r-0 data-[selected]:[&:not(:last-child)]:border-r-2",
180
- "data-[selected]+*:border-l-0",
181
- "first:rounded-l-md last:rounded-r-md"
182
- ].join(" "),
183
- plain: "bg-transparent text-inherit border-none hover:bg-transparent",
184
- subtle: [
185
- "bg-[var(--color-button-subtle-bg)] text-[var(--color-button-subtle-fg)]",
186
- "hover:bg-[var(--color-button-subtle-bg)] hover:text-[var(--color-hover)]",
187
- "disabled:bg-[var(--color-button-subtle-bg)] disabled:text-[var(--color-button-subtle-fg)]"
188
- ].join(" "),
189
- link: [
190
- "bg-transparent text-[var(--color-link-primary)] border-none font-normal",
191
- "px-0 h-auto",
192
- "hover:bg-transparent hover:text-[var(--color-link-primary-hover)]",
193
- "disabled:text-[var(--color-text-secondary)]"
194
- ].join(" "),
195
- icon_secondary: [
196
- "bg-transparent text-[var(--color-icon-secondary)] border-none",
197
- "hover:text-[var(--color-hover)]",
198
- "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
199
- "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
200
- "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
201
- "data-[expanded]:text-[var(--color-hover)]"
202
- ].join(" "),
203
- icon_background: [
204
- "bg-[var(--color-button-icon-background-bg)] text-[var(--color-icon-secondary)] border-none",
205
- "hover:text-[var(--color-hover)]",
206
- "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
207
- "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
208
- "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
209
- "data-[expanded]:text-[var(--color-hover)]"
210
- ].join(" "),
211
- pagination: [
212
- "border-2 border-solid bg-transparent",
213
- "text-[var(--color-button-pagination-fg)] border-[var(--color-button-pagination-border)]",
214
- "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
215
- "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
216
- "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
217
- "data-[selected]:hover:text-[var(--color-selected-control-text)] data-[selected]:hover:border-transparent"
218
- ].join(" ")
219
- };
220
- var BASE_CLASSES = "font-semibold whitespace-nowrap transition-colors duration-150";
221
- var SP = 4;
222
- function buildShimStyle(props) {
223
- const s = { ...props.style };
224
- if (props.mt !== void 0) s.marginTop = typeof props.mt === "number" ? `${props.mt * SP}px` : props.mt;
225
- if (props.ml !== void 0) s.marginLeft = typeof props.ml === "number" ? `${props.ml * SP}px` : props.ml;
226
- if (props.mr !== void 0) s.marginRight = typeof props.mr === "number" ? `${props.mr * SP}px` : props.mr;
227
- if (props.px !== void 0) {
228
- const v = typeof props.px === "number" ? `${props.px * SP}px` : props.px;
229
- s.paddingLeft = v;
230
- s.paddingRight = v;
231
- }
232
- if (props.py !== void 0) {
233
- const v = typeof props.py === "number" ? `${props.py * SP}px` : props.py;
234
- s.paddingTop = v;
235
- s.paddingBottom = v;
236
- }
237
- if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
238
- if (props.gap !== void 0) s.gap = typeof props.gap === "number" ? `${props.gap * SP}px` : props.gap;
239
- if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
240
- if (props.columnGap !== void 0) s.columnGap = typeof props.columnGap === "number" ? `${props.columnGap * SP}px` : props.columnGap;
241
- if (props.gridColumn !== void 0) s.gridColumn = typeof props.gridColumn === "number" ? String(props.gridColumn) : props.gridColumn;
242
- if (props.gridRow) s.gridRow = props.gridRow;
243
- if (props.justifySelf) s.justifySelf = props.justifySelf;
244
- if (props.alignSelf) s.alignSelf = props.alignSelf;
245
- if (props.h) s.height = props.h;
246
- if (props.w) s.width = props.w;
247
- if (props.display) s.display = props.display;
248
- if (props.borderBottomRightRadius !== void 0) s.borderBottomRightRadius = typeof props.borderBottomRightRadius === "number" ? `${props.borderBottomRightRadius}px` : props.borderBottomRightRadius;
249
- if (props.borderTopRightRadius !== void 0) s.borderTopRightRadius = typeof props.borderTopRightRadius === "number" ? `${props.borderTopRightRadius}px` : props.borderTopRightRadius;
250
- return Object.keys(s).length > 0 ? s : void 0;
251
- }
252
- var Button = React2.forwardRef(
253
- function Button2(props, ref) {
254
- const {
255
- className,
256
- variant = "solid",
257
- size = "md",
258
- asChild = false,
259
- loading = false,
260
- loadingText,
261
- loadingSkeleton = false,
262
- expanded,
263
- selected,
264
- highlighted,
265
- disabled,
266
- children,
267
- style: styleProp,
268
- // Strip Chakra style props
269
- mt,
270
- ml,
271
- mr,
272
- px,
273
- py,
274
- fontWeight,
275
- gap,
276
- flexShrink,
277
- columnGap,
278
- gridColumn,
279
- gridRow,
280
- justifySelf,
281
- alignSelf,
282
- textStyle: _textStyle,
283
- h,
284
- w,
285
- display,
286
- borderBottomRightRadius,
287
- borderTopRightRadius,
288
- ...rest
289
- } = props;
290
- const mergedStyle = buildShimStyle({
291
- style: styleProp,
292
- mt,
293
- ml,
294
- mr,
295
- px,
296
- py,
297
- fontWeight,
298
- gap,
299
- flexShrink,
300
- columnGap,
301
- gridColumn,
302
- gridRow,
303
- justifySelf,
304
- alignSelf,
305
- h,
306
- w,
307
- display,
308
- borderBottomRightRadius,
309
- borderTopRightRadius
310
- });
311
- const dataAttrs = {};
312
- if (expanded) dataAttrs["data-expanded"] = true;
313
- if (selected) dataAttrs["data-selected"] = true;
314
- if (highlighted) dataAttrs["data-highlighted"] = true;
315
- if (loadingSkeleton) dataAttrs["data-loading-skeleton"] = true;
316
- const isDisabled = !loadingSkeleton && (loading || disabled);
317
- const inner = loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
318
- /* @__PURE__ */ jsx(Spinner, {}),
319
- loadingText != null && /* @__PURE__ */ jsx("span", { style: { marginLeft: 8 }, children: loadingText })
320
- ] }) : children;
321
- const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.solid;
322
- const combinedClassName = [BASE_CLASSES, variantClass, className].filter(Boolean).join(" ");
323
- const button = /* @__PURE__ */ jsx(
324
- ButtonFrame,
325
- {
326
- ref,
327
- size,
328
- disabled: isDisabled || void 0,
329
- asChild: asChild || void 0,
330
- className: combinedClassName,
331
- style: mergedStyle,
332
- ...dataAttrs,
333
- ...rest,
334
- children: inner
335
- }
336
- );
337
- if (loadingSkeleton) {
338
- return /* @__PURE__ */ jsx(Skeleton, { loading: loadingSkeleton, asChild: true, ref, children: button });
339
- }
340
- return button;
341
- }
342
- );
343
- React2.forwardRef(
344
- function ButtonGroup2(props, ref) {
345
- const { className, ...rest } = props;
346
- return /* @__PURE__ */ jsx(
347
- Box,
348
- {
349
- ref,
350
- className: ["inline-flex", className].filter(Boolean).join(" "),
351
- role: "group",
352
- ...rest
353
- }
354
- );
355
- }
356
- );
357
- React2.forwardRef(
358
- function ButtonGroupRadio2(props, ref) {
359
- const {
360
- children,
361
- onChange,
362
- variant = "segmented",
363
- defaultValue,
364
- loading = false,
365
- equalWidth = false,
366
- className,
367
- ...rest
368
- } = props;
369
- const firstChildValue = React2.useMemo(() => {
370
- const firstChild = Array.isArray(children) ? children[0] : void 0;
371
- return typeof firstChild?.props.value === "string" ? firstChild.props.value : void 0;
372
- }, [children]);
373
- const [value, setValue] = React2.useState(defaultValue ?? firstChildValue);
374
- const handleItemClick = React2.useCallback((event) => {
375
- const v = event.currentTarget.value;
376
- setValue(v);
377
- onChange?.(v);
378
- }, [onChange]);
379
- const clonedChildren = React2.Children.map(children, (child) => {
380
- return React2.cloneElement(child, {
381
- onClick: handleItemClick,
382
- selected: value === child.props.value,
383
- variant
384
- });
385
- });
386
- const childrenLength = React2.Children.count(children);
387
- return /* @__PURE__ */ jsx(Skeleton, { loading, children: /* @__PURE__ */ jsx(
388
- Box,
389
- {
390
- ref,
391
- className: [
392
- "inline-flex gap-0",
393
- equalWidth ? "grid" : "",
394
- className
395
- ].filter(Boolean).join(" "),
396
- style: equalWidth ? { gridTemplateColumns: `repeat(${childrenLength}, 1fr)` } : void 0,
397
- role: "group",
398
- ...rest,
399
- children: clonedChildren
400
- }
401
- ) });
402
- }
403
- );
404
- var DialogStack = React2.forwardRef(
8
+ var DialogStack = React.forwardRef(
405
9
  ({ className, dialogs, onClose, ...props }, ref) => {
406
10
  return /* @__PURE__ */ jsx(Box, { ref, className: cn("relative", className), ...props, children: dialogs.map((dialog, index) => /* @__PURE__ */ jsxs(
407
11
  Box,
package/dist/dialog.cjs CHANGED
@@ -3,7 +3,8 @@
3
3
 
4
4
  var gui = require('@hanzo/gui');
5
5
  var ui = require('@hanzo/ui');
6
- var React2 = require('react');
6
+ var React = require('react');
7
+ var closeButton_cjs = require('./close-button.cjs');
7
8
  var jsxRuntime = require('react/jsx-runtime');
8
9
 
9
10
  function _interopNamespace(e) {
@@ -24,66 +25,8 @@ function _interopNamespace(e) {
24
25
  return Object.freeze(n);
25
26
  }
26
27
 
27
- var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
28
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
28
29
 
29
- var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
30
- var CloseButtonFrame = gui.styled(gui.View, {
31
- name: "LuxCloseButton",
32
- render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close" }),
33
- role: "button",
34
- cursor: "pointer",
35
- display: "inline-flex",
36
- alignItems: "center",
37
- justifyContent: "center",
38
- width: 20,
39
- height: 20,
40
- minWidth: 0,
41
- flexShrink: 1,
42
- padding: 0,
43
- borderRadius: 4,
44
- borderWidth: 0,
45
- overflow: "hidden",
46
- backgroundColor: "transparent",
47
- hoverStyle: {
48
- backgroundColor: "transparent"
49
- },
50
- variants: {
51
- disabled: {
52
- true: {
53
- opacity: 0.4,
54
- pointerEvents: "none"
55
- }
56
- }
57
- }
58
- });
59
- var CloseButton = React2__namespace.forwardRef(function CloseButton2(props, ref) {
60
- const { variant: _variant, size: _size, className, children, ...rest } = props;
61
- return /* @__PURE__ */ jsxRuntime.jsx(
62
- CloseButtonFrame,
63
- {
64
- ref,
65
- className,
66
- ...rest,
67
- children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
68
- "svg",
69
- {
70
- width: 20,
71
- height: 20,
72
- viewBox: "0 0 20 20",
73
- fill: "none",
74
- "aria-hidden": "true",
75
- children: /* @__PURE__ */ jsxRuntime.jsx(
76
- "path",
77
- {
78
- d: CLOSE_ICON_PATH,
79
- fill: "currentColor"
80
- }
81
- )
82
- }
83
- )
84
- }
85
- );
86
- });
87
30
  function BackToButton({ onClick }) {
88
31
  return /* @__PURE__ */ jsxRuntime.jsx(
89
32
  ui.Box,
@@ -97,9 +40,9 @@ function BackToButton({ onClick }) {
97
40
  }
98
41
  );
99
42
  }
100
- var DialogSizeContext = React2__namespace.createContext({ size: "md" });
43
+ var DialogSizeContext = React__namespace.createContext({ size: "md" });
101
44
  function useDialogSizeContext() {
102
- return React2__namespace.useContext(DialogSizeContext);
45
+ return React__namespace.useContext(DialogSizeContext);
103
46
  }
104
47
  var CONTENT_SIZE_MAP = {
105
48
  sm: "max-w-[400px]",
@@ -131,13 +74,13 @@ var DialogRoot = ({
131
74
  modal = true
132
75
  // motionPreset is intentionally unused -- kept for API compat
133
76
  }) => {
134
- const handleOpenChange = React2__namespace.useCallback(
77
+ const handleOpenChange = React__namespace.useCallback(
135
78
  (nextOpen) => {
136
79
  onOpenChange?.({ open: nextOpen });
137
80
  },
138
81
  [onOpenChange]
139
82
  );
140
- const ctx = React2__namespace.useMemo(() => ({ size }), [size]);
83
+ const ctx = React__namespace.useMemo(() => ({ size }), [size]);
141
84
  return /* @__PURE__ */ jsxRuntime.jsx(DialogSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
142
85
  gui.Dialog,
143
86
  {
@@ -149,7 +92,7 @@ var DialogRoot = ({
149
92
  }
150
93
  ) });
151
94
  };
152
- var DialogContent = React2__namespace.forwardRef(function DialogContent2(props, ref) {
95
+ var DialogContent = React__namespace.forwardRef(function DialogContent2(props, ref) {
153
96
  const {
154
97
  children,
155
98
  portalled: _portalled = true,
@@ -206,11 +149,11 @@ var DialogContent = React2__namespace.forwardRef(function DialogContent2(props,
206
149
  )
207
150
  ] });
208
151
  });
209
- var DialogCloseTrigger = React2__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
152
+ var DialogCloseTrigger = React__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
210
153
  const { className, ...rest } = props;
211
- return /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
154
+ return /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(closeButton_cjs.CloseButton, { ref, className, ...rest, children: props.children }) });
212
155
  });
213
- var DialogHeader = React2__namespace.forwardRef(function DialogHeader2(props, ref) {
156
+ var DialogHeader = React__namespace.forwardRef(function DialogHeader2(props, ref) {
214
157
  const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
215
158
  const startElement = startElementProp ?? (onBackToClick ? /* @__PURE__ */ jsxRuntime.jsx(BackToButton, { onClick: onBackToClick }) : void 0);
216
159
  return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -240,7 +183,7 @@ var DialogHeader = React2__namespace.forwardRef(function DialogHeader2(props, re
240
183
  }
241
184
  );
242
185
  });
243
- var DialogBody = React2__namespace.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
186
+ var DialogBody = React__namespace.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
244
187
  const bodyStyle = {
245
188
  ...styleProp,
246
189
  ...pt !== void 0 ? { paddingTop: typeof pt === "number" ? `${pt * 4}px` : pt } : {},
@@ -257,7 +200,7 @@ var DialogBody = React2__namespace.forwardRef(function DialogBody2({ className,
257
200
  }
258
201
  );
259
202
  });
260
- var DialogFooter = React2__namespace.forwardRef(function DialogFooter2({ className, ...props }, ref) {
203
+ var DialogFooter = React__namespace.forwardRef(function DialogFooter2({ className, ...props }, ref) {
261
204
  return /* @__PURE__ */ jsxRuntime.jsx(
262
205
  ui.Box,
263
206
  {