@floegence/floe-webapp-core 0.86.62 → 0.86.63

package/dist/components/layout/ThemeToggle.d.ts

@@ -0,0 +1,19 @@
+export interface ThemeToggleProps {
+    /** Box class for the button; defaults to the 32px icon control. */
+    class?: string;
+    /** Box class for the 16px icon frame. */
+    glyphClass?: string;
+    /** Overrides the accessible name. Defaults to the action the click performs. */
+    label?: string;
+    disabled?: boolean;
+}
+/**
+ * Light/dark toggle.
+ *
+ * The two states are one control, so the icon performs the change rather than
+ * being swapped between frames: the outgoing glyph rotates a quarter turn and
+ * leaves upward while the incoming one arrives from below. Both live in the
+ * same 16px frame, so the button never changes size and nothing else on the
+ * bar moves. Reduced-motion users get the instant swap.
+ */
+export declare function ThemeToggle(props: ThemeToggleProps): import("solid-js").JSX.Element;

package/dist/components/layout/ThemeToggle.js

@@ -0,0 +1,39 @@
+import { insert as k, createComponent as w, effect as T, setAttribute as x, className as a, template as p, delegateEvents as C } from "solid-js/web";
+import { cn as r } from "../../utils/cn.js";
+import { useTheme as S } from "../../context/ThemeContext.js";
+import { Sun as j, Moon as A } from "../icons/index.js";
+var D = /* @__PURE__ */ p("<button type=button data-floe-interactive=icon><span aria-hidden=true><span></span><span>");
+function q(o) {
+  const s = S(), n = () => s.resolvedTheme() === "dark", c = () => o.label ?? (n() ? "Switch to light theme" : "Switch to dark theme"), f = (t, i) => r(
+    "absolute inset-0 flex items-center justify-center",
+    /* Tailwind's rotate/translate utilities write the individual properties,
+     * so the transition list has to name them; `transform` alone would leave
+     * the glyphs swapping instead of gliding. */
+    "transition-[opacity,rotate,translate] duration-[var(--floe-duration-base)] ease-[var(--floe-ease-out)]",
+    "motion-reduce:transition-none",
+    t ? "opacity-100 rotate-0 translate-y-0" : r("opacity-0", i === "up" ? "-translate-y-2 rotate-90" : "translate-y-2 -rotate-90")
+  );
+  return (() => {
+    var t = D(), i = t.firstChild, l = i.firstChild, v = l.nextSibling;
+    return t.$$click = () => s.toggleTheme(), k(l, w(j, {
+      class: "h-full w-full"
+    })), k(v, w(A, {
+      class: "h-full w-full"
+    })), T((e) => {
+      var d = o.disabled, u = c(), h = c(), m = r("inline-flex h-[var(--floe-control-height-md)] w-[var(--floe-control-height-md)] shrink-0 items-center justify-center rounded-control cursor-pointer", "text-[var(--floe-ink-soft)] hover:bg-[var(--floe-state-hover)] hover:text-foreground", "transition-colors 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)]", "disabled:pointer-events-none disabled:opacity-50", o.class), b = r("relative block h-4 w-4 overflow-hidden", o.glyphClass), g = f(!n(), "up"), y = f(n(), "down");
+      return d !== e.e && (t.disabled = e.e = d), u !== e.t && x(t, "aria-label", e.t = u), h !== e.a && x(t, "title", e.a = h), m !== e.o && a(t, e.o = m), b !== e.i && a(i, e.i = b), g !== e.n && a(l, e.n = g), y !== e.s && a(v, e.s = y), e;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0
+    }), t;
+  })();
+}
+C(["click"]);
+export {
+  q as ThemeToggle
+};

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

