@luxfi/ui 7.4.10 → 7.4.12

package/dist/tabs.js

@@ -1,213 +1,126 @@
 "use client";
-import * as RadixTabs from '@radix-ui/react-tabs';
+import { Tabs, useTabsContext, Text } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { Children, createElement } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // src/tabs.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var ROOT_SIZE_CLASSES = {
-  sm: "[--tabs-height:2rem] [--tabs-content-padding:1.5rem]",
-  md: "[--tabs-height:2.5rem] [--tabs-content-padding:1.5rem]",
-  free: ""
+var ink = (children, Wrap = Text, props = {}) => {
+  let hasText = false;
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
 };
-var TabsRoot = React.forwardRef(
-  function TabsRoot2(props, ref) {
-    const {
-      variant = "solid",
-      size = "md",
-      fitted,
-      lazyMount: _lazyMount,
-      unmountOnExit: _unmountOnExit,
-      onValueChange,
-      className,
-      ...rest
-    } = props;
-    const handleValueChange = React.useCallback(
-      (value) => {
-        if (!onValueChange) return;
-        onValueChange({ value });
-      },
-      [onValueChange]
-    );
-    return /* @__PURE__ */ jsx(
-      RadixTabs.Root,
-      {
-        ref,
-        "data-variant": variant,
-        "data-size": size,
-        "data-fitted": fitted ? "" : void 0,
-        className: cn(
-          "relative",
-          ROOT_SIZE_CLASSES[size],
-          className
-        ),
-        onValueChange: onValueChange ? handleValueChange : void 0,
-        ...rest
-      }
-    );
-  }
-);
-var TabsList = React.forwardRef(
-  function TabsList2(props, ref) {
-    const {
-      className,
-      // Strip Chakra style props
-      flexWrap: _flexWrap,
-      alignItems: _alignItems,
-      whiteSpace: _whiteSpace,
-      bgColor: _bgColor,
-      marginBottom: _marginBottom,
-      mx: _mx,
-      px: _px,
-      w: _w,
-      overflowX: _overflowX,
-      overscrollBehaviorX: _overscrollBehaviorX,
-      css: _css,
-      position: _position,
-      boxShadow: _boxShadow,
-      top: _top,
-      zIndex: _zIndex,
-      style: styleProp,
-      asChild,
-      loop,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsx(
-      RadixTabs.List,
-      {
-        ref,
-        asChild,
-        loop,
-        className: cn(
-          "inline-flex w-full relative isolate flex-row",
-          "min-h-[var(--tabs-height,2.5rem)]",
-          className
-        ),
-        style: styleProp,
-        ...rest
-      }
-    );
-  }
-);
-var TRIGGER_BASE = "outline-none min-w-[var(--tabs-height,2.5rem)] h-[var(--tabs-height,2.5rem)] flex items-center relative cursor-pointer gap-2 focus-visible:z-[1] focus-visible:outline-2 focus-visible:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-50";
-var TRIGGER_SIZE_CLASSES = {
-  sm: "py-1 px-3 text-sm",
-  md: "py-2 px-4 text-base",
-  free: ""
+var Shape = React.createContext({
+  variant: "solid",
+  size: "md",
+  fitted: false
+});
+var SIZE = {
+  sm: { height: 32, minWidth: 32, paddingVertical: 4, paddingHorizontal: 12, fontSize: 14 },
+  md: { height: 40, minWidth: 40, paddingVertical: 8, paddingHorizontal: 16, fontSize: 16 },
+  free: {}
 };
-var TRIGGER_VARIANT_CLASSES = {
-  solid: "font-semibold gap-1 rounded-md bg-transparent text-tabs-solid-fg data-[state=active]:bg-selected-control-bg data-[state=active]:text-selected-control-text data-[state=active]:hover:text-selected-control-text hover:text-hover",
-  secondary: "font-medium bg-transparent text-tabs-secondary-fg border-2 border-solid border-tabs-secondary-border rounded-md data-[state=active]:bg-selected-control-bg data-[state=active]:text-selected-control-text data-[state=active]:border-transparent data-[state=active]:hover:border-transparent hover:text-hover hover:border-hover",
-  segmented: "bg-transparent text-text-primary border-2 border-solid border-selected-control-bg hover:text-hover data-[state=active]:text-selected-control-text data-[state=active]:bg-selected-control-bg data-[state=active]:border-selected-control-bg data-[state=active]:hover:text-selected-control-text",
-  unstyled: ""
+var SELECTED_BG = "var(--color-selected-control-bg)";
+var SELECTED_FG = "var(--color-selected-control-text)";
+var VARIANT = {
+  solid: {
+    rest: {
+      fontWeight: "600",
+      borderRadius: 6,
+      color: "var(--color-tabs-solid-fg)",
+      hoverStyle: { color: "var(--color-hover)" }
+    },
+    active: { backgroundColor: SELECTED_BG, color: SELECTED_FG }
+  },
+  secondary: {
+    rest: {
+      fontWeight: "500",
+      borderRadius: 6,
+      borderWidth: 2,
+      borderColor: "var(--color-tabs-secondary-border)",
+      color: "var(--color-tabs-secondary-fg)",
+      hoverStyle: { color: "var(--color-hover)", borderColor: "var(--color-hover)" }
+    },
+    active: { backgroundColor: SELECTED_BG, color: SELECTED_FG, borderColor: "transparent" }
+  },
+  segmented: {
+    rest: {
+      borderWidth: 2,
+      borderColor: SELECTED_BG,
+      color: "var(--color-text-primary)",
+      hoverStyle: { color: "var(--color-hover)" }
+    },
+    active: { backgroundColor: SELECTED_BG, borderColor: SELECTED_BG, color: SELECTED_FG }
+  },
+  unstyled: { rest: {}, active: {} }
 };
-var TabsTrigger = React.forwardRef(
-  function TabsTrigger2(props, ref) {
-    const {
-      className,
-      // Strip Chakra style props
-      scrollSnapAlign: _scrollSnapAlign,
-      flexShrink: _flexShrink,
-      bgColor: _bgColor,
-      w: _w,
-      py: _py,
-      borderRadius: _borderRadius,
-      fontWeight: _fontWeight,
-      color: _color,
-      _hover,
-      position: _position,
-      top: _top,
-      left: _left,
-      visibility: _visibility,
+var LIST_HEIGHT = { sm: 32, md: 40, free: void 0 };
+var TabsRoot = ({
+  variant = "solid",
+  size = "md",
+  fitted = false,
+  onValueChange,
+  ...rest
+}) => {
+  const shape = React.useMemo(() => ({ variant, size, fitted }), [variant, size, fitted]);
+  return /* @__PURE__ */ jsx(Shape.Provider, { value: shape, children: /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      unstyled: true,
+      position: "relative",
+      orientation: "horizontal",
+      onValueChange: onValueChange ? (value) => onValueChange({ value }) : void 0,
       ...rest
-    } = props;
-    const internalRef = React.useRef(null);
-    const mergedRef = useMergedRef(ref, internalRef);
-    const { variant, size, fitted } = useTabsContext(internalRef);
-    return /* @__PURE__ */ jsx(
-      RadixTabs.Trigger,
-      {
-        ref: mergedRef,
-        className: cn(
-          "group",
-          TRIGGER_BASE,
-          TRIGGER_SIZE_CLASSES[size],
-          TRIGGER_VARIANT_CLASSES[variant],
-          fitted && "flex-1 text-center justify-center",
-          className
-        ),
-        ...rest
-      }
-    );
-  }
-);
-var TabsContent = React.forwardRef(
-  function TabsContent2(props, ref) {
-    const { className, padding: _padding, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      RadixTabs.Content,
-      {
-        ref,
-        className: cn(
-          "w-full pt-[var(--tabs-content-padding,1.5rem)]",
-          "focus-visible:outline-2 focus-visible:outline-offset-[-2px]",
-          className
-        ),
-        ...rest
-      }
-    );
-  }
-);
-var COUNTER_OVERLOAD = 50;
-var TabsCounter = ({ count }) => {
-  if (count === void 0 || count === null) {
-    return null;
-  }
+    }
+  ) });
+};
+var TabsList = (props) => {
+  const { size } = React.useContext(Shape);
   return /* @__PURE__ */ jsx(
-    "span",
+    Tabs.List,
     {
-      className: cn(
-        "group-hover:text-inherit",
-        count > 0 ? "text-text-secondary" : "text-[rgba(16,17,18,0.24)] dark:text-[rgba(255,255,255,0.24)]"
-      ),
-      children: count > COUNTER_OVERLOAD ? `${COUNTER_OVERLOAD}+` : count
+      unstyled: true,
+      width: "100%",
+      position: "relative",
+      flexDirection: "row",
+      backgroundColor: "transparent",
+      minHeight: LIST_HEIGHT[size],
+      ...props
     }
   );
 };
-function useTabsContext(triggerRef) {
-  const [ctx, setCtx] = React.useState({ variant: "solid", size: "md", fitted: false });
-  React.useEffect(() => {
-    const el = triggerRef.current;
-    if (!el) return;
-    const root = el.closest("[data-variant]");
-    if (!root) return;
-    setCtx({
-      variant: root.getAttribute("data-variant") ?? "solid",
-      size: root.getAttribute("data-size") ?? "md",
-      fitted: root.hasAttribute("data-fitted")
-    });
-  }, [triggerRef]);
-  return ctx;
-}
-function useMergedRef(...refs) {
-  return React.useCallback(
-    (instance) => {
-      for (const ref of refs) {
-        if (!ref) continue;
-        if (typeof ref === "function") {
-          ref(instance);
-        } else {
-          ref.current = instance;
-        }
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    refs
+var TabsTrigger = ({ children, ...props }) => {
+  const { variant, size, fitted } = React.useContext(Shape);
+  const { rest, active } = VARIANT[variant];
+  const selected = useTabsContext().value === props.value;
+  return /* @__PURE__ */ jsx(
+    Tabs.Tab,
+    {
+      unstyled: true,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "relative",
+      cursor: "pointer",
+      gap: 8,
+      borderWidth: 0,
+      ...SIZE[size],
+      ...rest,
+      ...selected ? active : null,
+      ...fitted ? { flex: 1 } : null,
+      ...props,
+      children: ink(children, void 0, { fontSize: "inherit", color: "inherit", fontWeight: "inherit" })
+    }
   );
-}
+};
+var TabsContent = ({ children, ...props }) => /* @__PURE__ */ jsx(Tabs.Content, { unstyled: true, width: "100%", paddingTop: 24, backgroundColor: "transparent", ...props, children: ink(children) });
+var COUNTER_OVERLOAD = 50;
+var TabsCounter = ({ count }) => {
+  if (count === void 0 || count === null) return null;
+  return /* @__PURE__ */ jsx(Text, { color: count > 0 ? "var(--color-text-secondary)" : "var(--color-text-disabled)", children: count > COUNTER_OVERLOAD ? `${COUNTER_OVERLOAD}+` : count });
+};
 
 export { TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger };

package/dist/tag.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React4 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var gui = require('@hanzo/gui');
-var jsxRuntime = require('react/jsx-runtime');
 var usehooks = require('@uidotdev/usehooks');
 
 function _interopNamespace(e) {
@@ -29,9 +29,6 @@ function _interopNamespace(e) {
 var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 
 // src/tag.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
 var CloseButtonFrame = gui.styled(gui.View, {
   name: "LuxCloseButton",
@@ -62,23 +59,19 @@ var CloseButtonFrame = gui.styled(gui.View, {
     }
   }
 });
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
 var CloseButton = React4__namespace.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     CloseButtonFrame,
     {
       ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      className,
       ...rest,
       children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
-          className: "size-5",
+          width: 20,
+          height: 20,
           viewBox: "0 0 20 20",
           fill: "none",
           "aria-hidden": "true",
@@ -94,6 +87,9 @@ var CloseButton = React4__namespace.forwardRef(function CloseButton2(props, ref)
     }
   );
 });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
 var SHIM_PROPS = [
   "w",
   "h",
@@ -277,6 +273,14 @@ React4__namespace.forwardRef(
     )) });
   }
 );
+var ink = (children, Wrap = gui.Text, props = {}) => {
+  let hasText = false;
+  React4.Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return React4.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React4.createElement(Wrap, props, child) : child);
+};
 var TOUCH_PX = 1024;
 function useBelow(px) {
   const [below, setBelow] = React4__namespace.useState(false);
@@ -381,14 +385,21 @@ var Tooltip = React4__namespace.forwardRef(
             {
               ref,
               unstyled: true,
-              className: cn(
-                "z-[9999] overflow-hidden rounded-lg px-3 py-2 text-sm",
-                "animate-in fade-in-0 zoom-in-95",
-                isPopover && "bg-[var(--color-popover-bg)] text-[var(--color-text-primary)]",
-                isPopover && "shadow-[var(--shadow-popover)] border border-[var(--color-border-divider)] max-w-sm",
-                !isPopover && "bg-[var(--color-tooltip-bg)] text-[var(--color-tooltip-fg)] max-w-xs",
-                contentProps?.className
-              ),
+              zIndex: 9999,
+              overflow: "hidden",
+              borderRadius: 8,
+              paddingHorizontal: 12,
+              paddingVertical: 8,
+              maxWidth: isPopover ? 384 : 320,
+              backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)",
+              transition: "quick",
+              enterStyle: { opacity: 0, scale: 0.95 },
+              exitStyle: { opacity: 0, scale: 0.95 },
+              ...isPopover ? {
+                borderWidth: 1,
+                borderColor: "var(--color-border-divider)",
+                shadowColor: "var(--shadow-popover)"
+              } : {},
               onClick: interactive ? handleContentClick : void 0,
               ...selected ? { "data-selected": true } : {},
               ...contentProps,
@@ -397,12 +408,13 @@ var Tooltip = React4__namespace.forwardRef(
                   gui.Tooltip.Arrow,
                   {
                     unstyled: true,
-                    className: cn(
-                      isPopover ? "fill-[var(--color-popover-bg)]" : "fill-[var(--color-tooltip-bg)]"
-                    )
+                    backgroundColor: isPopover ? "var(--color-popover-bg)" : "var(--color-tooltip-bg)"
                   }
                 ),
-                content
+                ink(content, void 0, {
+                  fontSize: 14,
+                  color: isPopover ? "var(--color-text-primary)" : "var(--color-tooltip-fg)"
+                })
               ]
             }
           )
