@floegence/floe-webapp-core 0.86.60 → 0.86.62

package/dist/components/ui/Dialog.js

@@ -1,17 +1,17 @@
-import { createComponent as o, use as G, setAttribute as u, style as ne, Portal as ae, spread as I, mergeProps as M, memo as x, insert as l, effect as D, className as q, template as h } from "solid-js/web";
-import { createSignal as P, onMount as ie, onCleanup as E, createUniqueId as le, createEffect as K, createMemo as U, Show as g, untrack as V } from "solid-js";
-import { cn as m } from "../../utils/cn.js";
+import { createComponent as r, use as G, setAttribute as c, style as ne, Portal as ae, spread as I, mergeProps as E, memo as p, insert as i, effect as P, className as q, template as m } from "solid-js/web";
+import { createSignal as T, onMount as le, onCleanup as M, createUniqueId as ie, createEffect as K, createMemo as U, Show as u, untrack as V } from "solid-js";
+import { cn as g } from "../../utils/cn.js";
 import { Button as j } from "./Button.js";
 import { X as de } from "../icons/index.js";
-import { useResolvedFloeConfig as se } from "../../context/FloeConfigContext.js";
-import { useOverlayMask as ce } from "../../hooks/useOverlayMask.js";
-import { resolveSurfacePortalHost as fe, DIALOG_SURFACE_BOUNDARY_ATTR as k, SURFACE_PORTAL_LAYER_ATTR as ue, DIALOG_SURFACE_HOST_ATTR as ge, isSurfacePortalMode as z, projectSurfacePortalRect as me, resolveSurfacePortalBoundaryRect as he, resolveSurfacePortalMount as be } from "./dialogSurfaceScope.js";
-import { LOCAL_INTERACTION_SURFACE_ATTR as ve } from "./localInteractionSurface.js";
+import { useResolvedFloeConfig as fe } from "../../context/FloeConfigContext.js";
+import { useOverlayMask as se } from "../../hooks/useOverlayMask.js";
+import { resolveSurfacePortalHost as ce, DIALOG_SURFACE_BOUNDARY_ATTR as k, SURFACE_PORTAL_LAYER_ATTR as ue, DIALOG_SURFACE_HOST_ATTR as ge, isSurfacePortalMode as z, projectSurfacePortalRect as me, resolveSurfacePortalBoundaryRect as he, resolveSurfacePortalMount as ve } from "./dialogSurfaceScope.js";
+import { LOCAL_INTERACTION_SURFACE_ATTR as ye } from "./localInteractionSurface.js";
 import { createFloatingPresence as we } from "./floatingPresence.js";
-import { useDialogPlacement as ye } from "./DialogPlacementContext.js";
-import { observeViewport as xe, viewportStyle as pe } from "../../viewport.js";
+import { useDialogPlacement as be } from "./DialogPlacementContext.js";
+import { observeViewport as pe, viewportStyle as xe } from "../../viewport.js";
 import { resolveFloatingBoundary as $e } from "./surfaceFloatingBoundary.js";
