@floegence/floe-webapp-core 0.24.4 → 0.25.1

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

@@ -1,4 +1,5 @@
 import { type Component } from 'solid-js';
+import { type ActivityBarCollapseBehavior } from './activityBarBehavior';
 export interface ActivityBarItem {
     id: string;
     icon: Component<{
@@ -7,12 +8,21 @@ export interface ActivityBarItem {
     label: string;
     badge?: number | string | (() => number | string | undefined);
     onClick?: () => void;
+    /**
+     * How this item should affect the sidebar collapsed state when clicked.
+     *
+     * - `toggle` (default): VSCode-style behavior (change tab, open sidebar; click active tab to collapse).
+     * - `preserve`: change tab without mutating the collapsed state (useful for fullScreen pages).
+     */
+    collapseBehavior?: ActivityBarCollapseBehavior;
 }
 export interface ActivityBarProps {
     items: ActivityBarItem[];
     bottomItems?: ActivityBarItem[];
     activeId: string;
-    onActiveChange: (id: string) => void;
+    onActiveChange: (id: string, opts?: {
+        openSidebar?: boolean;
+    }) => void;
     collapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
     class?: string;

package/dist/components/layout/ActivityBar.js

@@ -1,91 +1,95 @@
-import { insert as o, createComponent as r, effect as f, className as g, template as d, Dynamic as w, memo as A, setAttribute as y, delegateEvents as k } from "solid-js/web";
-import { createMemo as s, For as x, Show as m } from "solid-js";
-import { cn as b } from "../../utils/cn.js";
-import { deferNonBlocking as $ } from "../../utils/defer.js";
-import { Tooltip as _ } from "../ui/Tooltip.js";
-var I = /* @__PURE__ */ d('<div class="flex flex-col">'), B = /* @__PURE__ */ d('<div><div class="flex flex-col">'), j = /* @__PURE__ */ d('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), N = /* @__PURE__ */ d("<span>"), q = /* @__PURE__ */ d("<button type=button>");
-function T(e) {
-  const c = s(() => e.activeId), n = s(() => e.collapsed ?? !1), t = s(() => e.onActiveChange), a = s(() => e.onCollapsedChange), u = (i) => {
+import { insert as a, createComponent as l, effect as f, className as b, template as s, Dynamic as A, memo as k, setAttribute as x, delegateEvents as w } from "solid-js/web";
+import { createMemo as v, For as y, Show as m } from "solid-js";
+import { cn as g } from "../../utils/cn.js";
+import { deferNonBlocking as I } from "../../utils/defer.js";
+import { Tooltip as $ } from "../ui/Tooltip.js";
+import { resolveActivityBarClick as _ } from "./activityBarBehavior.js";
+var B = /* @__PURE__ */ s('<div class="flex flex-col">'), p = /* @__PURE__ */ s('<div><div class="flex flex-col">'), S = /* @__PURE__ */ s('<div class="absolute left-0 top-0 w-1 h-full bg-primary rounded-r">'), j = /* @__PURE__ */ s("<span>"), N = /* @__PURE__ */ s("<button type=button>");
+function V(e) {
+  const o = v(() => e.activeId), n = v(() => e.collapsed ?? !1), t = v(() => e.onActiveChange), c = v(() => e.onCollapsedChange), u = (i) => {
     if (i.onClick) {
-      $(() => i.onClick());
+      I(() => i.onClick());
       return;
     }
-    const v = c() === i.id, l = n();
-    if (v && !l) {
-      a()?.(!0);
-      return;
-    }
-    t()(i.id), a()?.(!1);
+    const r = _({
+      clickedId: i.id,
+      activeId: o(),
+      collapsed: n(),
+      behavior: i.collapseBehavior
+    });
+    r.nextActiveId !== o() && (typeof r.openSidebar == "boolean" ? t()(r.nextActiveId, {
+      openSidebar: r.openSidebar
+    }) : t()(r.nextActiveId)), typeof r.nextCollapsed == "boolean" && c()?.(r.nextCollapsed);
   };
   return (() => {
-    var i = B(), v = i.firstChild;
-    return o(v, r(x, {
+    var i = p(), r = i.firstChild;
+    return a(r, l(y, {
       get each() {
         return e.items;
       },
-      children: (l) => r(C, {
-        item: l,
+      children: (d) => l(C, {
+        item: d,
         get isActive() {
-          return c() === l.id;
+          return o() === d.id;
         },
-        onClick: () => u(l)
+        onClick: () => u(d)
       })
-    })), o(i, r(m, {
+    })), a(i, l(m, {
       get when() {
         return e.bottomItems?.length;
       },
       get children() {
-        var l = I();
-        return o(l, r(x, {
+        var d = B();
+        return a(d, l(y, {
           get each() {
             return e.bottomItems;
           },
-          children: (h) => r(C, {
+          children: (h) => l(C, {
             item: h,
             isActive: !1,
             onClick: () => u(h)
           })
-        })), l;
+        })), d;
       }
-    }), null), f(() => g(i, b("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-border", e.class))), i;
+    }), null), f(() => b(i, g("w-10 md:w-12 flex flex-col justify-between shrink-0 min-h-0", "bg-activity-bar border-r border-border", e.class))), i;
   })();
 }
 function C(e) {
-  const c = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
-  return r(_, {
+  const o = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
+  return l($, {
     get content() {
       return e.item.label;
     },
     placement: "right",
     delay: 0,
     get children() {
-      var n = q();
-      return n.$$click = () => e.onClick(), o(n, r(m, {
+      var n = N();
+      return n.$$click = () => e.onClick(), a(n, l(m, {
         get when() {
           return e.isActive;
         },
         get children() {
-          return j();
+          return S();
         }
-      }), null), o(n, r(w, {
+      }), null), a(n, l(A, {
         get component() {
           return e.item.icon;
         },
         class: "w-5 h-5"
-      }), null), o(n, r(m, {
+      }), null), a(n, l(m, {
         get when() {
-          return c();
+          return o();
         },
         get children() {
-          var t = N();
-          return o(t, (() => {
-            var a = A(() => typeof c() == "number" && c() > 99);
-            return () => a() ? "99+" : c();
-          })()), f(() => g(t, b("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[9px] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), t;
+          var t = j();
+          return a(t, (() => {
+            var c = k(() => typeof o() == "number" && o() > 99);
+            return () => c() ? "99+" : o();
+          })()), f(() => b(t, g("absolute top-0.5 right-0.5 min-w-3.5 h-3.5 px-1", "flex items-center justify-center", "text-[9px] font-medium rounded-full", "bg-activity-bar-badge text-activity-bar-badge-foreground"))), t;
         }
       }), null), f((t) => {
-        var a = b("relative w-full aspect-square flex items-center justify-center cursor-pointer", "transition-all duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", e.isActive ? "text-activity-bar-foreground-active bg-accent/80" : "text-activity-bar-foreground hover:text-activity-bar-foreground-active hover:bg-accent/40"), u = e.item.label, i = e.isActive;
-        return a !== t.e && g(n, t.e = a), u !== t.t && y(n, "aria-label", t.t = u), i !== t.a && y(n, "aria-pressed", t.a = i), t;
+        var c = g("relative w-full aspect-square flex items-center justify-center cursor-pointer", "transition-all duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", e.isActive ? "text-activity-bar-foreground-active bg-accent/80" : "text-activity-bar-foreground hover:text-activity-bar-foreground-active hover:bg-accent/40"), u = e.item.label, i = e.isActive;
+        return c !== t.e && b(n, t.e = c), u !== t.t && x(n, "aria-label", t.t = u), i !== t.a && x(n, "aria-pressed", t.a = i), t;
       }, {
         e: void 0,
         t: void 0,
@@ -94,7 +98,7 @@ function C(e) {
     }
   });
 }
-k(["click"]);
+w(["click"]);
 export {
-  T as ActivityBar
+  V as ActivityBar
 };

package/dist/components/layout/Shell.js

@@ -1,5 +1,5 @@
-import { createComponent as r, Dynamic as $, insert as l, memo as p, effect as x, className as A, setStyleProperty as R, template as g, delegateEvents as P } from "solid-js/web";
-import { createSignal as W, createEffect as v, createMemo as S, For as T, Show as u } from "solid-js";
+import { createComponent as r, Dynamic as $, insert as l, memo as p, effect as x, className as A, setStyleProperty as R, template as v, delegateEvents as P } from "solid-js/web";
+import { createSignal as W, createEffect as g, createMemo as S, For as T, Show as u } from "solid-js";
 import { useLayout as E } from "../../context/LayoutContext.js";
 import { useResolvedFloeConfig as Q } from "../../context/FloeConfigContext.js";
 import { useMediaQuery as D } from "../../hooks/useMediaQuery.js";
@@ -13,31 +13,35 @@ import { ActivityBar as q } from "./ActivityBar.js";
 import { ResizeHandle as M } from "./ResizeHandle.js";
 import { resolveMobileTabActiveId as G, resolveMobileTabSelect as J } from "./mobileTabs.js";
 import { KeepAliveStack as U } from "./KeepAliveStack.js";
-var B = /* @__PURE__ */ g('<div class="flex items-center gap-2">'), X = /* @__PURE__ */ g('<div class="absolute inset-0 z-40 bg-black/30 cursor-pointer">'), Y = /* @__PURE__ */ g('<div><div class="h-full overflow-auto overscroll-contain">'), Z = /* @__PURE__ */ g('<div class="relative shrink-0 border-t border-border bg-terminal-background overflow-hidden">'), ee = /* @__PURE__ */ g('<div><div class="flex-1 min-h-0 flex overflow-hidden relative"><div class="flex-1 min-w-0 flex flex-col overflow-hidden"><main class="flex-1 min-h-0 overflow-auto overscroll-contain">');
-function ge(n) {
-  const t = E(), k = Q(), a = D(k.config.layout.mobileQuery), [w, b] = W(!1), s = () => n.sidebarMode === "hidden", C = (e) => t.setSidebarActiveTab(e, {
-    openSidebar: !s()
-  }), d = (() => {
+var B = /* @__PURE__ */ v('<div class="flex items-center gap-2">'), X = /* @__PURE__ */ v('<div class="absolute inset-0 z-40 bg-black/30 cursor-pointer">'), Y = /* @__PURE__ */ v('<div><div class="h-full overflow-auto overscroll-contain">'), Z = /* @__PURE__ */ v('<div class="relative shrink-0 border-t border-border bg-terminal-background overflow-hidden">'), ee = /* @__PURE__ */ v('<div><div class="flex-1 min-h-0 flex overflow-hidden relative"><div class="flex-1 min-w-0 flex flex-col overflow-hidden"><main class="flex-1 min-h-0 overflow-auto overscroll-contain">');
+function ve(o) {
+  const t = E(), k = Q(), c = D(k.config.layout.mobileQuery), [w, b] = W(!1), m = () => o.sidebarMode === "hidden", a = (() => {
     try {
       return K();
     } catch {
       return null;
     }
-  })();
-  v(() => {
-    s() && b(!1);
-  }), v(() => {
-    const e = a();
+  })(), C = (e, s) => {
+    const d = a?.getComponent(e)?.sidebar?.fullScreen ?? !1, n = m() ? !1 : s?.openSidebar ?? !d;
+    t.setSidebarActiveTab(e, {
+      openSidebar: n
+    });
+  };
+  g(() => {
+    m() && b(!1);
+  }), g(() => {
+    const e = c();
     t.isMobile() !== e && t.setIsMobile(e);
-  }), v(() => {
-    a() || b(!1);
+  }), g(() => {
+    c() || b(!1);
   });
-  const f = S(() => n.activityItems ? n.activityItems : d ? d.sidebarItems().filter((e) => !!e.icon).filter((e) => !(a() && e.sidebar?.hiddenOnMobile)).map((e) => ({
+  const f = S(() => o.activityItems ? o.activityItems : a ? a.sidebarItems().filter((e) => !!e.icon).filter((e) => !(c() && e.sidebar?.hiddenOnMobile)).map((e) => ({
     id: e.id,
     icon: e.icon,
     label: e.name,
-    badge: e.sidebar?.badge
-  })) : []), O = S(() => s() ? [] : n.sidebarContent ? [] : d ? d.sidebarItems().filter((e) => !(a() && e.sidebar?.hiddenOnMobile)).filter((e) => !e.sidebar?.fullScreen).map((e) => ({
+    badge: e.sidebar?.badge,
+    collapseBehavior: e.sidebar?.fullScreen ? "preserve" : "toggle"
+  })) : []), O = S(() => m() ? [] : o.sidebarContent ? [] : a ? a.sidebarItems().filter((e) => !(c() && e.sidebar?.hiddenOnMobile)).filter((e) => !e.sidebar?.fullScreen).map((e) => ({
     id: e.id,
     render: () => r($, {
       get component() {
@@ -45,9 +49,9 @@ function ge(n) {
       }
     })
   })) : []), y = (e) => {
-    if (!s()) {
-      if (n.sidebarContent) return n.sidebarContent(e);
-      if (d)
+    if (!m()) {
+      if (o.sidebarContent) return o.sidebarContent(e);
+      if (a)
         return r(U, {
           get views() {
             return O();
@@ -55,65 +59,65 @@ function ge(n) {
           activeId: e
         });
     }
-  }, I = S(() => s() ? !0 : d ? d.getComponent(t.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1);
-  v(() => {
-    a() && I() && b(!1);
+  }, I = S(() => m() ? !0 : a ? a.getComponent(t.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1);
+  g(() => {
+    c() && I() && b(!1);
   });
   const z = S(() => {
-    if (n.bottomBarItems) return n.bottomBarItems;
-    if (!d) return;
-    const e = [...d.statusBarItems()].sort((o, i) => (o.order ?? 100) - (i.order ?? 100)), c = e.filter((o) => o.position === "left"), m = e.filter((o) => o.position === "right");
+    if (o.bottomBarItems) return o.bottomBarItems;
+    if (!a) return;
+    const e = [...a.statusBarItems()].sort((n, i) => (n.order ?? 100) - (i.order ?? 100)), s = e.filter((n) => n.position === "left"), d = e.filter((n) => n.position === "right");
     return [(() => {
-      var o = B();
-      return l(o, r(T, {
-        each: c,
+      var n = B();
+      return l(n, r(T, {
+        each: s,
         children: (i) => r($, {
           get component() {
             return i.component;
           }
         })
-      })), o;
+      })), n;
     })(), (() => {
-      var o = B();
-      return l(o, r(T, {
-        each: m,
+      var n = B();
+      return l(n, r(T, {
+        each: d,
         children: (i) => r($, {
           get component() {
             return i.component;
           }
         })
-      })), o;
+      })), n;
     })()];
   });
-  v(() => {
+  g(() => {
     const e = f();
     if (!e.length) return;
     t.sidebarActiveTab() || C(e[0].id);
   });
   const F = (e) => {
-    const c = s() ? !0 : d?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
-      nextActiveId: m,
-      nextMobileSidebarOpen: o
+    const s = m() ? !0 : a?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
+      nextActiveId: d,
+      nextMobileSidebarOpen: n
     } = J({
       clickedId: e,
       activeId: t.sidebarActiveTab(),
       mobileSidebarOpen: w(),
-      clickedIsFullScreen: c
+      clickedIsFullScreen: s
     });
-    t.sidebarActiveTab() !== m && C(m), b(o);
-  }, H = () => s() ? !0 : t.sidebarCollapsed();
+    t.sidebarActiveTab() !== d && C(d), b(n);
+  }, H = () => m() ? !0 : t.sidebarCollapsed();
   return (() => {
-    var e = ee(), c = e.firstChild, m = c.firstChild, o = m.firstChild;
+    var e = ee(), s = e.firstChild, d = s.firstChild, n = d.firstChild;
     return l(e, r(N, {
       get logo() {
-        return n.logo;
+        return o.logo;
       },
       get actions() {
-        return n.topBarActions;
+        return o.topBarActions;
       }
-    }), c), l(c, r(u, {
+    }), s), l(s, r(u, {
       get when() {
-        return !a();
+        return !c();
       },
       get children() {
         return [r(u, {
@@ -126,7 +130,7 @@ function ge(n) {
                 return f();
               },
               get bottomItems() {
-                return n.activityBottomItems;
+                return o.activityBottomItems;
               },
               get activeId() {
                 return t.sidebarActiveTab();
@@ -136,13 +140,13 @@ function ge(n) {
                 return H();
               },
               get onCollapsedChange() {
-                return p(() => !!s())() ? void 0 : t.setSidebarCollapsed;
+                return p(() => !!m())() ? void 0 : t.setSidebarCollapsed;
               }
             });
           }
         }), r(u, {
           get when() {
-            return !s();
+            return !m();
           },
           get children() {
             return r(L, {
@@ -165,9 +169,9 @@ function ge(n) {
           }
         })];
       }
-    }), m), l(c, r(u, {
+    }), d), l(s, r(u, {
       get when() {
-        return p(() => !!(a() && w()))() && !s();
+        return p(() => !!(c() && w()))() && !m();
       },
       get children() {
         return [(() => {
@@ -178,20 +182,20 @@ function ge(n) {
           return l(h, () => y(t.sidebarActiveTab())), x(() => A(i, _("absolute left-0 top-0 bottom-0 z-50", "w-72 max-w-[80vw]", "bg-sidebar border-r border-sidebar-border", "shadow-xl", "animate-in slide-in-from-left duration-200"))), i;
         })()];
       }
-    }), m), l(o, () => n.children), l(m, r(u, {
+    }), d), l(n, () => o.children), l(d, r(u, {
       get when() {
-        return p(() => !!(!a() && t.terminalOpened()))() && n.terminalPanel;
+        return p(() => !!(!c() && t.terminalOpened()))() && o.terminalPanel;
       },
       get children() {
         var i = Z();
         return l(i, r(M, {
           direction: "vertical",
           onResize: (h) => t.setTerminalHeight(t.terminalHeight() - h)
-        }), null), l(i, () => n.terminalPanel, null), x((h) => R(i, "height", `${t.terminalHeight()}px`)), i;
+        }), null), l(i, () => o.terminalPanel, null), x((h) => R(i, "height", `${t.terminalHeight()}px`)), i;
       }
     }), null), l(e, r(u, {
       get when() {
-        return !a();
+        return !c();
       },
       get children() {
         return r(V, {
@@ -202,7 +206,7 @@ function ge(n) {
       }
     }), null), l(e, r(u, {
       get when() {
-        return p(() => !!a())() && f().length > 0;
+        return p(() => !!c())() && f().length > 0;
       },
       get children() {
         return r(j, {
@@ -225,11 +229,11 @@ function ge(n) {
       "bg-background text-foreground",
       // Prevent overscroll on the shell container
       "overscroll-none",
-      n.class
+      o.class
     ))), e;
   })();
 }
 P(["click"]);
 export {
-  ge as Shell
+  ve as Shell
 };

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

@@ -0,0 +1,24 @@
+export type ActivityBarCollapseBehavior = 'toggle' | 'preserve';
+export interface ResolveActivityBarClickArgs {
+    clickedId: string;
+    activeId: string;
+    collapsed: boolean;
+    /**
+     * How the clicked item should affect the sidebar collapsed state.
+     *
+     * - `toggle` (default): VSCode-like behavior for sidebar-backed tabs.
+     * - `preserve`: navigate without mutating the collapsed state (useful for fullScreen pages).
+     */
+    behavior?: ActivityBarCollapseBehavior;
+}
+export interface ResolveActivityBarClickResult {
+    nextActiveId: string;
+    /** When undefined, the click should not change the collapsed state. */
+    nextCollapsed?: boolean;
+    /**
+     * Hint for LayoutContext.setSidebarActiveTab({ openSidebar }).
+     * Only meaningful when the click causes a tab change.
+     */
+    openSidebar?: boolean;
+}
+export declare function resolveActivityBarClick(args: ResolveActivityBarClickArgs): ResolveActivityBarClickResult;

package/dist/components/layout/activityBarBehavior.js

@@ -0,0 +1,6 @@
+function c(e) {
+  return (e.behavior ?? "toggle") === "preserve" ? e.clickedId === e.activeId ? { nextActiveId: e.activeId } : { nextActiveId: e.clickedId, openSidebar: !1 } : e.clickedId === e.activeId && !e.collapsed ? { nextActiveId: e.activeId, nextCollapsed: !0 } : { nextActiveId: e.clickedId, nextCollapsed: !1, openSidebar: !0 };
+}
+export {
+  c as resolveActivityBarClick
+};

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

@@ -0,0 +1,47 @@
+import { type JSX, type Component } from 'solid-js';
+export type SegmentedControlSize = 'sm' | 'md' | 'lg';
+export interface SegmentedControlOption {
+    /** Unique value for this option */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional icon component */
+    icon?: Component<{
+        class?: string;
+    }>;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+export interface SegmentedControlProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Currently selected value */
+    value: string;
+    /** Callback when selection changes */
+    onChange: (value: string) => void;
+    /** Available options */
+    options: SegmentedControlOption[];
+    /** Size variant */
+    size?: SegmentedControlSize;
+    /** Whether the entire control is disabled */
+    disabled?: boolean;
+}
+/**
+ * SegmentedControl - A toggle button group for switching between options
+ *
+ * Common use cases:
+ * - View mode switching (e.g., UI/JSON, List/Grid)
+ * - Tab-like navigation within a section
+ * - Filter toggles
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl
+ *   value={viewMode()}
+ *   onChange={setViewMode}
+ *   options={[
+ *     { value: 'ui', label: 'UI' },
+ *     { value: 'json', label: 'JSON' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;

package/dist/components/ui/SegmentedControl.js

@@ -0,0 +1,63 @@
+import { spread as y, mergeProps as C, insert as i, createComponent as m, memo as k, effect as w, setAttribute as $, className as z, template as v, delegateEvents as S } from "solid-js/web";
+import { splitProps as _, For as P } from "solid-js";
+import { cn as g } from "../../utils/cn.js";
+var A = /* @__PURE__ */ v("<div role=group>"), D = /* @__PURE__ */ v('<button type=button role=radio><span class="inline-flex items-center gap-1.5">');
+const E = {
+  sm: {
+    container: "p-0.5 gap-0.5",
+    button: "px-2 py-1 text-[11px]",
+    icon: "w-3 h-3"
+  },
+  md: {
+    container: "p-0.5 gap-0.5",
+    button: "px-3 py-1.5 text-xs",
+    icon: "w-3.5 h-3.5"
+  },
+  lg: {
+    container: "p-1 gap-1",
+    button: "px-4 py-2 text-sm",
+    icon: "w-4 h-4"
+  }
+};
+function q(p) {
+  const [e, f] = _(p, ["value", "onChange", "options", "size", "disabled", "class"]), x = () => e.size ?? "md", s = () => E[x()], h = (n, r) => {
+    e.disabled || r || n !== e.value && e.onChange(n);
+  };
+  return (() => {
+    var n = A();
+    return y(n, C({
+      get class() {
+        return g("inline-flex items-center rounded-lg border border-border bg-muted/40", s().container, e.disabled && "opacity-50 pointer-events-none", e.class);
+      }
+    }, f), !1, !0), i(n, m(P, {
+      get each() {
+        return e.options;
+      },
+      children: (r) => {
+        const l = () => e.value === r.value, a = () => e.disabled || r.disabled;
+        return (() => {
+          var o = D(), d = o.firstChild;
+          return o.$$click = () => h(r.value, r.disabled), i(d, (() => {
+            var t = k(() => !!r.icon);
+            return () => t() && m(r.icon, {
+              get class() {
+                return s().icon;
+              }
+            });
+          })(), null), i(d, () => r.label, null), w((t) => {
+            var c = l(), u = a(), b = g("font-medium rounded-md transition-all duration-150 cursor-pointer", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", s().button, l() ? "bg-background text-foreground shadow-sm border border-border" : "text-muted-foreground hover:text-foreground hover:bg-muted/50 border border-transparent", a() && "cursor-not-allowed opacity-50");
+            return c !== t.e && $(o, "aria-checked", t.e = c), u !== t.t && (o.disabled = t.t = u), b !== t.a && z(o, t.a = b), t;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          }), o;
+        })();
+      }
+    })), n;
+  })();
+}
+S(["click"]);
+export {
+  q as SegmentedControl
+};

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

@@ -19,6 +19,7 @@ export { LineChart, AreaChart, DataBarChart, DataPieChart, MonitoringChart, type
 export { Stepper, Wizard, useWizard, type StepItem, type StepperProps, type StepperVariant, type StepperOrientation, type StepperSize, type WizardProps, type WizardStepContent, type UseWizardOptions, type UseWizardReturn, } from './Stepper';
 export { RadioGroup, RadioOption, RadioList, type RadioGroupProps, type RadioOptionProps, type RadioListProps, type RadioSize, type RadioOrientation, type RadioVariant, } from './Radio';
 export { Switch, type SwitchProps, type SwitchSize } from './Switch';
+export { SegmentedControl, type SegmentedControlProps, type SegmentedControlOption, type SegmentedControlSize, } from './SegmentedControl';
 export { Checkbox, CheckboxGroup, CheckboxList, type CheckboxProps, type CheckboxGroupProps, type CheckboxListProps, type CheckboxSize, type CheckboxVariant, } from './Checkbox';
 export { Pagination, type PaginationProps, type PaginationSize, type PaginationVariant, } from './Pagination';
 export { LinearProgress, CircularProgress, SegmentedProgress, StepsProgress, type LinearProgressProps, type CircularProgressProps, type SegmentedProgressProps, type StepsProgressProps, type ProgressSize, type ProgressColor, } from './Progress';