@@ -5,7 +5,6 @@ export type { BarItemContextMenuHandler, BarItemContextMenuRequest, BarItemConte
 export { Sidebar, SidebarContent, SidebarItemList, SidebarSection, SidebarItem, type SidebarProps, type SidebarContentProps, type SidebarItemListProps, type SidebarSectionProps, type SidebarItemProps, } from './Sidebar';
 export { TopBar, type TopBarProps } from './TopBar';
 export { TopBarIconButton, type TopBarIconButtonProps } from './TopBarIconButton';
-export { BottomBar, BottomBarItem, StatusIndicator, type BottomBarProps, type BottomBarItemProps, type StatusIndicatorProps, } from './BottomBar';
 export { BottomBarCompanion, type BottomBarCompanionDismissReason, type BottomBarCompanionPhase, type BottomBarCompanionProps, } from './BottomBarCompanion';
 export { MobileTabBar, type MobileTabBarItem, type MobileTabBarProps } from './MobileTabBar';
 export { ResizeHandle, type ResizeHandleProps } from './ResizeHandle';
@@ -14,4 +13,5 @@ export { Panel, PanelHeader, PanelContent, type PanelProps, type PanelHeaderProp
 export { KeepAliveStack, type KeepAliveStackProps, type KeepAliveView } from './KeepAliveStack';
 export { DisplayModeSwitcher, sanitizeDisplayMode, type DisplayMode, type DisplayModeSwitcherProps, } from './DisplayModeSwitcher';
 export { DisplayModePageShell, type DisplayModePageShellProps } from './DisplayModePageShell';
+export { ThemeToggle, type ThemeToggleProps } from './ThemeToggle';
 export { AppViewport, type AppViewportProps } from './AppViewport';

package/dist/components/ui/Button.js

@@ -1,8 +1,8 @@
-import { spread as g, mergeProps as f, insert as n, createComponent as o, memo as u, Dynamic as v, effect as h, className as m, template as s } from "solid-js/web";
-import { splitProps as p, Show as l } from "solid-js";
+import { spread as h, mergeProps as m, insert as n, createComponent as t, memo as c, Dynamic as p, effect as d, className as g, template as u } from "solid-js/web";
+import { splitProps as b, Show as l } from "solid-js";
 import { cn as i } from "../../utils/cn.js";
-import { Loader2 as b } from "../icons/index.js";
-var x = /* @__PURE__ */ s("<span aria-hidden=true>"), y = /* @__PURE__ */ s("<button type=button data-floe-control=button data-floe-surface-part=action>");
+import { Loader2 as x } from "../icons/index.js";
+var f = /* @__PURE__ */ u("<span aria-hidden=true>"), y = /* @__PURE__ */ u("<button type=button data-floe-control=button data-floe-surface-part=action>");
 const w = {
   default: "bg-primary text-primary-foreground hover:bg-[color-mix(in_srgb,var(--primary)_92%,var(--primary-foreground))]",
   primary: "bg-primary text-primary-foreground hover:bg-[color-mix(in_srgb,var(--primary)_92%,var(--primary-foreground))]",
@@ -25,10 +25,10 @@ const w = {
   icon: "w-4 h-4"
 };
 function P(a) {
-  const [r, c] = p(a, ["variant", "size", "loading", "icon", "class", "children", "disabled"]), d = () => k[r.size ?? "md"];
+  const [r, v] = b(a, ["variant", "size", "loading", "icon", "class", "children", "disabled"]), s = () => k[r.size ?? "md"];
   return (() => {
-    var e = y();
-    return g(e, f({
+    var o = y();
+    return h(o, m({
       get "data-floe-surface"() {
         return r.variant === "ghost" || r.variant === "ghost-destructive" || r.variant === "outline" ? void 0 : "flat";
       },
@@ -41,18 +41,18 @@ function P(a) {
       get "aria-busy"() {
         return r.loading || void 0;
       }
-    }, c), !1, !0), n(e, o(l, {
+    }, v), !1, !0), n(o, t(l, {
       get when() {
         return r.icon || "loading" in a;
       },
       get children() {
-        var t = x();
-        return n(t, o(l, {
+        var e = f();
+        return n(e, t(l, {
           get when() {
             return r.loading;
           },
           get fallback() {
-            return u(() => !!r.icon)() && o(v, {
+            return c(() => !!r.icon)() && t(p, {
               get component() {
                 return r.icon;
               },
@@ -60,13 +60,21 @@ function P(a) {
             });
           },
           get children() {
-            return o(b, {
+            return t(x, {
               class: "h-full w-full animate-spin"
             });
           }
-        })), h(() => m(t, i("inline-flex shrink-0 items-center justify-center", d()))), t;
+        })), d(() => g(e, i("inline-flex shrink-0 items-center justify-center", s()))), e;
       }
-    }), null), n(e, () => r.children, null), e;
+    }), null), n(o, () => r.children, null), n(o, t(l, {
+      get when() {
+        return c(() => !r.icon)() && "loading" in a;
+      },
+      get children() {
+        var e = f();
+        return d(() => g(e, i("inline-flex shrink-0", s()))), e;
+      }
+    }), null), o;
   })();
 }
 export {