-var Ae = /* @__PURE__ */ h("<span aria-hidden=true>"), Ce = /* @__PURE__ */ h('<h2 class="text-sm font-semibold">'), _e = /* @__PURE__ */ h('<div data-floe-dialog-header class="flex shrink-0 items-start justify-between p-3 border-b border-border"><div>'), ke = /* @__PURE__ */ h('<p class="mb-3 shrink-0 text-[length:var(--floe-type-body)] leading-[var(--floe-line-body)] text-muted-foreground last:mb-0">'), Se = /* @__PURE__ */ h('<div data-floe-dialog-footer class="flex shrink-0 items-center justify-end gap-2 p-3 border-t border-border">'), Oe = /* @__PURE__ */ h("<div><div></div><div><div data-floe-surface=floating><div data-floe-dialog-body>"), Re = /* @__PURE__ */ h("<h2 class=sr-only>");
+var Ae = /* @__PURE__ */ m("<span aria-hidden=true>"), Ce = /* @__PURE__ */ m('<h2 class="text-[length:var(--floe-type-heading-sm)] font-semibold leading-[var(--floe-line-heading)] tracking-[var(--floe-tracking-tight)] text-[var(--floe-ink)]">'), _e = /* @__PURE__ */ m('<div data-floe-dialog-header class="flex shrink-0 items-start justify-between gap-[var(--floe-gap-control)] px-[var(--floe-pad-group)] py-[var(--floe-pad-control)] border-b border-[var(--floe-line)]"><div>'), ke = /* @__PURE__ */ m('<p class="mb-3 shrink-0 text-[length:var(--floe-type-body)] leading-[var(--floe-line-body)] text-[var(--floe-ink-soft)] last:mb-0">'), Se = /* @__PURE__ */ m('<div data-floe-dialog-footer class="flex shrink-0 items-center justify-end gap-[var(--floe-gap-control)] px-[var(--floe-pad-group)] py-[var(--floe-pad-control)] border-t border-[var(--floe-line)]">'), Oe = /* @__PURE__ */ m("<div><div></div><div><div data-floe-surface=floating><div data-floe-dialog-body>"), Re = /* @__PURE__ */ m("<h2 class=sr-only>");
 const De = {
   display: "none"
 };
