@floegence/floe-webapp-core 0.60.2 → 0.61.0

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

@@ -0,0 +1,52 @@
+import { type JSX } from 'solid-js';
+/** Host-owned routing and state stay outside this responsive settings frame. */
+export declare function SettingsLayout(props: {
+    sidebar: JSX.Element;
+    mobileNavigation?: JSX.Element;
+    children: JSX.Element;
+    class?: string;
+}): JSX.Element;
+export interface SettingsNavigationItem {
+    id: string;
+    label: string;
+    icon?: (props: {
+        class?: string;
+    }) => JSX.Element;
+    attributes?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+export interface SettingsNavigationGroup {
+    id: string;
+    label: string;
+    items: readonly SettingsNavigationItem[];
+}
+export interface SettingsNavigationProps {
+    label: string;
+    groups: readonly SettingsNavigationGroup[];
+    value: string;
+    onChange: (id: string) => void;
+    search?: JSX.Element;
+    empty?: JSX.Element;
+}
+export declare function SettingsNavigation(props: SettingsNavigationProps): JSX.Element;
+export interface SettingsSectionProps extends Omit<JSX.HTMLAttributes<HTMLElement>, 'title'> {
+    title: string;
+    description?: string;
+    badge?: JSX.Element;
+    actions?: JSX.Element;
+    /** A page owns its primary heading; sections are subordinate groups. */
+    variant?: 'page' | 'section';
+}
+export declare function SettingsSection(props: SettingsSectionProps): JSX.Element;
+export declare function SettingsList(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export interface SettingRowProps {
+    title: string;
+    description?: string;
+    icon?: (props: {
+        class?: string;
+    }) => JSX.Element;
+    control?: JSX.Element;
+    children?: JSX.Element;
+    tone?: 'default' | 'info' | 'success' | 'warning' | 'danger';
+    class?: string;
+}
+export declare function SettingRow(props: SettingRowProps): JSX.Element;

package/dist/components/ui/Settings.js

@@ -0,0 +1,183 @@
+import { insert as n, createComponent as s, effect as v, className as b, setAttribute as h, spread as f, mergeProps as $, template as c } from "solid-js/web";
+import { Show as d, splitProps as w, For as m } from "solid-js";
+import { cn as u } from "../../utils/cn.js";
+var x = /* @__PURE__ */ c("<div><aside class=floe-settings-layout__sidebar></aside><div class=floe-settings-layout__mobile></div><div class=floe-settings-layout__content>"), k = /* @__PURE__ */ c("<div class=floe-settings-navigation__search>"), N = /* @__PURE__ */ c("<nav class=floe-settings-navigation><div class=floe-settings-navigation__groups>"), L = /* @__PURE__ */ c("<div class=floe-settings-navigation__group><div class=floe-settings-navigation__label>"), P = /* @__PURE__ */ c("<button><span>"), A = /* @__PURE__ */ c("<h1>"), C = /* @__PURE__ */ c("<p>"), F = /* @__PURE__ */ c("<div class=floe-settings-section__actions>"), R = /* @__PURE__ */ c("<section><header class=floe-settings-section__header><div class=floe-settings-section__heading><div class=floe-settings-section__title></div></div></header><div class=floe-settings-section__body>"), j = /* @__PURE__ */ c("<h2>"), q = /* @__PURE__ */ c("<div>"), z = /* @__PURE__ */ c("<div class=floe-setting-row__control>"), B = /* @__PURE__ */ c("<div class=floe-setting-row__body>"), D = /* @__PURE__ */ c("<div><div class=floe-setting-row__main><div class=floe-setting-row__label><div><div class=floe-setting-row__title>");
+function I(t) {
+  return (() => {
+    var e = x(), o = e.firstChild, i = o.nextSibling, a = i.nextSibling;
+    return n(o, () => t.sidebar), n(i, () => t.mobileNavigation), n(a, () => t.children), v(() => b(e, u("floe-settings-layout", t.class))), e;
+  })();
+}
+function J(t) {
+  return (() => {
+    var e = N(), o = e.firstChild;
+    return n(e, s(d, {
+      get when() {
+        return t.search;
+      },
+      get children() {
+        var i = k();
+        return n(i, () => t.search), i;
+      }
+    }), o), n(o, s(d, {
+      get when() {
+        return t.groups.some((i) => i.items.length);
+      },
+      get fallback() {
+        return t.empty;
+      },
+      get children() {
+        return s(m, {
+          get each() {
+            return t.groups;
+          },
+          children: (i) => s(d, {
+            get when() {
+              return i.items.length;
+            },
+            get children() {
+              var a = L(), _ = a.firstChild;
+              return n(_, () => i.label), n(a, s(m, {
+                get each() {
+                  return i.items;
+                },
+                children: (l) => (() => {
+                  var g = P(), r = g.firstChild;
+                  return f(g, $(() => l.attributes, {
+                    type: "button",
+                    get class() {
+                      return u("floe-settings-navigation__item", l.attributes?.class);
+                    },
+                    get "aria-current"() {
+                      return t.value === l.id ? "page" : void 0;
+                    },
+                    onClick: () => t.onChange(l.id)
+                  }), !1, !0), n(g, s(d, {
+                    get when() {
+                      return l.icon;
+                    },
+                    children: (S) => {
+                      const y = S();
+                      return s(y, {
+                        class: "floe-settings-navigation__icon"
+                      });
+                    }
+                  }), r), n(r, () => l.label), g;
+                })()
+              }), null), v(() => h(a, "data-settings-group", i.id)), a;
+            }
+          })
+        });
+      }
+    })), v(() => h(e, "aria-label", t.label)), e;
+  })();
+}
+function K(t) {
+  const [e, o] = w(t, ["title", "description", "badge", "actions", "variant", "class", "children"]);
+  return (() => {
+    var i = R(), a = i.firstChild, _ = a.firstChild, l = _.firstChild, g = a.nextSibling;
+    return f(i, $(o, {
+      get class() {
+        return u("floe-settings-section", e.class);
+      },
+      get "data-settings-variant"() {
+        return e.variant ?? "section";
+      }
+    }), !1, !0), n(l, s(d, {
+      get when() {
+        return e.variant === "page";
+      },
+      get fallback() {
+        return (() => {
+          var r = j();
+          return n(r, () => e.title), r;
+        })();
+      },
+      get children() {
+        var r = A();
+        return n(r, () => e.title), r;
+      }
+    }), null), n(l, () => e.badge, null), n(_, s(d, {
+      get when() {
+        return e.description;
+      },
+      get children() {
+        var r = C();
+        return n(r, () => e.description), r;
+      }
+    }), null), n(a, s(d, {
+      get when() {
+        return e.actions;
+      },
+      get children() {
+        var r = F();
+        return n(r, () => e.actions), r;
+      }
+    }), null), n(g, () => e.children), i;
+  })();
+}
+function M(t) {
+  const [e, o] = w(t, ["class", "children"]);
+  return (() => {
+    var i = q();
+    return f(i, $(o, {
+      get class() {
+        return u("floe-settings-list", e.class);
+      },
+      "data-floe-surface": "card"
+    }), !1, !0), n(i, () => e.children), i;
+  })();
+}
+function O(t) {
+  return (() => {
+    var e = D(), o = e.firstChild, i = o.firstChild, a = i.firstChild, _ = a.firstChild;
+    return n(i, s(d, {
+      get when() {
+        return t.icon;
+      },
+      children: (l) => {
+        const g = l();
+        return s(g, {
+          class: "floe-setting-row__icon"
+        });
+      }
+    }), a), n(_, () => t.title), n(a, s(d, {
+      get when() {
+        return t.description;
+      },
+      get children() {
+        var l = C();
+        return n(l, () => t.description), l;
+      }
+    }), null), n(o, s(d, {
+      get when() {
+        return t.control;
+      },
+      get children() {
+        var l = z();
+        return n(l, () => t.control), l;
+      }
+    }), null), n(e, s(d, {
+      get when() {
+        return t.children;
+      },
+      get children() {
+        var l = B();
+        return n(l, () => t.children), l;
+      }
+    }), null), v((l) => {
+      var g = u("floe-setting-row", t.class), r = t.tone ?? "default";
+      return g !== l.e && b(e, l.e = g), r !== l.t && h(e, "data-tone", l.t = r), l;
+    }, {
+      e: void 0,
+      t: void 0
+    }), e;
+  })();
+}
+export {
+  O as SettingRow,
+  I as SettingsLayout,
+  M as SettingsList,
+  J as SettingsNavigation,
+  K as SettingsSection
+};

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

@@ -42,3 +42,4 @@ export { MobileKeyboard, type MobileKeyboardProps, type MobileKeyboardSuggestion
 export { LinearProgress, CircularProgress, SegmentedProgress, StepsProgress, type LinearProgressProps, type CircularProgressProps, type SegmentedProgressProps, type StepsProgressProps, type ProgressSize, type ProgressColor, } from './Progress';
 export { SurfaceAnchoredLayer, type SurfaceAnchoredLayerProps } from './SurfaceAnchoredLayer';
 export { PersistentHorizontalScrollbar, type PersistentHorizontalScrollbarProps } from './PersistentHorizontalScrollbar';
+export { SettingsLayout, SettingsNavigation, SettingsSection, SettingsList, SettingRow, type SettingsNavigationItem, type SettingsNavigationGroup, type SettingsNavigationProps, type SettingsSectionProps, type SettingRowProps, } from './Settings';