@luxfi/ui 5.5.3 → 5.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (244) hide show
  1. package/dist/accordion.cjs +213 -0
  2. package/dist/accordion.js +186 -0
  3. package/dist/alert.cjs +553 -0
  4. package/dist/alert.js +531 -0
  5. package/dist/avatar.cjs +149 -0
  6. package/dist/avatar.js +125 -0
  7. package/dist/badge.cjs +611 -0
  8. package/dist/badge.js +589 -0
  9. package/dist/button.cjs +689 -0
  10. package/dist/button.js +664 -0
  11. package/dist/checkbox.cjs +265 -0
  12. package/dist/checkbox.js +241 -0
  13. package/dist/close-button.cjs +73 -0
  14. package/dist/close-button.js +51 -0
  15. package/dist/collapsible.cjs +702 -0
  16. package/dist/collapsible.js +679 -0
  17. package/dist/color-mode.cjs +96 -0
  18. package/dist/color-mode.js +72 -0
  19. package/dist/dialog.cjs +279 -0
  20. package/dist/dialog.js +246 -0
  21. package/dist/drawer.cjs +207 -0
  22. package/dist/drawer.js +175 -0
  23. package/dist/empty-state.cjs +93 -0
  24. package/dist/empty-state.js +71 -0
  25. package/dist/field.cjs +183 -0
  26. package/dist/field.js +160 -0
  27. package/dist/heading.cjs +46 -0
  28. package/dist/heading.js +40 -0
  29. package/dist/icon-button.cjs +491 -0
  30. package/dist/icon-button.js +470 -0
  31. package/dist/image.cjs +572 -0
  32. package/dist/image.js +551 -0
  33. package/dist/index.cjs +5779 -0
  34. package/dist/index.js +5619 -0
  35. package/dist/input-group.cjs +155 -0
  36. package/dist/input-group.js +133 -0
  37. package/dist/input.cjs +65 -0
  38. package/dist/input.js +59 -0
  39. package/dist/link.cjs +630 -0
  40. package/dist/link.js +606 -0
  41. package/dist/menu.cjs +305 -0
  42. package/dist/menu.js +269 -0
  43. package/dist/pin-input.cjs +182 -0
  44. package/dist/pin-input.js +160 -0
  45. package/dist/popover.cjs +327 -0
  46. package/dist/popover.js +294 -0
  47. package/dist/progress-circle.cjs +152 -0
  48. package/dist/progress-circle.js +128 -0
  49. package/dist/progress.cjs +117 -0
  50. package/dist/progress.js +94 -0
  51. package/dist/provider.cjs +62 -0
  52. package/dist/provider.js +40 -0
  53. package/dist/radio.cjs +177 -0
  54. package/dist/radio.js +153 -0
  55. package/dist/rating.cjs +80 -0
  56. package/dist/rating.js +58 -0
  57. package/dist/select.cjs +791 -0
  58. package/dist/select.js +757 -0
  59. package/dist/separator.cjs +57 -0
  60. package/dist/separator.js +51 -0
  61. package/dist/skeleton.cjs +370 -0
  62. package/dist/skeleton.js +346 -0
  63. package/dist/slider.cjs +138 -0
  64. package/dist/slider.js +115 -0
  65. package/dist/switch.cjs +163 -0
  66. package/dist/switch.js +140 -0
  67. package/dist/table.cjs +1044 -0
  68. package/dist/table.js +1013 -0
  69. package/dist/tabs.cjs +240 -0
  70. package/dist/tabs.js +213 -0
  71. package/dist/tag.cjs +651 -0
  72. package/dist/tag.js +628 -0
  73. package/dist/textarea.cjs +65 -0
  74. package/dist/textarea.js +59 -0
  75. package/dist/toaster.cjs +99 -0
  76. package/dist/toaster.js +96 -0
  77. package/dist/tooltip.cjs +171 -0
  78. package/dist/tooltip.js +148 -0
  79. package/dist/utils.cjs +11 -0
  80. package/dist/utils.js +9 -0
  81. package/package.json +270 -65
  82. package/src/accordion.tsx +285 -0
  83. package/src/alert.tsx +221 -0
  84. package/src/avatar.tsx +174 -0
  85. package/src/badge.tsx +158 -0
  86. package/src/button.tsx +411 -0
  87. package/src/checkbox.tsx +307 -0
  88. package/src/close-button.tsx +51 -0
  89. package/src/collapsible.tsx +126 -0
  90. package/src/color-mode.tsx +125 -0
  91. package/src/dialog.tsx +356 -0
  92. package/src/drawer.tsx +186 -0
  93. package/src/empty-state.tsx +97 -0
  94. package/src/field.tsx +202 -0
  95. package/src/heading.tsx +55 -0
  96. package/src/icon-button.tsx +192 -0
  97. package/src/image.tsx +280 -0
  98. package/src/index.ts +192 -0
  99. package/src/input-group.tsx +159 -0
  100. package/src/input.tsx +60 -0
  101. package/src/link.tsx +326 -0
  102. package/src/menu.tsx +471 -0
  103. package/src/pin-input.tsx +187 -0
  104. package/src/popover.tsx +400 -0
  105. package/src/progress-circle.tsx +180 -0
  106. package/src/progress.tsx +109 -0
  107. package/src/provider.tsx +12 -0
  108. package/src/radio.tsx +175 -0
  109. package/src/rating.tsx +79 -0
  110. package/src/select.tsx +696 -0
  111. package/src/separator.tsx +59 -0
  112. package/src/skeleton.tsx +302 -0
  113. package/src/slider.tsx +152 -0
  114. package/src/switch.tsx +158 -0
  115. package/src/table.tsx +621 -0
  116. package/src/tabs.tsx +354 -0
  117. package/src/tag.tsx +159 -0
  118. package/src/textarea.tsx +60 -0
  119. package/src/toaster.tsx +117 -0
  120. package/src/tokens.css +438 -0
  121. package/src/tooltip.tsx +184 -0
  122. package/src/utils/cn.ts +7 -0
  123. package/src/utils.ts +6 -0
  124. package/tokens.css +438 -0
  125. package/commerce/ui/conf.ts +0 -13
  126. package/commerce/ui/context.tsx +0 -123
  127. package/commerce/ui/store.ts +0 -295
  128. package/components/access-code-input.tsx +0 -71
  129. package/components/analytics.tsx +0 -23
  130. package/components/auth/auth-listener.tsx +0 -29
  131. package/components/auth/auth-token/clear-auth-token.tsx +0 -12
  132. package/components/auth/auth-token/set-auth-token.tsx +0 -16
  133. package/components/auth/common-auth-domains.ts +0 -17
  134. package/components/auth/login-panel.tsx +0 -111
  135. package/components/auth/mobile-login-button.tsx +0 -107
  136. package/components/auth/signup-panel.tsx +0 -113
  137. package/components/back-button.tsx +0 -49
  138. package/components/chat-widget.tsx +0 -85
  139. package/components/commerce/bag-button.tsx +0 -98
  140. package/components/commerce/buy-button.tsx +0 -34
  141. package/components/commerce/checkout-button.tsx +0 -129
  142. package/components/commerce/checkout-panel/cart-accordian.tsx +0 -66
  143. package/components/commerce/checkout-panel/checkout-panel-props.ts +0 -10
  144. package/components/commerce/checkout-panel/desktop-bag-carousel.tsx +0 -36
  145. package/components/commerce/checkout-panel/desktop-cp.tsx +0 -83
  146. package/components/commerce/checkout-panel/index.tsx +0 -126
  147. package/components/commerce/checkout-panel/mobile-cp.tsx +0 -67
  148. package/components/commerce/checkout-panel/policy-links.tsx +0 -29
  149. package/components/commerce/checkout-panel/steps-indicator.tsx +0 -39
  150. package/components/commerce/checkout-panel/thank-you.tsx +0 -18
  151. package/components/commerce/desktop-bag-popup.tsx +0 -78
  152. package/components/commerce/drawer/index.tsx +0 -88
  153. package/components/commerce/drawer/micro.tsx +0 -145
  154. package/components/commerce/drawer/shell.tsx +0 -85
  155. package/components/contact-dialog/contact-form.tsx +0 -116
  156. package/components/contact-dialog/disclaimer.tsx +0 -13
  157. package/components/contact-dialog/index.tsx +0 -64
  158. package/components/copyright.tsx +0 -21
  159. package/components/drawer-margin.tsx +0 -28
  160. package/components/footer.tsx +0 -78
  161. package/components/header/desktop-nav-menu.tsx +0 -204
  162. package/components/header/desktop.tsx +0 -65
  163. package/components/header/index.tsx +0 -50
  164. package/components/header/mobile-bag-drawer.tsx +0 -51
  165. package/components/header/mobile-menu-toggle-button.tsx +0 -35
  166. package/components/header/mobile-nav-menu-ai.tsx +0 -51
  167. package/components/header/mobile-nav-menu-item.tsx +0 -47
  168. package/components/header/mobile-nav-menu.tsx +0 -102
  169. package/components/header/mobile.tsx +0 -170
  170. package/components/header/theme-toggle.tsx +0 -26
  171. package/components/icons/avatar.tsx +0 -11
  172. package/components/icons/bag-icon.tsx +0 -10
  173. package/components/icons/index.ts +0 -6
  174. package/components/icons/left-arrow.tsx +0 -11
  175. package/components/icons/lux-logo.tsx +0 -10
  176. package/components/icons/right-arrow.tsx +0 -10
  177. package/components/icons/social-icon.tsx +0 -35
  178. package/components/icons/social-svg.css +0 -3
  179. package/components/index.ts +0 -26
  180. package/components/logo.tsx +0 -92
  181. package/components/main.tsx +0 -27
  182. package/components/mini-chart/index.tsx +0 -8
  183. package/components/mini-chart/mini-chart-props.ts +0 -44
  184. package/components/mini-chart/mini-chart.tsx +0 -85
  185. package/components/mini-chart/wrapper.tsx +0 -23
  186. package/components/not-found/index.tsx +0 -28
  187. package/components/not-found/not-found-content.mdx +0 -5
  188. package/components/tooltip.tsx +0 -31
  189. package/environment.d.ts +0 -6
  190. package/next/analytics/fpixel.ts +0 -16
  191. package/next/analytics/google-analytics.ts +0 -14
  192. package/next/analytics/index.ts +0 -3
  193. package/next/analytics/pixel-analytics.tsx +0 -55
  194. package/next/font/get-app-router-font-classes.ts +0 -17
  195. package/next/font/load-and-return-lux-next-fonts-on-import.ts +0 -68
  196. package/next/font/local/Druk-Wide-Bold.ttf +0 -0
  197. package/next/font/local/Druk-Wide-Medium.ttf +0 -0
  198. package/next/font/local/InterVariable-Italic.ttf +0 -0
  199. package/next/font/local/InterVariable-Italic.woff2 +0 -0
  200. package/next/font/local/InterVariable.ttf +0 -0
  201. package/next/font/local/InterVariable.woff2 +0 -0
  202. package/next/font/next-font-desc.ts +0 -28
  203. package/next/font/pages-router-font-vars.tsx +0 -18
  204. package/next/head-metadata/from-next/metadata-types.ts +0 -158
  205. package/next/head-metadata/from-next/opengraph-types.ts +0 -267
  206. package/next/head-metadata/from-next/twitter-types.ts +0 -92
  207. package/next/head-metadata/index.tsx +0 -208
  208. package/next/index.ts +0 -2
  209. package/next/middleware/determine-device-mw.ts +0 -29
  210. package/root-layout/WHY_THIS_IS_SEPARATE.txt +0 -2
  211. package/root-layout/index.tsx +0 -112
  212. package/site-def/footer/community.tsx +0 -61
  213. package/site-def/footer/company.ts +0 -37
  214. package/site-def/footer/ecosystem.ts +0 -37
  215. package/site-def/footer/index.tsx +0 -26
  216. package/site-def/footer/legal.ts +0 -28
  217. package/site-def/footer/network.ts +0 -45
  218. package/site-def/footer/svg/warpcast-logo.svg +0 -12
  219. package/site-def/index.ts +0 -4
  220. package/site-def/main-nav.tsx +0 -460
  221. package/style/cart-animation.css +0 -29
  222. package/style/checkout-animation.css +0 -23
  223. package/style/drawer-handle-overrides.css +0 -160
  224. package/style/fonts/COPY_TO_PUBLIC_FOR_NON_NEXT.txt +0 -0
  225. package/style/fonts/Druk-Wide-Bold.ttf +0 -0
  226. package/style/fonts/Druk-Wide-Medium.ttf +0 -0
  227. package/style/fonts/InterVariable-Italic.ttf +0 -0
  228. package/style/fonts/InterVariable-Italic.woff2 +0 -0
  229. package/style/fonts/InterVariable.ttf +0 -0
  230. package/style/fonts/InterVariable.woff2 +0 -0
  231. package/style/lux-colors.css +0 -85
  232. package/style/lux-fonts.css +0 -30
  233. package/style/lux-global-non-next.css +0 -52
  234. package/style/lux-global.css +0 -51
  235. package/tailwind/fontFamily.tailwind.lux.ts +0 -18
  236. package/tailwind/index.ts +0 -2
  237. package/tailwind/lux-tw-fonts.ts +0 -40
  238. package/tailwind/tailwind.config.lux-preset.ts +0 -10
  239. package/tsconfig.json +0 -15
  240. package/types/chatbot-config.ts +0 -7
  241. package/types/chatbot-suggested-question.ts +0 -7
  242. package/types/contact-info.ts +0 -11
  243. package/types/index.ts +0 -4
  244. package/types/site-def.ts +0 -46
