@floegence/floe-webapp-core 0.90.11 → 0.91.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.
@@ -0,0 +1,63 @@
1
+ import { type JSX } from 'solid-js';
2
+ import { type SelectOption } from './Select';
3
+ export interface PromptCardProps {
4
+ open: boolean;
5
+ /** Viewport coordinates captured by the host at the contextual action. */
6
+ anchor?: Readonly<{
7
+ x: number;
8
+ y: number;
9
+ }> | null;
10
+ viewportInsets?: Readonly<{
11
+ top?: number;
12
+ right?: number;
13
+ bottom?: number;
14
+ left?: number;
15
+ }>;
16
+ /** Defaults to the trigger's surface. Viewport scope is an explicit host choice. */
17
+ portalScope?: 'surface' | 'viewport';
18
+ owner?: HTMLElement;
19
+ title: string;
20
+ icon?: JSX.Element;
21
+ closeLabel: string;
22
+ question: JSX.Element;
23
+ value: string;
24
+ onValueChange: (value: string) => void;
25
+ inputLabel: string;
26
+ placeholder?: string;
27
+ submitLabel: string;
28
+ onSubmit: () => void;
29
+ onClose: () => void;
30
+ busy?: boolean;
31
+ inputDisabled?: boolean;
32
+ submitDisabled?: boolean;
33
+ autoFocus?: boolean;
34
+ references?: JSX.Element;
35
+ /** Optional host-owned files; selection, paste and drop share this callback. */
36
+ attachment?: Readonly<{
37
+ label: string;
38
+ accept?: string;
39
+ onFiles: (files: File[]) => void;
40
+ }>;
41
+ /** Compact host-owned choice, for example an assistant model. */
42
+ selection?: Readonly<{
43
+ label: string;
44
+ placeholder?: string;
45
+ value: string;
46
+ options: readonly SelectOption[];
47
+ onChange: (value: string) => void;
48
+ loading?: boolean;
49
+ error?: string;
50
+ onRetry?: () => void;
51
+ }>;
52
+ /** Host input/scroll ownership attributes for the constrained reading viewport. */
53
+ bodyProps?: JSX.HTMLAttributes<HTMLDivElement>;
54
+ feedback?: JSX.Element;
55
+ /** Additional portalled content that belongs to this interaction. */
56
+ containsTarget?: (target: EventTarget | null) => boolean;
57
+ onActivate?: () => void;
58
+ editorRef?: (element: HTMLTextAreaElement) => void;
59
+ class?: string;
60
+ zIndex?: number;
61
+ }
62
+ /** A short contextual input. The host owns the draft and asynchronous result. */
63
+ export declare function PromptCard(props: PromptCardProps): JSX.Element;
@@ -0,0 +1,312 @@
1
+ import { createComponent as u, Portal as xe, use as Y, setAttribute as x, insert as d, spread as ye, mergeProps as we, effect as N, setStyleProperty as C, className as Se, template as O, delegateEvents as Ce } from "solid-js/web";
2
+ import { createUniqueId as Me, createSignal as z, onCleanup as p, createMemo as F, createEffect as W, untrack as G, Show as $ } from "solid-js";
3
+ import { useOverlayMask as Pe } from "../../hooks/useOverlayMask.js";
4
+ import { deferAfterPaint as de } from "../../utils/defer.js";
5
+ import { ensureSurfacePortalInteractionTracking as ke, resolveSurfacePortalHost as $e, resolveSurfacePortalScale as De, resolveSurfacePortalBoundaryRect as Ee, projectSurfacePortalPosition as Ae, readFreshInteractionSnapshot as Le, resolveSurfacePortalMount as Te, isSurfacePortalMode as Ie } from "./dialogSurfaceScope.js";
6
+ import { cn as ue } from "../../utils/cn.js";
7
+ import { readViewportSnapshot as ze, observeViewport as Fe } from "../../viewport.js";
8
+ import { X as Oe, Paperclip as Be, ArrowUp as He } from "../icons/index.js";
9
+ import { Button as J } from "./Button.js";
10
+ import { Select as Re } from "./Select.js";
11
+ import { createFloatingPresence as Ve } from "./floatingPresence.js";
12
+ var qe = /* @__PURE__ */ O("<span class=floe-prompt-card-icon aria-hidden=true>"), _e = /* @__PURE__ */ O("<div class=floe-prompt-card-references>"), Ne = /* @__PURE__ */ O("<input type=file multiple hidden tabindex=-1>"), We = /* @__PURE__ */ O("<div class=floe-prompt-card-feedback>"), Xe = /* @__PURE__ */ O("<div class=floe-prompt-card-positioner><div role=dialog aria-modal=false tabindex=-1 data-floe-prompt-card data-floe-input-surface data-floe-surface=floating data-floe-local-interaction-surface=true><header class=floe-prompt-card-header><h2></h2></header><div><div class=floe-prompt-card-question></div><div class=floe-prompt-card-composer><div class=floe-prompt-card-field><textarea class=floe-prompt-card-input rows=2></textarea></div><div class=floe-prompt-card-actions><div class=floe-prompt-card-tools>");
13
+ function nt(t) {
14
+ ke();
15
+ const Z = Me(), [fe, ee] = z(!1), [me, te] = z(!1), c = () => t.busy || fe();
16
+ let ne = !1;
17
+ p(() => {
18
+ ne = !0;
19
+ });
20
+ const [h, he] = z(ze(window)), [D, ge] = z(), [X, ve] = z({
21
+ width: 0,
22
+ height: 0
23
+ }), be = F((n) => t.open ? t.anchor : n), y = Ve({
24
+ open: () => t.open,
25
+ element: D
26
+ });
27
+ let M, K, E = !1, U, B;
28
+ const j = (n) => {
29
+ t.open && !c() && !t.inputDisabled && n.length && t.attachment?.onFiles(n);
30
+ };
31
+ W(() => {
32
+ (!t.open || c() || t.inputDisabled) && te(!1);
33
+ });
34
+ const A = F(() => !y.mounted() || t.portalScope === "viewport" ? {
35
+ host: null,
36
+ boundaryHost: null,
37
+ mountHost: null,
38
+ mode: "global"
39
+ } : $e({
40
+ owner: t.owner
41
+ })), H = () => Ie(A()), L = F(() => (h(), X(), H() ? De(A()) : {
42
+ x: h().fixedScale,
43
+ y: h().fixedScale
44
+ }));
45
+ W(() => {
46
+ y.mounted() && p(Fe(window, he));
47
+ }), W(() => {
48
+ const n = D();
49
+ if (!y.mounted() || !n) return;
50
+ const a = () => ve((s) => {
51
+ const f = n.offsetWidth, m = n.offsetHeight;
52
+ return s.width === f && s.height === m ? s : {
53
+ width: f,
54
+ height: m
55
+ };
56
+ }), i = new ResizeObserver(a);
57
+ i.observe(n), a(), p(() => i.disconnect());
58
+ });
59
+ const w = F(() => {
60
+ const n = h(), a = H() ? Ee(A()) : n.visible, i = n.visible.width < 640 ? 8 : 12, s = t.viewportInsets, f = Math.max(n.visible.left, a.left) + Math.max(n.safeArea.left, s?.left ?? 0) + i, m = Math.max(n.visible.top, a.top) + Math.max(n.safeArea.top, s?.top ?? 0) + i, S = Math.min(n.visible.right, a.right) - Math.max(n.safeArea.right, s?.right ?? 0) - i, P = Math.min(n.visible.bottom, a.bottom) - Math.max(n.safeArea.bottom, s?.bottom ?? 0) - i, o = Math.max(0, S - f), g = Math.min(X().width * L().x, o), k = Math.max(0, P - m), e = Math.min(X().height * L().y, k), r = be(), l = (V, q, _) => Math.max(q, Math.min(V, _)), v = l(r ? r.x + 8 : f + (o - g) / 2, f, S - g), b = !r || r.y + 8 + e <= P, T = r ? b ? r.y + 8 : r.y - e - 8 : m + Math.max(0, (k - e) * 0.32), I = l(T, m, P - e);
61
+ return {
62
+ x: v,
63
+ y: I,
64
+ availableWidth: o,
65
+ maxHeight: k,
66
+ side: !r || I !== T ? "edge" : b ? "bottom" : "top",
67
+ originX: r ? l(r.x - v, 16, g - 16) : g / 2
68
+ };
69
+ }), ae = F(() => H() ? Ae(w(), A()) : {
70
+ x: (w().x + h().fixedOffset.left) / h().fixedScale,
71
+ y: (w().y + h().fixedOffset.top) / h().fixedScale
72
+ }), R = (n) => {
73
+ c() || !t.open || E || (t.onClose(), n && de(() => G(() => {
74
+ !t.open && K?.isConnected && K.focus({
75
+ preventScroll: !0
76
+ });
77
+ })));
78
+ };
79
+ W(() => {
80
+ if (!t.open) return;
81
+ const n = document.activeElement, i = t.owner ?? Le()?.target?.closest("button, a[href], input, [tabindex]") ?? (n instanceof HTMLElement && n !== document.body ? n : void 0);
82
+ i && !G(D)?.contains(i) && !t.containsTarget?.(i) && (K = i), queueMicrotask(() => {
83
+ !t.open || t.autoFocus === !1 || !M?.isConnected || (M.focus({
84
+ preventScroll: !0
85
+ }), M.setSelectionRange(M.value.length, M.value.length));
86
+ });
87
+ }), Pe({
88
+ open: () => t.open,
89
+ root: D,
90
+ containsTarget: (n) => !!(n instanceof Node && D()?.contains(n)) || !!t.containsTarget?.(n) || !!(n instanceof Node && document.getElementById(B?.getAttribute("aria-controls") ?? "")?.parentElement?.contains(n)),
91
+ onClose: () => R(!0),
92
+ onInteractOutside: (n) => {
93
+ n.type === "pointerdown" && R(!1);
94
+ },
95
+ // Related previews belong to pointer ownership, but own their Escape command.
96
+ closeOnEscape: "none",
97
+ escapeKeyPhase: "bubble",
98
+ lockBodyScroll: !1,
99
+ trapFocus: !1,
100
+ autoFocus: !1,
101
+ restoreFocus: !1,
102
+ blockHotkeys: !1
103
+ });
104
+ const ie = () => {
105
+ !t.open || c() || t.submitDisabled || (ee(!0), de(() => G(() => {
106
+ if (!ne)
107
+ try {
108
+ t.open && t.onSubmit();
109
+ } finally {
110
+ ee(!1);
111
+ }
112
+ })));
113
+ };
114
+ return u($, {
115
+ get when() {
116
+ return y.mounted();
117
+ },
118
+ get children() {
119
+ return u(xe, {
120
+ get mount() {
121
+ return Te(A());
122
+ },
123
+ get children() {
124
+ var n = Xe(), a = n.firstChild, i = a.firstChild, s = i.firstChild, f = i.nextSibling, m = f.firstChild, S = m.nextSibling, P = S.firstChild, o = P.firstChild, g = P.nextSibling, k = g.firstChild;
125
+ return a.$$keydown = (e) => {
126
+ e.key !== "Escape" || e.defaultPrevented || e.isComposing || E || B?.getAttribute("aria-expanded") === "true" && B.contains(e.target) || (e.preventDefault(), e.stopPropagation(), R(!0));
127
+ }, a.$$focusin = () => t.onActivate?.(), a.$$pointerdown = () => t.onActivate?.(), Y(ge, a), x(a, "aria-labelledby", Z), d(i, u($, {
128
+ get when() {
129
+ return t.icon;
130
+ },
131
+ get children() {
132
+ var e = qe();
133
+ return d(e, () => t.icon), e;
134
+ }
135
+ }), s), x(s, "id", Z), d(s, () => t.title), d(i, u(J, {
136
+ variant: "ghost",
137
+ size: "icon",
138
+ icon: Oe,
139
+ class: "floe-prompt-card-close",
140
+ get disabled() {
141
+ return c();
142
+ },
143
+ get title() {
144
+ return t.closeLabel;
145
+ },
146
+ get "aria-label"() {
147
+ return t.closeLabel;
148
+ },
149
+ onClick: () => R(!0)
150
+ }), null), ye(f, we(() => t.bodyProps, {
151
+ get class() {
152
+ return ue("floe-prompt-card-body", t.bodyProps?.class);
153
+ }
154
+ }), !1, !0), d(m, () => t.question), S.addEventListener("drop", (e) => {
155
+ !t.attachment || !e.dataTransfer?.files.length || (e.preventDefault(), j(Array.from(e.dataTransfer.files)));
156
+ }), S.addEventListener("dragover", (e) => {
157
+ t.attachment && !c() && !t.inputDisabled && e.dataTransfer?.types.includes("Files") && e.preventDefault();
158
+ }), o.$$keydown = (e) => {
159
+ e.key === "Enter" && !e.shiftKey && !e.isComposing && !E && (e.preventDefault(), ie());
160
+ }, o.addEventListener("compositionend", (e) => {
161
+ E = !1, t.onValueChange(e.currentTarget.value);
162
+ }), o.addEventListener("compositionupdate", (e) => t.onValueChange(e.currentTarget.value)), o.addEventListener("compositionstart", () => {
163
+ E = !0;
164
+ }), o.$$input = (e) => t.onValueChange(e.currentTarget.value), o.addEventListener("paste", (e) => {
165
+ !t.attachment || !e.clipboardData?.files.length || (e.preventDefault(), j(Array.from(e.clipboardData.files)));
166
+ }), Y((e) => {
167
+ M = e, t.editorRef?.(e);
168
+ }, o), d(S, u($, {
169
+ get when() {
170
+ return t.references;
171
+ },
172
+ get children() {
173
+ var e = _e();
174
+ return d(e, () => t.references), N(() => e.inert = !!c()), e;
175
+ }
176
+ }), g), d(k, u($, {
177
+ get when() {
178
+ return t.attachment;
179
+ },
180
+ get children() {
181
+ return [(() => {
182
+ var e = Ne();
183
+ e.addEventListener("change", (l) => {
184
+ j(Array.from(l.currentTarget.files ?? [])), l.currentTarget.value = "";
185
+ });
186
+ var r = U;
187
+ return typeof r == "function" ? Y(r, e) : U = e, N((l) => {
188
+ var v = t.attachment?.accept, b = c() || t.inputDisabled;
189
+ return v !== l.e && x(e, "accept", l.e = v), b !== l.t && (e.disabled = l.t = b), l;
190
+ }, {
191
+ e: void 0,
192
+ t: void 0
193
+ }), e;
194
+ })(), u(J, {
195
+ variant: "ghost",
196
+ size: "icon",
197
+ icon: Be,
198
+ class: "floe-prompt-card-attach",
199
+ get disabled() {
200
+ return c() || t.inputDisabled;
201
+ },
202
+ get "aria-label"() {
203
+ return t.attachment?.label;
204
+ },
205
+ get title() {
206
+ return t.attachment?.label;
207
+ },
208
+ onClick: () => U?.click()
209
+ })];
210
+ }
211
+ }), null), d(k, u($, {
212
+ get when() {
213
+ return t.selection;
214
+ },
215
+ get children() {
216
+ return u(Re, {
217
+ ref: (e) => {
218
+ B = e;
219
+ },
220
+ class: "floe-prompt-card-selection",
221
+ get open() {
222
+ return me();
223
+ },
224
+ onOpenChange: te,
225
+ get zIndex() {
226
+ return (t.zIndex ?? 100) + 1;
227
+ },
228
+ get ariaLabel() {
229
+ return t.selection.label;
230
+ },
231
+ get placeholder() {
232
+ return t.selection.placeholder;
233
+ },
234
+ get value() {
235
+ return t.selection.value;
236
+ },
237
+ get options() {
238
+ return t.selection.options;
239
+ },
240
+ onChange: (e) => t.selection.onChange(e),
241
+ get disabled() {
242
+ return c() || t.inputDisabled;
243
+ },
244
+ get loading() {
245
+ return t.selection.loading;
246
+ },
247
+ get error() {
248
+ return t.selection.error;
249
+ },
250
+ get onRetry() {
251
+ return t.selection.onRetry;
252
+ }
253
+ });
254
+ }
255
+ }), null), d(g, u(J, {
256
+ variant: "primary",
257
+ size: "icon",
258
+ icon: He,
259
+ class: "floe-prompt-card-submit",
260
+ get disabled() {
261
+ return t.submitDisabled;
262
+ },
263
+ get loading() {
264
+ return c();
265
+ },
266
+ get "aria-busy"() {
267
+ return c() ? "true" : "false";
268
+ },
269
+ get title() {
270
+ return t.submitLabel;
271
+ },
272
+ get "aria-label"() {
273
+ return t.submitLabel;
274
+ },
275
+ onClick: ie
276
+ }), null), d(f, u($, {
277
+ get when() {
278
+ return t.feedback;
279
+ },
280
+ get children() {
281
+ var e = We();
282
+ return d(e, () => t.feedback), e;
283
+ }
284
+ }), null), N((e) => {
285
+ var r = H() ? "absolute" : "fixed", l = `${ae().x}px`, v = `${ae().y}px`, b = `${w().availableWidth / L().x}px`, T = `${w().maxHeight / L().y}px`, I = `${w().originX / L().x}px`, Q = t.zIndex ?? 100, V = ue("floe-prompt-card floe-floating-presence", t.class), q = w().side, _ = y.state(), re = y.exiting(), oe = y.exiting() ? "true" : void 0, le = t.inputLabel, ce = t.placeholder, se = c() || t.inputDisabled;
286
+ return r !== e.e && C(n, "position", e.e = r), l !== e.t && C(n, "left", e.t = l), v !== e.a && C(n, "top", e.a = v), b !== e.o && C(n, "--floe-prompt-max-width", e.o = b), T !== e.i && C(n, "--floe-prompt-max-height", e.i = T), I !== e.n && C(n, "--floe-prompt-origin-x", e.n = I), Q !== e.s && C(n, "z-index", e.s = Q), V !== e.h && Se(a, e.h = V), q !== e.r && x(a, "data-floating-side", e.r = q), _ !== e.d && x(a, "data-floating-presence", e.d = _), re !== e.l && (a.inert = e.l = re), oe !== e.u && x(a, "aria-hidden", e.u = oe), le !== e.c && x(o, "aria-label", e.c = le), ce !== e.w && x(o, "placeholder", e.w = ce), se !== e.m && (o.disabled = e.m = se), e;
287
+ }, {
288
+ e: void 0,
289
+ t: void 0,
290
+ a: void 0,
291
+ o: void 0,
292
+ i: void 0,
293
+ n: void 0,
294
+ s: void 0,
295
+ h: void 0,
296
+ r: void 0,
297
+ d: void 0,
298
+ l: void 0,
299
+ u: void 0,
300
+ c: void 0,
301
+ w: void 0,
302
+ m: void 0
303
+ }), N(() => o.value = t.value), n;
304
+ }
305
+ });
306
+ }
307
+ });
308
+ }
309
+ Ce(["pointerdown", "focusin", "keydown", "input"]);
310
+ export {
311
+ nt as PromptCard
312
+ };
@@ -1,8 +1,8 @@
1
- import { spread as C, mergeProps as w, insert as i, createComponent as g, memo as z, effect as _, setAttribute as m, className as $, template as p, delegateEvents as S } from "solid-js/web";
2
- import { splitProps as P, For as A } from "solid-js";
3
- import { cn as b } from "../../utils/cn.js";
4
- var D = /* @__PURE__ */ p("<div role=group data-floe-surface=inset data-floe-surface-part=rail>"), E = /* @__PURE__ */ p('<button type=button role=radio data-floe-surface-part=segment data-floe-interactive=item><span class="inline-flex items-center gap-1.5">');
5
- const F = {
1
+ import { use as $, spread as V, mergeProps as q, insert as k, createComponent as W, memo as B, effect as j, setAttribute as p, className as A, setStyleProperty as x, template as H, delegateEvents as G } from "solid-js/web";
2
+ import { splitProps as I, createSignal as J, createEffect as K, onMount as Q, onCleanup as D, For as U, untrack as X } from "solid-js";
3
+ import { cn as z } from "../../utils/cn.js";
4
+ var Y = /* @__PURE__ */ H("<div role=group data-floe-surface=inset data-floe-surface-part=rail><span aria-hidden=true>"), Z = /* @__PURE__ */ H('<button type=button role=radio data-floe-surface-part=segment data-floe-interactive=item><span class="inline-flex items-center gap-1.5"><span class=floe-segmented-control__label>');
5
+ const ee = {
6
6
  sm: {
7
7
  container: "p-0.5 gap-0.5",
8
8
  button: "h-[var(--floe-control-height-xs)] px-[var(--floe-control-padding-sm)] rounded-sm",
@@ -19,46 +19,113 @@ const F = {
19
19
  icon: "w-4 h-4"
20
20
  }
21
21
  };
22
- function B(h) {
23
- const [o, x] = P(h, ["value", "onChange", "options", "size", "disabled", "class"]), y = () => o.size ?? "md", a = () => F[y()], k = (n, r) => {
24
- o.disabled || r || n !== o.value && o.onChange(n);
22
+ function ne(L) {
23
+ const [r, N] = I(L, ["value", "onChange", "options", "size", "disabled", "class"]);
24
+ let d, c;
25
+ const b = /* @__PURE__ */ new Map(), [s, S] = J();
26
+ let f, u, h;
27
+ const y = () => {
28
+ const o = b.get(r.value);
29
+ if (!d || !o) {
30
+ u?.cancel(), S(void 0), h = void 0;
31
+ return;
32
+ }
33
+ if (!o.offsetWidth || !d.getClientRects().length) return;
34
+ const n = {
35
+ x: o.offsetLeft,
36
+ y: o.offsetTop,
37
+ width: o.offsetWidth,
38
+ height: o.offsetHeight
39
+ }, v = X(s);
40
+ if (v && Object.keys(n).every((a) => n[a] === v[a]) && h === r.value) return;
41
+ const e = v && h !== r.value && c && !window.matchMedia("(prefers-reduced-motion: reduce), (forced-colors: active)").matches ? getComputedStyle(c) : void 0, l = e ? {
42
+ transform: e.transform,
43
+ width: e.width
44
+ } : void 0;
45
+ if (u?.cancel(), S(n), h = r.value, l && c) {
46
+ const a = getComputedStyle(d);
47
+ u = c.animate([l, {
48
+ transform: `translate(${n.x}px, ${n.y}px)`,
49
+ width: `${n.width}px`
50
+ }], {
51
+ duration: parseFloat(a.getPropertyValue("--floe-duration-base")) || 200,
52
+ easing: a.getPropertyValue("--floe-ease-out").trim() || "ease-out"
53
+ }), u.id = "floe-segmented-selection";
54
+ }
55
+ };
56
+ K(() => {
57
+ r.value, r.options, r.size, y();
58
+ }), Q(() => {
59
+ if (typeof ResizeObserver < "u") {
60
+ f = new ResizeObserver(y), f.observe(d);
61
+ for (const o of b.values()) f.observe(o);
62
+ }
63
+ y();
64
+ }), D(() => {
65
+ f?.disconnect(), u?.cancel();
66
+ });
67
+ const P = () => r.size ?? "md", w = () => ee[P()], T = (o, n) => {
68
+ r.disabled || n || o !== r.value && r.onChange(o);
25
69
  };
26
70
  return (() => {
27
- var n = D();
28
- return C(n, w({
71
+ var o = Y(), n = o.firstChild, v = d;
72
+ typeof v == "function" ? $(v, o) : d = o, V(o, q({
73
+ get "data-floe-segmented-pill"() {
74
+ return s() ? "true" : void 0;
75
+ },
76
+ get "data-floe-segmented-motion"() {
77
+ return s() ? "ready" : void 0;
78
+ },
29
79
  get class() {
30
- return b("floe-segmented-control inline-flex items-center border", "rounded-group", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", a().container, o.disabled && "opacity-50 pointer-events-none", o.class);
80
+ return z("floe-segmented-control relative inline-flex items-center border", "rounded-group", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", w().container, r.disabled && "opacity-50 pointer-events-none", r.class);
31
81
  }
32
- }, x), !1, !0), i(n, g(A, {
82
+ }, N), !1, !0);
83
+ var C = c;
84
+ return typeof C == "function" ? $(C, n) : c = n, k(o, W(U, {
33
85
  get each() {
34
- return o.options;
86
+ return r.options;
35
87
  },
36
- children: (r) => {
37
- const l = () => o.value === r.value, s = () => o.disabled || r.disabled;
88
+ children: (e) => {
89
+ const l = () => r.value === e.value, a = () => r.disabled || e.disabled;
38
90
  return (() => {
39
- var t = E(), c = t.firstChild;
40
- return t.$$click = () => k(r.value, r.disabled), i(c, (() => {
41
- var e = z(() => !!r.icon);
42
- return () => e() && g(r.icon, {
91
+ var i = Z(), g = i.firstChild, m = g.firstChild;
92
+ return i.$$click = () => T(e.value, e.disabled), $((t) => {
93
+ b.set(e.value, t), f?.observe(t), D(() => {
94
+ f?.unobserve(t), b.delete(e.value);
95
+ });
96
+ }, i), k(g, (() => {
97
+ var t = B(() => !!e.icon);
98
+ return () => t() && W(e.icon, {
43
99
  get class() {
44
- return a().icon;
100
+ return w().icon;
45
101
  }
46
102
  });
47
- })(), null), i(c, () => r.label, null), _((e) => {
48
- var d = l() ? "raised" : "flat", f = l(), u = s(), v = b("floe-segmented-control__item font-medium cursor-pointer border", "transition-[background-color,border-color,color,box-shadow] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--floe-plane)]", a().button, l() ? "text-[var(--primary-foreground)]" : "text-[var(--floe-ink-soft)] hover:text-foreground", s() && "cursor-not-allowed opacity-50");
49
- return d !== e.e && m(t, "data-floe-surface", e.e = d), f !== e.t && m(t, "aria-checked", e.t = f), u !== e.a && (t.disabled = e.a = u), v !== e.o && $(t, e.o = v), e;
103
+ })(), m), k(m, () => e.label), j((t) => {
104
+ var _ = e.label, M = e.label, O = l() ? "raised" : "flat", R = l(), E = a(), F = z("floe-segmented-control__item relative font-medium cursor-pointer border", "transition-[background-color,border-color,color,box-shadow] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--floe-plane)]", w().button, l() ? "text-[var(--primary-foreground)]" : "text-[var(--floe-ink-soft)] hover:text-foreground", a() && "cursor-not-allowed opacity-50");
105
+ return _ !== t.e && p(i, "aria-label", t.e = _), M !== t.t && p(i, "title", t.t = M), O !== t.a && p(i, "data-floe-surface", t.a = O), R !== t.o && p(i, "aria-checked", t.o = R), E !== t.i && (i.disabled = t.i = E), F !== t.n && A(i, t.n = F), t;
50
106
  }, {
51
107
  e: void 0,
52
108
  t: void 0,
53
109
  a: void 0,
54
- o: void 0
55
- }), t;
110
+ o: void 0,
111
+ i: void 0,
112
+ n: void 0
113
+ }), i;
56
114
  })();
57
115
  }
58
- })), n;
116
+ }), null), j((e) => {
117
+ var l = z("floe-segmented-control__pill", P() === "lg" ? "rounded-md" : "rounded-sm"), a = s() ? "visible" : "hidden", i = `translate(${s()?.x ?? 0}px, ${s()?.y ?? 0}px)`, g = `${s()?.width ?? 0}px`, m = `${s()?.height ?? 0}px`;
118
+ return l !== e.e && A(n, e.e = l), a !== e.t && x(n, "visibility", e.t = a), i !== e.a && x(n, "transform", e.a = i), g !== e.o && x(n, "width", e.o = g), m !== e.i && x(n, "height", e.i = m), e;
119
+ }, {
120
+ e: void 0,
121
+ t: void 0,
122
+ a: void 0,
123
+ o: void 0,
124
+ i: void 0
125
+ }), o;
59
126
  })();
60
127
  }
61
- S(["click"]);
128
+ G(["click"]);
62
129
  export {
63
- B as SegmentedControl
130
+ ne as SegmentedControl
64
131
  };
@@ -19,6 +19,8 @@ export interface SelectBaseProps {
19
19
  options: readonly SelectOption[];
20
20
  placeholder?: string;
21
21
  class?: string;
22
+ /** Optional layer for choices nested in elevated overlays. */
23
+ zIndex?: number;
22
24
  open?: boolean;
23
25
  defaultOpen?: boolean;
24
26
  onOpenChange?: (open: boolean) => void;