@floegence/floe-webapp-core 0.79.0 → 0.80.0

package/dist/components/ui/Button.js

@@ -1,9 +1,9 @@
-import { spread as d, mergeProps as c, insert as n, createComponent as t, memo as g, Dynamic as l, template as u } from "solid-js/web";
-import { splitProps as m, Show as b } from "solid-js";
-import { cn as a } from "../../utils/cn.js";
-import { Loader2 as p } from "../icons/index.js";
-var h = /* @__PURE__ */ u("<button type=button data-floe-control=button data-floe-surface-part=action>");
-const v = {
+import { spread as u, mergeProps as g, insert as n, createComponent as t, memo as m, Dynamic as b, effect as h, className as f, template as d } from "solid-js/web";
+import { splitProps as p, Show as i } from "solid-js";
+import { cn as s } from "../../utils/cn.js";
+import { Loader2 as v } from "../icons/index.js";
+var x = /* @__PURE__ */ d("<span aria-hidden=true>"), y = /* @__PURE__ */ d("<button type=button data-floe-control=button data-floe-surface-part=action>");
+const w = {
   default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-primary/80",
   primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-primary/80",
   secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 active:bg-secondary/70",
@@ -11,57 +11,64 @@ const v = {
   ghost: "hover:bg-accent hover:text-accent-foreground active:bg-accent/80",
   "ghost-destructive": "bg-transparent text-muted-foreground hover:bg-error hover:text-error-foreground active:bg-error/80",
   destructive: "bg-error text-error-foreground shadow-sm hover:bg-error/90 active:bg-error/80"
-}, f = {
+}, z = {
   xs: "h-6 px-2 text-[11px] rounded",
   sm: "h-7 px-2.5 text-xs rounded",
   md: "h-8 px-3 text-xs rounded-md",
   lg: "h-9 px-4 text-sm rounded-md",
   icon: "h-8 w-8 rounded-md"
-}, x = {
+}, S = {
   xs: "w-3 h-3",
   sm: "w-3.5 h-3.5",
   md: "w-3.5 h-3.5",
   lg: "w-4 h-4",
   icon: "w-4 h-4"
 };
-function k(i) {
-  const [r, s] = m(i, ["variant", "size", "loading", "icon", "class", "children", "disabled"]), o = () => x[r.size ?? "md"];
+function P(a) {
+  const [e, c] = p(a, ["variant", "size", "loading", "icon", "class", "children", "disabled"]), l = () => S[e.size ?? "md"];
   return (() => {
-    var e = h();
-    return d(e, c({
+    var r = y();
+    return u(r, g({
       get "data-floe-surface"() {
-        return r.variant === "ghost" || r.variant === "ghost-destructive" ? void 0 : "raised";
+        return e.variant === "ghost" || e.variant === "ghost-destructive" ? void 0 : "raised";
       },
       get class() {
-        return a("inline-flex items-center justify-center gap-1.5 font-medium cursor-pointer", "transition-[color,background-color,border-color] duration-120", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", v[r.variant ?? "default"], f[r.size ?? "md"], r.class);
+        return s("inline-flex items-center justify-center gap-1.5 font-medium cursor-pointer", "transition-[color,background-color,border-color] duration-120", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", w[e.variant ?? "default"], z[e.size ?? "md"], e.class);
       },
       get disabled() {
-        return r.disabled || r.loading;
+        return e.disabled || e.loading;
+      },
+      get "aria-busy"() {
+        return e.loading || void 0;
       }
-    }, s), !1, !0), n(e, t(b, {
+    }, c), !1, !0), n(r, t(i, {
       get when() {
-        return r.loading;
-      },
-      get fallback() {
-        return g(() => !!r.icon)() && t(l, {
-          get component() {
-            return r.icon;
-          },
-          get class() {
-            return o();
-          }
-        });
+        return e.icon || "loading" in a;
       },
       get children() {
-        return t(p, {
-          get class() {
-            return a(o(), "animate-spin");
+        var o = x();
+        return n(o, t(i, {
+          get when() {
+            return e.loading;
+          },
+          get fallback() {
+            return m(() => !!e.icon)() && t(b, {
+              get component() {
+                return e.icon;
+              },
+              class: "h-full w-full"
+            });
+          },
+          get children() {
+            return t(v, {
+              class: "h-full w-full animate-spin"
+            });
           }
-        });
+        })), h(() => f(o, s("inline-flex shrink-0 items-center justify-center", l()))), o;
       }
-    }), null), n(e, () => r.children, null), e;
+    }), null), n(r, () => e.children, null), r;
   })();
 }
 export {
-  k as Button
+  P as Button
 };

package/dist/components/ui/StableText.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from 'solid-js';
+export interface StableTextProps {
+    children: string;
+    /** All transient labels, in the current locale. Only the current label is exposed to assistive technology. */
+    reserve: readonly string[];
+    class?: string;
+}
+/** Intrinsic sizing includes every state before the first interaction, including wrapped labels. */
+export declare function StableText(props: StableTextProps): JSX.Element;

package/dist/components/ui/StableText.js

@@ -0,0 +1,32 @@
+import { insert as a, createComponent as m, effect as o, style as d, className as v, template as c } from "solid-js/web";
+import { For as h } from "solid-js";
+var u = /* @__PURE__ */ c("<span style=display:inline-grid;min-width:0;vertical-align:bottom><span>"), f = /* @__PURE__ */ c("<span aria-hidden=true style=visibility:hidden;pointer-events:none;user-select:none>");
+function p(i) {
+  const s = {
+    "grid-area": "1 / 1",
+    "min-width": "0"
+  };
+  return (() => {
+    var r = u(), n = r.firstChild;
+    return a(r, m(h, {
+      get each() {
+        return i.reserve;
+      },
+      children: (e) => (() => {
+        var t = f();
+        return a(t, e), o((l) => d(t, {
+          ...s
+        }, l)), t;
+      })()
+    }), n), a(n, () => i.children), o((e) => {
+      var t = i.class, l = s;
+      return t !== e.e && v(r, e.e = t), e.t = d(n, l, e.t), e;
+    }, {
+      e: void 0,
+      t: void 0
+    }), r;
+  })();
+}
+export {
+  p as StableText
+};

package/dist/components/ui/StatusRegion.d.ts

@@ -0,0 +1,8 @@
+import { type JSX } from 'solid-js';
+export interface StatusRegionProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'style'> {
+    /** Reserve a bounded number of text lines through idle, pending, success, and failure. */
+    lines?: number;
+    style?: JSX.CSSProperties;
+}
+/** A persistent, scrollable feedback slot. Long errors remain available without resizing adjacent content. */
+export declare function StatusRegion(props: StatusRegionProps): JSX.Element;

package/dist/components/ui/StatusRegion.js

@@ -0,0 +1,24 @@
+import { spread as o, mergeProps as i, insert as s, template as n } from "solid-js/web";
+import { splitProps as a } from "solid-js";
+var p = /* @__PURE__ */ n("<div role=status aria-live=polite>");
+function f(t) {
+  const [e, l] = a(t, ["lines", "style", "children"]);
+  return (() => {
+    var r = p();
+    return o(r, i(l, {
+      get style() {
+        return {
+          "block-size": `${e.lines ?? 2}lh`,
+          "flex-shrink": "0",
+          "min-width": "0",
+          overflow: "auto",
+          "overflow-wrap": "anywhere",
+          ...e.style
+        };
+      }
+    }), !1, !0), s(r, () => e.children), r;
+  })();
+}
+export {
+  f as StatusRegion
+};

package/dist/components/ui/index.d.ts

@@ -1,4 +1,6 @@
 export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './Button';
+export { StableText, type StableTextProps } from './StableText';
+export { StatusRegion, type StatusRegionProps } from './StatusRegion';
 export { intersectSurfaceRects, type SurfaceFloatingBoundary } from './surfaceFloatingBoundary';
 export { Tag, type TagProps, type TagVariant, type TagSize } from './Tag';
 export { Input, Textarea, NumberInput, AffixInput, type InputProps, type InputSize, type TextareaProps, type NumberInputProps, type AffixInputProps, type AffixOption, } from './Input';