@@ -415,25 +427,24 @@ var nbsp = String.fromCharCode(160);
 function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
-var TAG_BASE = "inline-flex items-center align-top max-w-full select-text rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500";
-var TAG_VARIANT_CLASSES = {
-  subtle: "bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]",
-  clickable: "cursor-pointer bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)] hover:opacity-76",
-  filter: "bg-[var(--color-tag-filter-bg)]",
-  select: "cursor-pointer bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)] hover:text-[var(--color-hover)] hover:opacity-76"
+var TAG_VARIANT = {
+  subtle: { backgroundColor: "var(--color-tag-subtle-bg)" },
+  clickable: { backgroundColor: "var(--color-tag-clickable-bg)", cursor: "pointer", hoverStyle: { opacity: 0.76 } },
+  filter: { backgroundColor: "var(--color-tag-filter-bg)" },
+  select: { backgroundColor: "var(--color-tag-select-bg)", cursor: "pointer", hoverStyle: { opacity: 0.76 } }
+};
+var TAG_VARIANT_FG = {
+  subtle: "var(--color-tag-subtle-fg)",
+  clickable: "var(--color-tag-clickable-fg)",
+  filter: void 0,
+  select: "var(--color-tag-select-fg)"
 };
-var TAG_SIZE_CLASSES = {
-  sm: "px-1 py-0.5 min-h-5 gap-1 text-xs",
-  md: "px-1 py-0.5 min-h-6 gap-1 text-sm",
-  lg: "px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm"
+var TAG_SIZE = {
+  sm: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 20, gap: 4 },
+  md: { paddingHorizontal: 4, paddingVertical: 2, minHeight: 24, gap: 4 },
+  lg: { paddingHorizontal: 6, paddingVertical: 6, minHeight: 32, minWidth: 32, gap: 4 }
 };
-var TAG_SELECTED_CLASSES = [
-  "bg-[var(--color-tag-select-selected-bg)]",
-  "text-[var(--color-tag-select-selected-fg)]",
-  "hover:text-[var(--color-tag-select-selected-fg)]",
-  "hover:opacity-76"
-].join(" ");
-var TAG_DISABLED_CLASSES = "opacity-40 pointer-events-none cursor-not-allowed";
+var TAG_SIZE_FONT = { sm: 12, md: 14, lg: 14 };
 var Tag = React4__namespace.forwardRef(
   function Tag2(props, ref) {
     const {
@@ -453,46 +464,78 @@ var Tag = React4__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const labelElement = label ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[var(--color-text-secondary)]", children: [
+    const resolvedVariant = variant ?? "subtle";
+    const resolvedSize = size ?? "md";
+    const isSelected = Boolean(selected) && !loading;
+    const backgroundColor = isSelected ? "var(--color-tag-select-selected-bg)" : TAG_VARIANT[resolvedVariant].backgroundColor;
+    const color = isSelected ? "var(--color-tag-select-selected-fg)" : TAG_VARIANT_FG[resolvedVariant];
+    const hoverStyle = isSelected ? { opacity: 0.76 } : TAG_VARIANT[resolvedVariant].hoverStyle;
+    const textHoverColor = !isSelected && resolvedVariant === "select" ? "var(--color-hover)" : void 0;
+    const labelElement = label ? /* @__PURE__ */ jsxRuntime.jsxs(gui.Text, { fontSize: TAG_SIZE_FONT[resolvedSize], fontWeight: "500", color: "var(--color-text-secondary)", children: [
       label,
       ":",
       nbsp
     ] }) : null;
-    const labelSpan = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "line-clamp-1 whitespace-nowrap text-ellipsis font-medium inline", children: [
-      labelElement,
-      children
-    ] });
+    const labelSpan = /* @__PURE__ */ jsxRuntime.jsxs(
+      gui.Text,
+      {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        fontWeight: "500",
+        fontSize: TAG_SIZE_FONT[resolvedSize],
+        color,
+        hoverStyle: textHoverColor ? { color: textHoverColor } : void 0,
+        children: [
+          labelElement,
+          children
+        ]
+      }
+    );
     const contentElement = truncated ? /* @__PURE__ */ jsxRuntime.jsx(TruncatedTextTooltip, { label: children, children: labelSpan }) : labelSpan;
     return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { loading, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
+      gui.XStack,
       {
         ref,
-        className: cn(
-          TAG_BASE,
-          TAG_VARIANT_CLASSES[variant ?? "subtle"],
-          TAG_SIZE_CLASSES[size ?? "md"],
-          selected && !loading && TAG_SELECTED_CLASSES,
-          disabled && TAG_DISABLED_CLASSES,
-          className
-        ),
-        ...selected && !loading && { "data-selected": true },
+        render: /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+        display: "inline-flex",
+        alignItems: "center",
+        verticalAlign: "top",
+        maxWidth: "100%",
+        userSelect: "text",
+        ...TAG_SIZE[resolvedSize],
+        backgroundColor,
+        hoverStyle,
+        focusVisibleStyle: {
+          outlineWidth: 2,
+          outlineOffset: 2,
+          outlineColor: "var(--color-gray-500)",
+          outlineStyle: "solid"
+        },
+        cursor: disabled ? "not-allowed" : TAG_VARIANT[resolvedVariant].cursor,
+        ...disabled ? { opacity: 0.4, pointerEvents: "none" } : {},
+        ...isSelected && { "data-selected": true },
         ...disabled && { "data-disabled": true },
+        className,
         ...rest,
         children: [
-          startElement && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 inline-flex items-center justify-center empty:hidden", children: startElement }),
+          startElement && /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { flexShrink: 0, alignItems: "center", justifyContent: "center", children: startElement }),
           contentElement,
-          endElement && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              ...endElementProps,
-              className: cn(
-                "shrink-0 inline-flex items-center justify-center",
-                endElementProps?.className
-              ),
-              children: endElement
-            }
-          ),
-          closable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 inline-flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose }) })
+          endElement && (() => {
+            const { className: endClassName, ...endElementRest } = endElementProps ?? {};
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              gui.XStack,
+              {
+                ...endElementRest,
+                flexShrink: 0,
+                alignItems: "center",
+                justifyContent: "center",
+                className: endClassName,
+                children: endElement
+              }
+            );
+          })(),
+          closable && /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { flexShrink: 0, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose }) })
         ]
       }
     ) });