@luxfi/ui 1.0.1

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 (124) 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 +711 -0
  16. package/dist/collapsible.js +685 -0
  17. package/dist/color-mode.cjs +36 -0
  18. package/dist/color-mode.js +32 -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 +5749 -0
  34. package/dist/index.js +5586 -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 +639 -0
  40. package/dist/link.js +612 -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 +22 -0
  52. package/dist/provider.js +20 -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 +1053 -0
  68. package/dist/table.js +1019 -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 +296 -0
  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 +37 -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 +333 -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
@@ -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;