@@ -36,51 +36,49 @@ function Be(e) {
   window.clearTimeout(e);
 }
 function Fe(e) {
-  const p = ye(), [n, W] = P();
-  ie(() => E(xe(window, W)));
-  const c = le(), T = () => `dialog-${c}-title`, H = () => `dialog-${c}-description`;
-  let B;
-  const [S, Y] = P(null), [L, X] = P(0), [J, Q] = P(0), $ = () => e.presentation === "side-drawer", f = () => e.presentation === "bottom-drawer", s = we({
-    open: () => e.open && !!S() && L() > 0,
-    get exitDurationMs() {
-      return f() ? 180 : 160;
-    }
-  }), A = () => s.mounted() && !!S() && L() > 0;
-  K(() => e.onPresenceChange?.(A())), E(() => e.onPresenceChange?.(!1));
+  const x = be(), [n, W] = T();
+  le(() => M(pe(window, W)));
+  const s = ie(), B = () => `dialog-${s}-title`, H = () => `dialog-${s}-description`;
+  let S;
+  const [O, Y] = T(null), [L, X] = T(0), [J, Q] = T(0), $ = () => e.presentation === "side-drawer", h = () => e.presentation === "bottom-drawer", f = we({
+    open: () => e.open && !!O() && L() > 0,
+    element: () => S
+  }), A = () => f.mounted() && !!O() && L() > 0;
+  K(() => e.onPresenceChange?.(A())), M(() => e.onPresenceChange?.(!1));
   const ee = (t) => {
     Y(t), Pe(() => {
-      V(S) === t && X((d) => d + 1);
+      V(O) === t && X((d) => d + 1);
     });
-  }, O = U(() => A() ? fe({
-    owner: S()
+  }, R = U(() => A() ? ce({
+    owner: O()
   }) : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), C = () => `dialog-boundary-${c}`, a = () => p.mode() === "auto" && z(O()), te = () => a() ? be(O()) : void 0, N = () => e.globalZIndex ?? p.globalZIndex(), F = (t) => me($e(t, void 0, V(n)?.safeArea) ?? he(t), t), re = () => F(O()), R = U(() => (J(), n(), re())), oe = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${k}="${C()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${k}="${C()}"]`) : !1;
+  }), C = () => `dialog-boundary-${s}`, a = () => x.mode() === "auto" && z(R()), te = () => a() ? ve(R()) : void 0, N = () => e.globalZIndex ?? x.globalZIndex(), F = (t) => me($e(t, void 0, V(n)?.safeArea) ?? he(t), t), oe = () => F(R()), D = U(() => (J(), n(), oe())), re = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${k}="${C()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${k}="${C()}"]`) : !1;
   return K(() => {
-    const t = O();
+    const t = R();
     if (!A() || !a() || typeof window > "u")
       return;
-    let d = !1, b = null, i = Z(F(t));
-    const v = () => {
+    let d = !1, v = null, l = Z(F(t));
+    const y = () => {
       if (d || !z(t))
         return;
-      const r = Z(F(t));
-      r !== i && (i = r, Q((w) => w + 1));
+      const o = Z(F(t));
+      o !== l && (l = o, Q((w) => w + 1));
     }, _ = () => {
-      d || (b = Te(() => {
-        v(), _();
+      d || (v = Te(() => {
+        y(), _();
       }));
     };
-    _(), E(() => {
-      d = !0, b !== null && Be(b);
+    _(), M(() => {
+      d = !0, v !== null && Be(v);
     });
-  }), ce({
+  }), se({
     open: A,
-    root: () => B,
-    containsTarget: oe,
+    root: () => S,
+    containsTarget: re,
     onClose: () => e.onOpenChange(!1),
     lockBodyScroll: () => !a(),
     trapFocus: !0,
@@ -93,19 +91,19 @@ function Fe(e) {
     restoreFocus: !0
   }), [(() => {
     var t = Ae();
-    return G(ee, t), u(t, "data-floe-dialog-owner-anchor", c), ne(t, De), t;
-  })(), o(g, {
+    return G(ee, t), c(t, "data-floe-dialog-owner-anchor", s), ne(t, De), t;
+  })(), r(u, {
     get when() {
       return A();
     },
     get children() {
-      return o(ae, {
+      return r(ae, {
         get mount() {
           return te();
         },
         get children() {
-          var t = Oe(), d = t.firstChild, b = d.nextSibling, i = b.firstChild, v = i.firstChild;
-          u(t, "data-floe-dialog-overlay-root", c), I(t, M({
+          var t = Oe(), d = t.firstChild, v = d.nextSibling, l = v.firstChild, y = l.firstChild;
+          c(t, "data-floe-dialog-overlay-root", s), I(t, E({
             get "data-floe-dialog-mode"() {
               return a() ? "surface" : "global";
             },
@@ -113,28 +111,28 @@ function Fe(e) {
               return e.presentation ?? "dialog";
             },
             get "data-floating-presence"() {
-              return s.state();
+              return f.state();
             },
             get "aria-hidden"() {
-              return s.exiting() ? "true" : void 0;
+              return f.exiting() ? "true" : void 0;
             }
           }, {
-            [ve]: "true"
+            [ye]: "true"
           }, () => ({
             [ue]: "true",
             [k]: C()
           }), {
             get class() {
-              return m(a() ? m("absolute z-20 box-border", !$() && "p-3") : m("fixed box-border p-4", N() === void 0 && "z-50"), f() && "floe-bottom-drawer-overlay", $() && "floe-side-drawer-overlay", s.exiting() && !f() && "pointer-events-none");
+              return g(a() ? g("absolute z-20 box-border", !$() && "p-3") : g("fixed box-border p-4", N() === void 0 && "z-50"), h() && "floe-bottom-drawer-overlay", $() && "floe-side-drawer-overlay", f.exiting() && !h() && "pointer-events-none");
             },
             get style() {
-              return x(() => !!a())() ? {
-                left: `${R().left}px`,
-                top: `${R().top}px`,
-                width: `${R().width}px`,
-                height: `${R().height}px`
+              return p(() => !!a())() ? {
+                left: `${D().left}px`,
+                top: `${D().top}px`,
+                width: `${D().width}px`,
+                height: `${D().height}px`
               } : {
-                ...n() ? pe(n()) : {
+                ...n() ? xe(n()) : {
                   inset: "0"
                 },
                 "--floe-dialog-safe-top": `${(n()?.safeArea.top ?? 0) / (n()?.fixedScale ?? 1)}px`,
@@ -148,30 +146,30 @@ function Fe(e) {
                 "z-index": N()
               };
             }
-          }), !1, !0), u(d, "data-floe-dialog-backdrop", c), I(d, M(() => ({
+          }), !1, !0), c(d, "data-floe-dialog-backdrop", s), I(d, E(() => ({
             [k]: C()
           }), {
             get "data-floating-presence"() {
-              return s.state();
+              return f.state();
             },
             get class() {
-              return m("absolute inset-0 floe-floating-presence floe-floating-backdrop", e.closeOnBackdropClick === !1 ? "cursor-default" : "cursor-pointer", f() ? "floe-bottom-drawer-backdrop" : a() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
+              return g("absolute inset-0 floe-floating-presence floe-floating-backdrop", e.closeOnBackdropClick === !1 ? "cursor-default" : "cursor-pointer", h() ? "floe-bottom-drawer-backdrop" : a() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
             },
             onClick: () => {
-              !s.exiting() && e.closeOnBackdropClick !== !1 && e.onOpenChange(!1);
+              !f.exiting() && e.closeOnBackdropClick !== !1 && e.onOpenChange(!1);
             }
           }), !1, !1);
-          var _ = B;
-          return typeof _ == "function" ? G(_, i) : B = i, u(i, "data-floe-dialog-panel", c), I(i, M({
+          var _ = S;
+          return typeof _ == "function" ? G(_, l) : S = l, c(l, "data-floe-dialog-panel", s), I(l, E({
             get "data-floe-drawer-side"() {
-              return x(() => !!$())() ? e.drawerSide ?? "right" : void 0;
+              return p(() => !!$())() ? e.drawerSide ?? "right" : void 0;
             }
           }, () => ({
             [k]: C(),
             [ge]: "true"
           }), {
             get class() {
-              return m(a() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "floe-floating-presence", f() ? "floe-bottom-drawer-panel" : $() ? "floe-side-drawer-panel" : "floe-floating-dialog-panel", "pointer-events-auto flex flex-col", e.class);
+              return g(a() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md", "bg-popover text-popover-foreground rounded-panel shadow-[var(--floe-elevation-float-strong)]", "border border-[var(--floe-line)]", "floe-floating-presence", h() ? "floe-bottom-drawer-panel" : $() ? "floe-side-drawer-panel" : "floe-floating-dialog-panel", "pointer-events-auto flex flex-col", e.class);
             },
             style: {
               "max-height": "100%",
@@ -179,54 +177,54 @@ function Fe(e) {
               "min-width": "0"
             },
             get "data-floating-presence"() {
-              return s.state();
+              return f.state();
             },
             get inert() {
-              return x(() => !!f())() && s.exiting();
+              return p(() => !!h())() && f.exiting();
             },
             role: "dialog",
             get "aria-modal"() {
               return a() ? void 0 : "true";
             },
             get "aria-labelledby"() {
-              return x(() => !!e.title)() ? T() : void 0;
+              return p(() => !!e.title)() ? B() : void 0;
             },
             get "aria-describedby"() {
-              return x(() => !!e.bodyDescription)() ? H() : void 0;
+              return p(() => !!e.bodyDescription)() ? H() : void 0;
             },
-            onKeyDown: (r) => e.onKeyDown?.(r),
+            onKeyDown: (o) => e.onKeyDown?.(o),
             tabIndex: -1
-          }), !1, !0), l(i, o(g, {
+          }), !1, !0), i(l, r(u, {
             get when() {
               return e.header === void 0;
             },
             get fallback() {
-              return [o(g, {
+              return [r(u, {
                 get when() {
                   return e.title;
                 },
                 get children() {
-                  var r = Re();
-                  return l(r, () => e.title), D(() => u(r, "id", T())), r;
+                  var o = Re();
+                  return i(o, () => e.title), P(() => c(o, "id", B())), o;
                 }
-              }), x(() => e.header)];
+              }), p(() => e.header)];
             },
             get children() {
-              return o(g, {
+              return r(u, {
                 get when() {
                   return e.title;
                 },
                 get children() {
-                  var r = _e(), w = r.firstChild;
-                  return l(w, o(g, {
+                  var o = _e(), w = o.firstChild;
+                  return i(w, r(u, {
                     get when() {
                       return e.title;
                     },
                     get children() {
-                      var y = Ce();
-                      return l(y, () => e.title), D(() => u(y, "id", T())), y;
+                      var b = Ce();
+                      return i(b, () => e.title), P(() => c(b, "id", B())), b;
                     }
-                  })), l(r, o(j, {
+                  })), i(o, r(j, {
                     variant: "ghost-destructive",
                     size: "icon",
                     class: "-my-2 -mr-2 h-[46px] w-[46px] shrink-0 sm:my-0 sm:-mr-1 sm:h-6 sm:w-6",
@@ -235,33 +233,33 @@ function Fe(e) {
                       return e.closeLabel ?? "Close";
                     },
                     get children() {
-                      return o(de, {
+                      return r(de, {
                         class: "w-3.5 h-3.5"
                       });
                     }
-                  }), null), r;
+                  }), null), o;
                 }
               });
             }
-          }), v), l(v, o(g, {
+          }), y), i(y, r(u, {
             get when() {
               return e.bodyDescription;
             },
             get children() {
-              var r = ke();
-              return l(r, () => e.bodyDescription), D(() => u(r, "id", H())), r;
+              var o = ke();
+              return i(o, () => e.bodyDescription), P(() => c(o, "id", H())), o;
             }
-          }), null), l(v, () => e.children, null), l(i, o(g, {
+          }), null), i(y, () => e.children, null), i(l, r(u, {
             get when() {
               return e.footer;
             },
             get children() {
-              var r = Se();
-              return l(r, () => e.footer), r;
+              var o = Se();
+              return i(o, () => e.footer), o;
             }
-          }), null), D((r) => {
-            var w = m("pointer-events-none relative z-[1] flex h-full w-full", $() ? e.drawerSide === "left" ? "items-stretch justify-start" : "items-stretch justify-end" : f() ? "items-end justify-center" : "items-center justify-center"), y = m("min-h-0 flex-1 overflow-auto overscroll-contain p-3", e.contentClass);
-            return w !== r.e && q(b, r.e = w), y !== r.t && q(v, r.t = y), r;
+          }), null), P((o) => {
+            var w = g("pointer-events-none relative z-[1] flex h-full w-full", $() ? e.drawerSide === "left" ? "items-stretch justify-start" : "items-stretch justify-end" : h() ? "items-end justify-center" : "items-center justify-center"), b = g("min-h-0 flex-1 overflow-auto overscroll-contain px-[var(--floe-pad-group)] py-[var(--floe-pad-group)]", e.contentClass);
+            return w !== o.e && q(v, o.e = w), b !== o.t && q(y, o.t = b), o;
           }, {
             e: void 0,
             t: void 0
@@ -272,8 +270,8 @@ function Fe(e) {
   })];
 }
 function We(e) {
-  const p = se();
-  return o(Fe, {
+  const x = fe();
+  return r(Fe, {
     get open() {
       return e.open;
     },
@@ -290,16 +288,16 @@ function We(e) {
       return e.globalZIndex;
     },
     get footer() {
-      return [o(j, {
+      return [r(j, {
         variant: "ghost",
         onClick: () => e.onOpenChange(!1),
         get disabled() {
           return e.loading;
         },
         get children() {
-          return e.cancelText ?? p.config.strings.confirmDialog.cancel;
+          return e.cancelText ?? x.config.strings.confirmDialog.cancel;
         }
-      }), o(j, {
+      }), r(j, {
         get variant() {
           return e.variant === "destructive" ? "destructive" : "primary";
         },
@@ -310,7 +308,7 @@ function We(e) {
           return e.loading;
         },
         get children() {
-          return e.confirmText ?? p.config.strings.confirmDialog.confirm;
+          return e.confirmText ?? x.config.strings.confirmDialog.confirm;
         }
       })];
     },

package/dist/components/ui/DirectoryInput.js

@@ -1,53 +1,53 @@
-import { insert as a, createComponent as i, mergeProps as y, memo as C, effect as _, className as P, setAttribute as d, template as l, delegateEvents as E } from "solid-js/web";
-import { createSignal as S, mergeProps as z, Show as u } from "solid-js";
-import { cn as b } from "../../utils/cn.js";
+import { insert as a, createComponent as i, mergeProps as y, memo as C, effect as _, className as P, setAttribute as d, template as n, delegateEvents as E } from "solid-js/web";
+import { createSignal as S, mergeProps as z, Show as c } from "solid-js";
+import { cn as k } from "../../utils/cn.js";
 import { Folder as A, ChevronRight as N } from "../icons/index.js";
 import { formatPickerPath as T } from "./picker/PickerNavigation.js";
-import { usePickerNavigation as D, PickerPanel as F } from "./picker/PickerBase.js";
-var I = /* @__PURE__ */ l("<div class=mt-2>"), R = /* @__PURE__ */ l('<p role=alert class="mt-1 text-xs text-error">'), V = /* @__PURE__ */ l('<p class="mt-1 text-xs text-muted-foreground">'), j = /* @__PURE__ */ l('<div><button data-floe-input-surface data-floe-surface=inset type=button><span class="min-w-0 flex-1 truncate">');
+import { usePickerNavigation as q, PickerPanel as D } from "./picker/PickerBase.js";
+var F = /* @__PURE__ */ n("<div class=mt-2>"), I = /* @__PURE__ */ n('<p role=alert class="mt-1 text-xs text-error">'), R = /* @__PURE__ */ n('<p class="mt-1 text-[length:var(--floe-type-caption)] text-[var(--floe-ink-soft)]">'), V = /* @__PURE__ */ n('<div><button data-floe-input-surface data-floe-surface=inset type=button><span class="min-w-0 flex-1 truncate">');
 function L(t) {
-  const [o, w] = S(t.defaultExpanded !== !1), k = z(t, {
+  const [o, w] = S(t.defaultExpanded !== !1), b = z(t, {
     get initialPath() {
       return t.value || t.initialPath;
     }
-  }), c = D(k, () => t.open ?? !0, (n) => t.onChange?.(n)), $ = () => T(t.value ?? "", c.context()?.homePathAbs ?? t.homePath);
+  }), s = q(b, () => t.open ?? !0, (l) => t.onChange?.(l)), $ = () => T(t.value ?? "", s.context()?.homePathAbs ?? t.homePath);
   return (() => {
-    var n = j(), r = n.firstChild, s = r.firstChild;
+    var l = V(), r = l.firstChild, u = r.firstChild;
     return r.$$click = () => w((e) => !e), a(r, i(A, {
-      class: "h-4 w-4 shrink-0 text-muted-foreground"
-    }), s), a(s, () => $() || t.placeholder || "Select a directory…"), a(r, i(N, {
+      class: "h-4 w-4 shrink-0 text-[var(--floe-ink-quiet)]"
+    }), u), a(u, () => $() || t.placeholder || "Select a directory…"), a(r, i(N, {
       get class() {
-        return b("h-3.5 w-3.5 shrink-0 transition-transform", o() && "rotate-90");
+        return k("h-3.5 w-3.5 shrink-0 transition-transform", o() && "rotate-90");
       }
-    }), null), a(n, i(u, {
+    }), null), a(l, i(c, {
       get when() {
         return o();
       },
       get children() {
-        var e = I();
-        return a(e, i(F, y(t, {
-          source: c
+        var e = F();
+        return a(e, i(D, y(t, {
+          source: s
         }))), e;
       }
-    }), null), a(n, i(u, {
+    }), null), a(l, i(c, {
       get when() {
         return t.error;
       },
       get children() {
-        var e = R();
+        var e = I();
         return a(e, () => t.error), e;
       }
-    }), null), a(n, i(u, {
+    }), null), a(l, i(c, {
       get when() {
         return C(() => !!t.helperText)() && !t.error;
       },
       get children() {
-        var e = V();
+        var e = R();
         return a(e, () => t.helperText), e;
       }
     }), null), _((e) => {
-      var m = t.class, h = t.error ? !0 : void 0, v = t.disabled, f = o(), x = t.value, g = b("flex w-full cursor-pointer items-center gap-2 rounded border border-input bg-background px-2 text-left shadow-sm disabled:cursor-not-allowed disabled:opacity-50", t.size === "lg" ? "h-9 text-sm" : t.size === "md" ? "h-8 text-xs" : "h-7 text-xs");
-      return m !== e.e && P(n, e.e = m), h !== e.t && d(r, "aria-invalid", e.t = h), v !== e.a && (r.disabled = e.a = v), f !== e.o && d(r, "aria-expanded", e.o = f), x !== e.i && d(r, "title", e.i = x), g !== e.n && P(r, e.n = g), e;
+      var m = t.class, v = t.error ? !0 : void 0, h = t.disabled, f = o(), x = t.value, g = k("floe-field flex w-full cursor-pointer items-center gap-2 px-2 text-left disabled:cursor-not-allowed disabled:opacity-60", t.size === "lg" ? "h-9 text-sm" : t.size === "md" ? "h-8 text-xs" : "h-7 text-xs");
+      return m !== e.e && P(l, e.e = m), v !== e.t && d(r, "aria-invalid", e.t = v), h !== e.a && (r.disabled = e.a = h), f !== e.o && d(r, "aria-expanded", e.o = f), x !== e.i && d(r, "title", e.i = x), g !== e.n && P(r, e.n = g), e;
     }, {
       e: void 0,
       t: void 0,
@@ -55,7 +55,7 @@ function L(t) {
       o: void 0,
       i: void 0,
       n: void 0
-    }), n;
+    }), l;
   })();
 }
 E(["click"]);

package/dist/components/ui/DirectoryPicker.js

@@ -1,13 +1,13 @@
 import { createComponent as n, mergeProps as s, insert as i, effect as g, setAttribute as u, template as m } from "solid-js/web";
-import { createMemo as d } from "solid-js";
-import { cn as f } from "../../utils/cn.js";
+import { createMemo as f } from "solid-js";
+import { cn as d } from "../../utils/cn.js";
 import { Button as o } from "./Button.js";
 import { Dialog as h } from "./Dialog.js";
-import { usePickerNavigation as P, PickerPanel as v, pickerCopy as b } from "./picker/PickerBase.js";
+import { usePickerNavigation as v, PickerPanel as P, pickerCopy as b } from "./picker/PickerBase.js";
 import { parsePickerPath as w } from "./picker/PickerNavigation.js";
-var x = /* @__PURE__ */ m('<div class="flex w-full items-center gap-2"><span class="min-w-0 flex-1 truncate text-[11px] text-muted-foreground">');
+var C = /* @__PURE__ */ m('<div class="flex w-full items-center gap-2"><span class="min-w-0 flex-1 truncate text-[length:var(--floe-type-caption)] text-[var(--floe-ink-soft)]">');
 function $(e) {
-  const a = d(() => [...new Set((e.suggestedPaths ?? []).map((r) => w(r)).filter(Boolean))]), t = P(e, () => e.open, void 0, void 0, () => a().length ? "suggestions" : "browse"), c = () => {
+  const a = f(() => [...new Set((e.suggestedPaths ?? []).map((r) => w(r)).filter(Boolean))]), t = v(e, () => e.open, void 0, void 0, () => a().length ? "suggestions" : "browse"), c = () => {
     if (e.disabled || t.view() !== "browse" || !t.valid()) return;
     const r = t.currentPath();
     e.onSelect(r), e.onOpenChange(!1);
@@ -23,11 +23,11 @@ function $(e) {
       return e.title ?? "Select Directory";
     },
     get class() {
-      return f("max-w-lg", e.class);
+      return d("max-w-lg", e.class);
     },
     get footer() {
       return (() => {
-        var r = x(), l = r.firstChild;
+        var r = C(), l = r.firstChild;
         return i(l, () => t.currentPath()), i(r, n(o, {
           variant: "ghost",
           size: "sm",
@@ -49,7 +49,7 @@ function $(e) {
       })();
     },
     get children() {
-      return n(v, s(e, {
+      return n(P, s(e, {
         source: t,
         suggestions: {
           get paths() {