@@ -0,0 +1,182 @@
1
+ "use client";
2
+ 'use strict';
3
+
4
+ var React = require('react');
5
+ var clsx = require('clsx');
6
+ var tailwindMerge = require('tailwind-merge');
7
+ var jsxRuntime = require('react/jsx-runtime');
8
+
9
+ function _interopNamespace(e) {
10
+ if (e && e.__esModule) return e;
11
+ var n = Object.create(null);
12
+ if (e) {
13
+ Object.keys(e).forEach(function (k) {
14
+ if (k !== 'default') {
15
+ var d = Object.getOwnPropertyDescriptor(e, k);
16
+ Object.defineProperty(n, k, d.get ? d : {
17
+ enumerable: true,
18
+ get: function () { return e[k]; }
19
+ });
20
+ }
21
+ });
22
+ }
23
+ n.default = e;
24
+ return Object.freeze(n);
25
+ }
26
+
27
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
28
+
29
+ // src/pin-input.tsx
30
+ function cn(...inputs) {
31
+ return tailwindMerge.twMerge(clsx.clsx(inputs));
32
+ }
33
+ var INPUT_BASE = [
34
+ "w-10 h-10",
35
+ "text-center text-sm font-medium",
36
+ "border-2 rounded-md",
37
+ "outline-none appearance-none",
38
+ "bg-[var(--color-input-bg)] text-[var(--color-input-fg)]",
39
+ "border-[var(--color-input-border)]",
40
+ "placeholder:text-[var(--color-input-placeholder)]",
41
+ "hover:border-[var(--color-input-border-hover)]",
42
+ "focus:border-[var(--color-input-border-focus)] focus:shadow-md",
43
+ "disabled:opacity-40"
44
+ ].join(" ");
45
+ var INPUT_FILLED = "border-[var(--color-input-border)]";
46
+ var INPUT_INVALID = "border-[var(--color-border-error)] hover:border-[var(--color-border-error)]";
47
+ var PinInput = React__namespace.forwardRef(
48
+ function PinInput2(props, ref) {
49
+ const {
50
+ count = 6,
51
+ inputProps,
52
+ rootRef,
53
+ attached,
54
+ placeholder = " ",
55
+ value: controlledValue,
56
+ onValueChange,
57
+ onValueComplete,
58
+ disabled,
59
+ invalid,
60
+ otp,
61
+ name,
62
+ bgColor,
63
+ className
64
+ } = props;
65
+ const inputRefs = React__namespace.useRef([]);
66
+ const values = React__namespace.useMemo(
67
+ () => controlledValue ?? Array.from({ length: count }).fill(""),
68
+ [controlledValue, count]
69
+ );
70
+ const updateValue = React__namespace.useCallback((index, char) => {
71
+ const next = [...values];
72
+ next[index] = char;
73
+ onValueChange?.({ value: next });
74
+ if (next.every((v) => v.length > 0)) {
75
+ onValueComplete?.({ value: next });
76
+ }
77
+ }, [values, onValueChange, onValueComplete]);
78
+ const focusInput = React__namespace.useCallback((index) => {
79
+ const clamped = Math.max(0, Math.min(index, count - 1));
80
+ inputRefs.current[clamped]?.focus();
81
+ }, [count]);
82
+ const handleInput = React__namespace.useCallback((index, e) => {
83
+ const target = e.currentTarget;
84
+ const char = target.value.slice(-1);
85
+ updateValue(index, char);
86
+ if (char && index < count - 1) {
87
+ focusInput(index + 1);
88
+ }
89
+ }, [count, updateValue, focusInput]);
90
+ const handleKeyDown = React__namespace.useCallback((index, e) => {
91
+ if (e.key === "Backspace") {
92
+ if (values[index]) {
93
+ updateValue(index, "");
94
+ } else if (index > 0) {
95
+ updateValue(index - 1, "");
96
+ focusInput(index - 1);
97
+ }
98
+ e.preventDefault();
99
+ } else if (e.key === "ArrowLeft" && index > 0) {
100
+ focusInput(index - 1);
101
+ e.preventDefault();
102
+ } else if (e.key === "ArrowRight" && index < count - 1) {
103
+ focusInput(index + 1);
104
+ e.preventDefault();
105
+ }
106
+ }, [count, values, updateValue, focusInput]);
107
+ const handlePaste = React__namespace.useCallback((e) => {
108
+ e.preventDefault();
109
+ const pasted = e.clipboardData.getData("text/plain").trim();
110
+ if (!pasted) {
111
+ return;
112
+ }
113
+ const chars = pasted.slice(0, count).split("");
114
+ const next = [...values];
115
+ chars.forEach((char, i) => {
116
+ next[i] = char;
117
+ });
118
+ onValueChange?.({ value: next });
119
+ if (next.every((v) => v.length > 0)) {
120
+ onValueComplete?.({ value: next });
121
+ }
122
+ focusInput(Math.min(chars.length, count - 1));
123
+ }, [count, values, onValueChange, onValueComplete, focusInput]);
124
+ const handleFocus = React__namespace.useCallback((e) => {
125
+ e.currentTarget.select();
126
+ }, []);
127
+ const handleNoop = React__namespace.useCallback(() => {
128
+ }, []);
129
+ const setInputRef = React__namespace.useCallback((index) => (el) => {
130
+ inputRefs.current[index] = el;
131
+ }, []);
132
+ const onInputAtIndex = React__namespace.useCallback((index) => (e) => {
133
+ handleInput(index, e);
134
+ }, [handleInput]);
135
+ const onKeyDownAtIndex = React__namespace.useCallback((index) => (e) => {
136
+ handleKeyDown(index, e);
137
+ }, [handleKeyDown]);
138
+ const bgStyle = bgColor ? { backgroundColor: `var(--color-${bgColor.replace(/\./g, "-")})` } : void 0;
139
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: cn("inline-flex items-center", attached ? "gap-0" : "gap-2", className), children: [
140
+ /* @__PURE__ */ jsxRuntime.jsx(
141
+ "input",
142
+ {
143
+ ref,
144
+ type: "hidden",
145
+ name,
146
+ value: values.join(""),
147
+ ...inputProps
148
+ }
149
+ ),
150
+ Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
151
+ "input",
152
+ {
153
+ ref: setInputRef(index),
154
+ type: "text",
155
+ inputMode: "numeric",
156
+ autoComplete: otp ? "one-time-code" : "off",
157
+ pattern: "[0-9]*",
158
+ maxLength: 1,
159
+ placeholder,
160
+ disabled,
161
+ "aria-invalid": invalid || void 0,
162
+ value: values[index] || "",
163
+ className: cn(
164
+ INPUT_BASE,
165
+ values[index] && INPUT_FILLED,
166
+ invalid && INPUT_INVALID,
167
+ attached && index > 0 && "-ml-0.5"
168
+ ),
169
+ style: bgStyle,
170
+ onInput: onInputAtIndex(index),
171
+ onKeyDown: onKeyDownAtIndex(index),
172
+ onPaste: handlePaste,
173
+ onFocus: handleFocus,
174
+ onChange: handleNoop
175
+ },
176
+ index
177
+ ))
178
+ ] });
179
+ }
180
+ );
181
+
182
+ exports.PinInput = PinInput;
@@ -0,0 +1,160 @@
1
+ "use client";
2
+ import * as React from 'react';
3
+ import { clsx } from 'clsx';
4
+ import { twMerge } from 'tailwind-merge';
5
+ import { jsxs, jsx } from 'react/jsx-runtime';
6
+
7
+ // src/pin-input.tsx
8
+ function cn(...inputs) {
9
+ return twMerge(clsx(inputs));
10
+ }
11
+ var INPUT_BASE = [
12
+ "w-10 h-10",
13
+ "text-center text-sm font-medium",
14
+ "border-2 rounded-md",
15
+ "outline-none appearance-none",
16
+ "bg-[var(--color-input-bg)] text-[var(--color-input-fg)]",
17
+ "border-[var(--color-input-border)]",
18
+ "placeholder:text-[var(--color-input-placeholder)]",
19
+ "hover:border-[var(--color-input-border-hover)]",
20
+ "focus:border-[var(--color-input-border-focus)] focus:shadow-md",
21
+ "disabled:opacity-40"
22
+ ].join(" ");
23
+ var INPUT_FILLED = "border-[var(--color-input-border)]";
24
+ var INPUT_INVALID = "border-[var(--color-border-error)] hover:border-[var(--color-border-error)]";
25
+ var PinInput = React.forwardRef(
26
+ function PinInput2(props, ref) {
27
+ const {
28
+ count = 6,
29
+ inputProps,
30
+ rootRef,
31
+ attached,
32
+ placeholder = " ",
33
+ value: controlledValue,
34
+ onValueChange,
35
+ onValueComplete,
36
+ disabled,
37
+ invalid,
38
+ otp,
39
+ name,
40
+ bgColor,
41
+ className
42
+ } = props;
43
+ const inputRefs = React.useRef([]);
44
+ const values = React.useMemo(
45
+ () => controlledValue ?? Array.from({ length: count }).fill(""),
46
+ [controlledValue, count]
47
+ );
48
+ const updateValue = React.useCallback((index, char) => {
49
+ const next = [...values];
50
+ next[index] = char;
51
+ onValueChange?.({ value: next });
52
+ if (next.every((v) => v.length > 0)) {
53
+ onValueComplete?.({ value: next });
54
+ }
55
+ }, [values, onValueChange, onValueComplete]);
56
+ const focusInput = React.useCallback((index) => {
57
+ const clamped = Math.max(0, Math.min(index, count - 1));
58
+ inputRefs.current[clamped]?.focus();
59
+ }, [count]);
60
+ const handleInput = React.useCallback((index, e) => {
61
+ const target = e.currentTarget;
62
+ const char = target.value.slice(-1);
63
+ updateValue(index, char);
64
+ if (char && index < count - 1) {
65
+ focusInput(index + 1);
66
+ }
67
+ }, [count, updateValue, focusInput]);
68
+ const handleKeyDown = React.useCallback((index, e) => {
69
+ if (e.key === "Backspace") {
70
+ if (values[index]) {
71
+ updateValue(index, "");
72
+ } else if (index > 0) {
73
+ updateValue(index - 1, "");
74
+ focusInput(index - 1);
75
+ }
76
+ e.preventDefault();
77
+ } else if (e.key === "ArrowLeft" && index > 0) {
78
+ focusInput(index - 1);
79
+ e.preventDefault();
80
+ } else if (e.key === "ArrowRight" && index < count - 1) {
81
+ focusInput(index + 1);
82
+ e.preventDefault();
83
+ }
84
+ }, [count, values, updateValue, focusInput]);
85
+ const handlePaste = React.useCallback((e) => {
86
+ e.preventDefault();
87
+ const pasted = e.clipboardData.getData("text/plain").trim();
88
+ if (!pasted) {
89
+ return;
90
+ }
91
+ const chars = pasted.slice(0, count).split("");
92
+ const next = [...values];
93
+ chars.forEach((char, i) => {
94
+ next[i] = char;
95
+ });
96
+ onValueChange?.({ value: next });
97
+ if (next.every((v) => v.length > 0)) {
98
+ onValueComplete?.({ value: next });
99
+ }
100
+ focusInput(Math.min(chars.length, count - 1));
101
+ }, [count, values, onValueChange, onValueComplete, focusInput]);
102
+ const handleFocus = React.useCallback((e) => {
103
+ e.currentTarget.select();
104
+ }, []);
105
+ const handleNoop = React.useCallback(() => {
106
+ }, []);
107
+ const setInputRef = React.useCallback((index) => (el) => {
108
+ inputRefs.current[index] = el;
109
+ }, []);
110
+ const onInputAtIndex = React.useCallback((index) => (e) => {
111
+ handleInput(index, e);
112
+ }, [handleInput]);
113
+ const onKeyDownAtIndex = React.useCallback((index) => (e) => {
114
+ handleKeyDown(index, e);
115
+ }, [handleKeyDown]);
116
+ const bgStyle = bgColor ? { backgroundColor: `var(--color-${bgColor.replace(/\./g, "-")})` } : void 0;
117
+ return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("inline-flex items-center", attached ? "gap-0" : "gap-2", className), children: [
118
+ /* @__PURE__ */ jsx(
119
+ "input",
120
+ {
121
+ ref,
122
+ type: "hidden",
123
+ name,
124
+ value: values.join(""),
125
+ ...inputProps
126
+ }
127
+ ),
128
+ Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
129
+ "input",
130
+ {
131
+ ref: setInputRef(index),
132
+ type: "text",
133
+ inputMode: "numeric",
134
+ autoComplete: otp ? "one-time-code" : "off",
135
+ pattern: "[0-9]*",
136
+ maxLength: 1,
137
+ placeholder,
138
+ disabled,
139
+ "aria-invalid": invalid || void 0,
140
+ value: values[index] || "",
141
+ className: cn(
142
+ INPUT_BASE,
143
+ values[index] && INPUT_FILLED,
144
+ invalid && INPUT_INVALID,
145
+ attached && index > 0 && "-ml-0.5"
146
+ ),
147
+ style: bgStyle,
148
+ onInput: onInputAtIndex(index),
149
+ onKeyDown: onKeyDownAtIndex(index),
150
+ onPaste: handlePaste,
151
+ onFocus: handleFocus,
152
+ onChange: handleNoop
153
+ },
154
+ index
155
+ ))
156
+ ] });
157
+ }
158
+ );
159
+
160
+ export { PinInput };
@@ -0,0 +1,327 @@
1
+ "use client";
2
+ 'use strict';
3
+
4
+ var RadixPopover = require('@radix-ui/react-popover');
5
+ var React2 = require('react');
6
+ var clsx = require('clsx');
7
+ var tailwindMerge = require('tailwind-merge');
8
+ var jsxRuntime = require('react/jsx-runtime');
9
+
10
+ function _interopNamespace(e) {
11
+ if (e && e.__esModule) return e;
12
+ var n = Object.create(null);
13
+ if (e) {
14
+ Object.keys(e).forEach(function (k) {
15
+ if (k !== 'default') {
16
+ var d = Object.getOwnPropertyDescriptor(e, k);
17
+ Object.defineProperty(n, k, d.get ? d : {
18
+ enumerable: true,
19
+ get: function () { return e[k]; }
20
+ });
21
+ }
22
+ });
23
+ }
24
+ n.default = e;
25
+ return Object.freeze(n);
26
+ }
27
+
28
+ var RadixPopover__namespace = /*#__PURE__*/_interopNamespace(RadixPopover);
29
+ var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
30
+
31
+ // src/popover.tsx
32
+ function cn(...inputs) {
33
+ return tailwindMerge.twMerge(clsx.clsx(inputs));
34
+ }
35
+ 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";
36
+ var CloseButton = React2__namespace.forwardRef(function CloseButton2(props, ref) {
37
+ const { variant: _variant, size: _size, className, children, ...rest } = props;
38
+ return /* @__PURE__ */ jsxRuntime.jsx(
39
+ "button",
40
+ {
41
+ type: "button",
42
+ "aria-label": "Close",
43
+ ref,
44
+ className: cn(
45
+ "inline-flex items-center justify-center",
46
+ "size-5 min-w-0 shrink-0 p-0",
47
+ "rounded-sm border-0 overflow-hidden",
48
+ "bg-transparent text-[var(--closeButton-fg,currentColor)]",
49
+ "hover:bg-transparent hover:text-[var(--hover-color,currentColor)]",
50
+ "disabled:opacity-40",
51
+ "cursor-pointer",
52
+ className
53
+ ),
54
+ ...rest,
55
+ children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
56
+ "svg",
57
+ {
58
+ className: "size-5",
59
+ viewBox: "0 0 20 20",
60
+ fill: "none",
61
+ "aria-hidden": "true",
62
+ children: /* @__PURE__ */ jsxRuntime.jsx(
63
+ "path",
64
+ {
65
+ d: CLOSE_ICON_PATH,
66
+ fill: "currentColor"
67
+ }
68
+ )
69
+ }
70
+ )
71
+ }
72
+ );
73
+ });
74
+ function parsePlacement(placement) {
75
+ if (!placement) {
76
+ return { side: "bottom", align: "start" };
77
+ }
78
+ const parts = placement.split("-");
79
+ const side = parts[0] ?? "bottom";
80
+ const alignPart = parts[1];
81
+ let align = "center";
82
+ if (alignPart === "start") {
83
+ align = "start";
84
+ } else if (alignPart === "end") {
85
+ align = "end";
86
+ }
87
+ return { side, align };
88
+ }
89
+ var PositioningContext = React2__namespace.createContext({
90
+ side: "bottom",
91
+ align: "start",
92
+ sideOffset: 4,
93
+ alignOffset: 0,
94
+ collisionPadding: 4,
95
+ autoFocus: false,
96
+ closeOnInteractOutside: true
97
+ });
98
+ var PopoverRoot = (props) => {
99
+ const {
100
+ children,
101
+ open,
102
+ defaultOpen,
103
+ onOpenChange,
104
+ positioning,
105
+ autoFocus = false,
106
+ closeOnInteractOutside = true,
107
+ modal = false,
108
+ // lazyMount and unmountOnExit are handled via forceMount on Portal/Content
109
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
110
+ lazyMount: _lazyMount,
111
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
112
+ unmountOnExit: _unmountOnExit
113
+ } = props;
114
+ const mergedPositioning = {
115
+ placement: "bottom-start",
116
+ overflowPadding: 4,
117
+ ...positioning,
118
+ offset: {
119
+ mainAxis: 4,
120
+ ...positioning?.offset
121
+ }
122
+ };
123
+ const { side, align } = parsePlacement(mergedPositioning.placement);
124
+ const positioningValue = React2__namespace.useMemo(() => ({
125
+ side,
126
+ align,
127
+ sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
128
+ alignOffset: mergedPositioning.offset?.crossAxis ?? 0,
129
+ collisionPadding: mergedPositioning.overflowPadding ?? 4,
130
+ autoFocus,
131
+ closeOnInteractOutside
132
+ }), [
133
+ side,
134
+ align,
135
+ mergedPositioning.offset?.mainAxis,
136
+ mergedPositioning.offset?.crossAxis,
137
+ mergedPositioning.overflowPadding,
138
+ autoFocus,
139
+ closeOnInteractOutside
140
+ ]);
141
+ const handleOpenChange = React2__namespace.useCallback((isOpen) => {
142
+ onOpenChange?.({ open: isOpen });
143
+ }, [onOpenChange]);
144
+ return /* @__PURE__ */ jsxRuntime.jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsxRuntime.jsx(
145
+ RadixPopover__namespace.Root,
146
+ {
147
+ open,
148
+ defaultOpen,
149
+ onOpenChange: handleOpenChange,
150
+ modal,
151
+ children
152
+ }
153
+ ) });
154
+ };
155
+ var PopoverTrigger = React2__namespace.forwardRef(function PopoverTrigger2(props, ref) {
156
+ const { asChild = true, ...rest } = props;
157
+ return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Trigger, { asChild, ref, ...rest });
158
+ });
159
+ var PopoverContent = React2__namespace.forwardRef(function PopoverContent2(props, ref) {
160
+ const { portalled = true, portalRef, className, w, minW, maxW, paddingTop, style: styleProp, ...rest } = props;
161
+ const resolvedW = typeof w === "object" ? w.base ?? w.lg : w;
162
+ const contentStyle = {
163
+ ...styleProp,
164
+ ...resolvedW ? { width: resolvedW } : {},
165
+ ...minW ? { minWidth: minW } : {},
166
+ ...maxW ? { maxWidth: maxW } : {},
167
+ ...paddingTop !== void 0 ? { paddingTop: typeof paddingTop === "number" ? `${paddingTop * 4}px` : paddingTop } : {}
168
+ };
169
+ const positioning = React2__namespace.useContext(PositioningContext);
170
+ const preventFocus = React2__namespace.useCallback((e) => e.preventDefault(), []);
171
+ const preventInteract = React2__namespace.useCallback((e) => e.preventDefault(), []);
172
+ const content = /* @__PURE__ */ jsxRuntime.jsx(
173
+ RadixPopover__namespace.Content,
174
+ {
175
+ ref,
176
+ side: positioning.side,
177
+ align: positioning.align,
178
+ sideOffset: positioning.sideOffset,
179
+ alignOffset: positioning.alignOffset,
180
+ collisionPadding: positioning.collisionPadding,
181
+ onOpenAutoFocus: positioning.autoFocus ? void 0 : preventFocus,
182
+ onInteractOutside: positioning.closeOnInteractOutside ? void 0 : preventInteract,
183
+ className: cn(
184
+ "z-50 rounded-lg border border-[var(--color-popover-border,var(--color-border-divider))]",
185
+ "bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
186
+ "shadow-[var(--shadow-popover,var(--shadow-lg))]",
187
+ "outline-none",
188
+ "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
189
+ "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
190
+ "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
191
+ "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
192
+ className
193
+ ),
194
+ style: Object.keys(contentStyle).length > 0 ? contentStyle : void 0,
195
+ ...rest
196
+ }
197
+ );
198
+ if (!portalled) {
199
+ return content;
200
+ }
201
+ return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
202
+ });
203
+ var PopoverArrow = React2__namespace.forwardRef(function PopoverArrow2(props, ref) {
204
+ const { className, ...rest } = props;
205
+ return /* @__PURE__ */ jsxRuntime.jsx(
206
+ RadixPopover__namespace.Arrow,
207
+ {
208
+ ref,
209
+ className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
210
+ ...rest
211
+ }
212
+ );
213
+ });
214
+ var PopoverCloseTrigger = React2__namespace.forwardRef(function PopoverCloseTrigger2(props, ref) {
215
+ const { className, ...rest } = props;
216
+ return /* @__PURE__ */ jsxRuntime.jsx(
217
+ RadixPopover__namespace.Close,
218
+ {
219
+ className: cn("absolute top-1 right-1", className),
220
+ ...rest,
221
+ asChild: true,
222
+ ref,
223
+ children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, {})
224
+ }
225
+ );
226
+ });
227
+ var PopoverCloseTriggerWrapper = React2__namespace.forwardRef(function PopoverCloseTriggerWrapper2(props, ref) {
228
+ const { disabled, children, ...rest } = props;
229
+ if (disabled) {
230
+ return children;
231
+ }
232
+ return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Close, { ref, ...rest, asChild: true, children });
233
+ });
234
+ var PopoverBody = React2__namespace.forwardRef(function PopoverBody2(props, ref) {
235
+ const {
236
+ className,
237
+ style: styleProp,
238
+ display: _display,
239
+ flexDir: _flexDir,
240
+ rowGap: _rowGap,
241
+ px: _px,
242
+ py: _py,
243
+ textStyle: _textStyle,
244
+ alignItems: _alignItems,
245
+ ...rest
246
+ } = props;
247
+ const bodyStyle = {
248
+ ...styleProp,
249
+ ..._display ? { display: _display } : {},
250
+ ..._flexDir ? { flexDirection: _flexDir } : {},
251
+ ..._rowGap !== void 0 ? { rowGap: typeof _rowGap === "number" ? `${_rowGap * 4}px` : _rowGap } : {},
252
+ ..._px !== void 0 ? {
253
+ paddingLeft: typeof _px === "number" ? `${_px * 4}px` : _px,
254
+ paddingRight: typeof _px === "number" ? `${_px * 4}px` : _px
255
+ } : {},
256
+ ..._py !== void 0 ? {
257
+ paddingTop: typeof _py === "number" ? `${_py * 4}px` : _py,
258
+ paddingBottom: typeof _py === "number" ? `${_py * 4}px` : _py
259
+ } : {},
260
+ ..._alignItems ? { alignItems: _alignItems } : {}
261
+ };
262
+ return /* @__PURE__ */ jsxRuntime.jsx(
263
+ "div",
264
+ {
265
+ ref,
266
+ className: cn("p-4", className),
267
+ style: Object.keys(bodyStyle).length > 0 ? bodyStyle : void 0,
268
+ ...rest
269
+ }
270
+ );
271
+ });
272
+ var PopoverHeader = React2__namespace.forwardRef(function PopoverHeader2(props, ref) {
273
+ const { className, ...rest } = props;
274
+ return /* @__PURE__ */ jsxRuntime.jsx(
275
+ "div",
276
+ {
277
+ ref,
278
+ className: cn("px-4 pt-4 pb-0 font-semibold", className),
279
+ ...rest
280
+ }
281
+ );
282
+ });
283
+ var PopoverFooter = React2__namespace.forwardRef(function PopoverFooter2(props, ref) {
284
+ const { className, ...rest } = props;
285
+ return /* @__PURE__ */ jsxRuntime.jsx(
286
+ "div",
287
+ {
288
+ ref,
289
+ className: cn("px-4 pb-4 pt-0", className),
290
+ ...rest
291
+ }
292
+ );
293
+ });
294
+ var PopoverTitle = React2__namespace.forwardRef(function PopoverTitle2(props, ref) {
295
+ const { className, ...rest } = props;
296
+ return /* @__PURE__ */ jsxRuntime.jsx(
297
+ "h3",
298
+ {
299
+ ref,
300
+ className: cn("text-base font-semibold", className),
301
+ ...rest
302
+ }
303
+ );
304
+ });
305
+ var PopoverDescription = React2__namespace.forwardRef(function PopoverDescription2(props, ref) {
306
+ const { className, ...rest } = props;
307
+ return /* @__PURE__ */ jsxRuntime.jsx(
308
+ "p",
309
+ {
310
+ ref,
311
+ className: cn("text-sm", className),
312
+ ...rest
313
+ }
314
+ );
315
+ });
316
+
317
+ exports.PopoverArrow = PopoverArrow;
318
+ exports.PopoverBody = PopoverBody;
319
+ exports.PopoverCloseTrigger = PopoverCloseTrigger;
320
+ exports.PopoverCloseTriggerWrapper = PopoverCloseTriggerWrapper;
321
+ exports.PopoverContent = PopoverContent;
322
+ exports.PopoverDescription = PopoverDescription;
323
+ exports.PopoverFooter = PopoverFooter;
324
+ exports.PopoverHeader = PopoverHeader;
325
+ exports.PopoverRoot = PopoverRoot;
326
+ exports.PopoverTitle = PopoverTitle;
327
+ exports.PopoverTrigger = PopoverTrigger;