@egcs/newui 0.0.0-stage → 0.1.0-alpha.1

package/dist/chunks/browser-VKDL6Y2Z.js

@@ -0,0 +1,133 @@
+import { tableCellRecipe, tableRecipe } from "./browser-7KFQTWBU.js";
+
+// dist/chunks/solid-NFGEU6BU.jsx
+import { template as _$template } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { splitProps } from "solid-js";
+var _tmpl$ = /* @__PURE__ */_$template(`<thead>`);
+var _tmpl$2 = /* @__PURE__ */_$template(`<tbody>`);
+var _tmpl$3 = /* @__PURE__ */_$template(`<tfoot>`);
+var _tmpl$4 = /* @__PURE__ */_$template(`<tr>`);
+var _tmpl$5 = /* @__PURE__ */_$template(`<th scope=col>`);
+var _tmpl$6 = /* @__PURE__ */_$template(`<td>`);
+var _tmpl$7 = /* @__PURE__ */_$template(`<caption>`);
+var styles = tableRecipe();
+function TableHeader(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _$spread(_el$, _$mergeProps(rest, {
+      get ["class"]() {
+        return styles.header({
+          class: local.class
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$;
+  })();
+}
+function TableBody(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (() => {
+    var _el$2 = _$getNextElement(_tmpl$2);
+    _$spread(_el$2, _$mergeProps(rest, {
+      get ["class"]() {
+        return styles.body({
+          class: local.class
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$2;
+  })();
+}
+function TableFooter(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (() => {
+    var _el$3 = _$getNextElement(_tmpl$3);
+    _$spread(_el$3, _$mergeProps(rest, {
+      get ["class"]() {
+        return styles.footer({
+          class: local.class
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$3;
+  })();
+}
+function TableRow(props) {
+  const [local, rest] = splitProps(props, ["class", "selected"]);
+  return (() => {
+    var _el$4 = _$getNextElement(_tmpl$4);
+    _$spread(_el$4, _$mergeProps(rest, {
+      get ["data-selected"]() {
+        return local.selected ? "" : void 0;
+      },
+      get ["class"]() {
+        return styles.row({
+          class: local.class
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$4;
+  })();
+}
+function TableHead(props) {
+  const [local, rest] = splitProps(props, ["class", "align"]);
+  return (() => {
+    var _el$5 = _$getNextElement(_tmpl$5);
+    _$spread(_el$5, _$mergeProps(rest, {
+      get ["class"]() {
+        return styles.head({
+          class: tableCellRecipe({
+            align: local.align,
+            class: local.class
+          })
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$5;
+  })();
+}
+function TableCell(props) {
+  const [local, rest] = splitProps(props, ["class", "align"]);
+  return (() => {
+    var _el$6 = _$getNextElement(_tmpl$6);
+    _$spread(_el$6, _$mergeProps(rest, {
+      get ["class"]() {
+        return styles.cell({
+          class: tableCellRecipe({
+            align: local.align,
+            class: local.class
+          })
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$6;
+  })();
+}
+function TableCaption(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (() => {
+    var _el$7 = _$getNextElement(_tmpl$7);
+    _$spread(_el$7, _$mergeProps(rest, {
+      get ["class"]() {
+        return styles.caption({
+          class: local.class
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$7;
+  })();
+}
+export { TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };

package/dist/chunks/browser-VL7VB7HX.js

@@ -0,0 +1,56 @@
+import { useCalloutOptions } from "./browser-ONRUETYP.js";
+import { calloutRecipe } from "./browser-ZOV6DDXT.js";
+
+// dist/chunks/solid-DSMYPMW5.jsx
+import { template as _$template } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { CircleCheck, CircleX, Info, TriangleAlert } from "lucide-solid";
+import { splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */_$template(`<span>`);
+var styles = calloutRecipe();
+var symbols = {
+  primary: Info,
+  neutral: Info,
+  info: Info,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  danger: CircleX
+};
+function CalloutSymbol(props) {
+  return _$createComponent(Dynamic, {
+    get component() {
+      return symbols[props.tone];
+    },
+    "aria-hidden": "true"
+  });
+}
+function CalloutIcon(props) {
+  const options = useCalloutOptions();
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _$spread(_el$, _$mergeProps(rest, {
+      "aria-hidden": "true",
+      get ["class"]() {
+        return styles.icon({
+          class: local.class
+        });
+      }
+    }), false, true);
+    _$insert(_el$, () => local.children ?? _$createComponent(CalloutSymbol, {
+      get tone() {
+        return options().tone;
+      }
+    }));
+    _$runHydrationEvents();
+    return _el$;
+  })();
+}
+export { CalloutIcon };

package/dist/chunks/browser-VNQH2NLS.js

@@ -0,0 +1,22 @@
+// dist/chunks/solid-D7DFXPSQ.jsx
+var percent = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 1,
+  signDisplay: "exceptZero"
+});
+function formatDelta(value) {
+  return `${percent.format(value)}%`;
+}
+function deltaDirection(value) {
+  if (!Number.isFinite(value)) return "unavailable";
+  if (value === 0) return "unchanged";
+  return value > 0 ? "increase" : "decrease";
+}
+function deltaTone(value, isPositiveGood = true) {
+  if (!Number.isFinite(value) || value === 0) return "neutral";
+  return value > 0 === isPositiveGood ? "success" : "danger";
+}
+function deltaLabel(options) {
+  if (!Number.isFinite(options.value)) return "Unavailable";
+  return (options.valueFormat ?? formatDelta)(options.value);
+}
+export { formatDelta, deltaDirection, deltaTone, deltaLabel };

package/dist/chunks/browser-VQPEQHJC.js

@@ -0,0 +1,41 @@
+// dist/chunks/solid-ZOQSPK4F.jsx
+import { tv } from "tailwind-variants/lite";
+var dialogRecipe = tv({
+  slots: {
+    backdrop: "nui-dialog-backdrop nui:fixed nui:inset-0 nui:bg-[var(--nui-overlay-backdrop)]",
+    positioner: "nui-dialog-positioner nui:fixed nui:inset-0 nui:flex nui:items-center nui:justify-center nui:p-4 nui:sm:p-6",
+    content: "nui-dialog-content nui:relative nui:flex nui:max-h-[calc(100dvh-2rem)] nui:min-h-0 nui:w-full nui:min-w-0 nui:flex-col nui:text-foreground nui:wrap-anywhere nui:outline-none nui:sm:max-h-[calc(100dvh-3rem)]",
+    header: "nui:grid nui:shrink-0 nui:grid-cols-1 nui:items-start nui:gap-x-5 nui:gap-y-[var(--nui-header-gap)] nui:border-b nui:border-border nui:bg-surface nui:px-5 nui:py-3 nui:sm:px-6 nui:has-[[data-part=close-trigger]]:grid-cols-[minmax(0,1fr)_auto] nui:[&>[data-part=close-trigger]]:col-start-2 nui:[&>[data-part=close-trigger]]:row-start-1 nui:[&>[data-part=close-trigger]]:row-span-2",
+    title: "nui:col-start-1 nui:m-0 nui:text-xl nui:leading-snug nui:font-semibold nui:tracking-tight nui:text-foreground",
+    description: "nui:col-start-1 nui:m-0 nui:text-sm nui:leading-relaxed nui:text-muted-foreground",
+    body: "nui:grid nui:min-h-0 nui:gap-4 nui:overflow-y-auto nui:overscroll-contain nui:p-5 nui:text-base nui:leading-relaxed nui:sm:p-6",
+    footer: "nui:flex nui:shrink-0 nui:flex-wrap nui:items-center nui:justify-end nui:gap-2 nui:border-t nui:border-border nui:bg-surface nui:px-5 nui:py-3 nui:sm:px-6",
+    close: "nui:inline-flex nui:size-8 nui:shrink-0 nui:cursor-pointer nui:items-center nui:justify-center nui:rounded-full nui:border-0 nui:bg-[var(--nui-neutral-soft)] nui:text-[var(--nui-neutral-text)] nui:enabled:hover:bg-[var(--nui-neutral-soft-hover)] nui:enabled:active:bg-[var(--nui-neutral-soft-active)] nui:focus-visible:outline-[length:var(--nui-focus-width)] nui:focus-visible:outline-offset-[var(--nui-focus-offset)] nui:focus-visible:outline-focus-ring nui:disabled:cursor-not-allowed nui:disabled:bg-[var(--nui-disabled-background)] nui:disabled:text-[var(--nui-disabled-foreground)]"
+  },
+  variants: {
+    size: {
+      sm: {
+        content: "nui:max-w-md"
+      },
+      md: {
+        content: "nui:max-w-[40rem]"
+      },
+      lg: {
+        content: "nui:max-w-4xl"
+      }
+    },
+    variant: {
+      card: {
+        content: "nui:overflow-hidden nui:rounded-xl nui:border nui:border-border nui:bg-background nui:shadow-[var(--nui-overlay-shadow)]"
+      },
+      free: {
+        content: "nui:bg-transparent"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "card"
+  }
+});
+export { dialogRecipe };

package/dist/chunks/browser-VRGMZ2EB.js

@@ -0,0 +1,43 @@
+import { useMenubar } from "./browser-JXTC4N3M.js";
+import { MenuContent } from "./browser-ZLRFQ4YA.js";
+
+// dist/chunks/solid-W7QHICNH.jsx
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { createEffect, createSignal, mergeProps, Show, splitProps, untrack } from "solid-js";
+function MenubarSurface() {
+  const bar = useMenubar();
+  const panel = () => bar.panels().get(bar.api().triggerValue ?? "");
+  const [local, rest] = splitProps(mergeProps(() => panel() ?? {}), ["children", "onKeyDown", "ref"]);
+  const [surface, setSurface] = createSignal();
+  createEffect(() => {
+    const ref = local.ref;
+    const element = surface();
+    if (typeof ref === "function" && element) untrack(() => ref(element));
+  });
+  return _$createComponent(MenuContent, _$mergeProps(rest, {
+    ref: setSurface,
+    "on:keydown": {
+      capture: true,
+      handleEvent: event => {
+        if (typeof local.onKeyDown === "function") local.onKeyDown(event);else local.onKeyDown?.[0](local.onKeyDown[1], event);
+        if (event.defaultPrevented || event.target !== event.currentTarget) return;
+        if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+        if (event.key === "ArrowRight" && event.currentTarget.querySelector("[data-part=trigger-item][data-highlighted]")) return;
+        event.preventDefault();
+        event.stopPropagation();
+        bar.move(event.key, bar.api().triggerValue ?? "", true);
+      }
+    },
+    get children() {
+      return _$createComponent(Show, {
+        get when() {
+          return panel();
+        },
+        keyed: true,
+        children: content => content.children
+      });
+    }
+  }));
+}
+export { MenubarSurface };

package/dist/chunks/browser-W235HVGJ.js

@@ -0,0 +1,77 @@
+import { NavigationMenu } from "./browser-Z63UWS7Y.js";
+import { useNavbarDisclosure } from "./browser-7PJMEZRT.js";
+import { NavbarActions, NavbarBrand, NavbarContent, NavbarToggle } from "./browser-ZLY6ETEE.js";
+import { navbarRecipe } from "./browser-X5KFLSBV.js";
+import { NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "./browser-66NKRNLQ.js";
+import { Container } from "./browser-V47MD5HK.js";
+
+// dist/chunks/solid-CHNSOEJA.jsx
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { Collapsible } from "@ark-ui/solid/collapsible";
+import { mergeProps, splitProps } from "solid-js";
+function NavbarRoot(props) {
+  const [local, rest] = splitProps(mergeProps({
+    "aria-label": "Main navigation"
+  }, props), ["open", "defaultOpen", "onOpenChange", "tone", "width", "class", "children"]);
+  const disclosure = useNavbarDisclosure(local);
+  const styles = () => navbarRecipe({
+    tone: local.tone
+  });
+  return _$createComponent(Collapsible.RootProvider, {
+    get value() {
+      return disclosure.api;
+    },
+    get onKeyDown() {
+      return disclosure.onKeyDown;
+    },
+    get children() {
+      return _$createComponent(NavigationMenu.Root, _$mergeProps(rest, {
+        get onNavigate() {
+          return disclosure.close;
+        },
+        get orientation() {
+          return disclosure.desktop() ? "horizontal" : "vertical";
+        },
+        get ["class"]() {
+          return styles().root({
+            class: local.class
+          });
+        },
+        get children() {
+          return _$createComponent(Container, {
+            get size() {
+              return local.width;
+            },
+            get ["class"]() {
+              return styles().frame();
+            },
+            get children() {
+              return local.children;
+            }
+          });
+        }
+      }));
+    }
+  });
+}
+var Navbar = {
+  Root: NavbarRoot,
+  Brand: NavbarBrand,
+  Toggle: NavbarToggle,
+  Content: NavbarContent,
+  List: NavigationMenuList,
+  Item: NavigationMenuItem,
+  Link: NavigationMenuLink,
+  MenuTrigger: NavigationMenuTrigger,
+  MenuContent: NavigationMenuContent,
+  MenuGroup: NavigationMenu.Group,
+  MenuLabel: NavigationMenu.Label,
+  MenuDescription: NavigationMenu.Description,
+  Submenu: NavigationMenu.Submenu,
+  SubmenuTrigger: NavigationMenu.SubmenuTrigger,
+  SubmenuContent: NavigationMenu.SubmenuContent,
+  Actions: NavbarActions
+};
+export { NavbarRoot, Navbar };

package/dist/chunks/browser-W7YQNVZ5.js

@@ -0,0 +1,22 @@
+// dist/chunks/solid-24NEDHTJ.jsx
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ChevronLeft, ChevronRight } from "lucide-solid";
+import { Dynamic } from "solid-js/web";
+var icons = {
+  previous: ChevronLeft,
+  next: ChevronRight
+};
+function PaginationIcon(props) {
+  return _$createComponent(Dynamic, {
+    get component() {
+      return icons[props.name];
+    },
+    size: 16,
+    "aria-hidden": "true",
+    style: {
+      display: "block",
+      "flex-shrink": "0"
+    }
+  });
+}
+export { PaginationIcon };

package/dist/chunks/browser-WF5IBFVC.js

@@ -0,0 +1,34 @@
+// dist/chunks/solid-CWAM7WUH.jsx
+import { tv } from "tailwind-variants/lite";
+var buttonGroupRecipe = tv({
+  base: "nui-button-group nui:flex nui:min-w-0",
+  variants: {
+    orientation: {
+      horizontal: "nui:flex-row nui:items-center",
+      vertical: "nui:w-fit nui:flex-col nui:items-stretch"
+    },
+    align: {
+      start: "nui:justify-start",
+      center: "nui:justify-center",
+      end: "nui:justify-end"
+    },
+    attached: {
+      true: "nui:gap-0 nui:flex-nowrap",
+      false: "nui:gap-2"
+    },
+    fullWidth: {
+      true: "nui:w-full nui:[&>[data-nui-button]]:min-w-0 nui:[&>[data-nui-button]]:flex-1"
+    }
+  },
+  compoundVariants: [{
+    orientation: "horizontal",
+    attached: false,
+    class: "nui:flex-wrap"
+  }],
+  defaultVariants: {
+    orientation: "horizontal",
+    align: "start",
+    attached: false
+  }
+});
+export { buttonGroupRecipe };

package/dist/chunks/browser-WHZNZSGN.js

@@ -0,0 +1,7 @@
+import { verticalMenuRecipe } from "./browser-I5BBXCBS.js";
+
+// dist/chunks/solid-2AUDPT6J.jsx
+import { createContext, useContext } from "solid-js";
+var VerticalMenuStyles = createContext(() => verticalMenuRecipe());
+var useVerticalMenuStyles = () => useContext(VerticalMenuStyles);
+export { VerticalMenuStyles, useVerticalMenuStyles };

package/dist/chunks/browser-WN7JLUGW.js

@@ -0,0 +1,82 @@
+import { PaginationEllipsis, PaginationItem } from "./browser-GG5VR4T7.js";
+import { usePaginationStyles } from "./browser-DSWC74I6.js";
+
+// dist/chunks/solid-YJDNOVII.jsx
+import { template as _$template } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { usePaginationContext } from "@ark-ui/solid/pagination";
+import { For, Show, splitProps } from "solid-js";
+var _tmpl$ = /* @__PURE__ */_$template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */_$template(`<span>Page <!$><!/> of <!$><!/>`);
+var _tmpl$3 = /* @__PURE__ */_$template(`<span>No pages`);
+function PaginationItems(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  const api = usePaginationContext();
+  const styles = usePaginationStyles();
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _$spread(_el$, _$mergeProps(rest, {
+      get ["class"]() {
+        return styles().items({
+          class: local.class
+        });
+      }
+    }), false, true);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return api().totalPages > 0;
+      },
+      get fallback() {
+        return _$getNextElement(_tmpl$3);
+      },
+      get children() {
+        return [(() => {
+          var _el$2 = _$getNextElement(_tmpl$);
+          _$insert(_el$2, _$createComponent(For, {
+            get each() {
+              return api().pages;
+            },
+            children: (page, index) => page.type === "ellipsis" ? _$createComponent(PaginationEllipsis, {
+              get index() {
+                return index();
+              }
+            }) : _$createComponent(PaginationItem, {
+              type: "page",
+              get value() {
+                return page.value;
+              },
+              get children() {
+                return page.value;
+              }
+            })
+          }));
+          _$effect(() => _$className(_el$2, styles().pages()));
+          return _el$2;
+        })(), (() => {
+          var _el$3 = _$getNextElement(_tmpl$2),
+            _el$4 = _el$3.firstChild,
+            _el$6 = _el$4.nextSibling,
+            [_el$7, _co$] = _$getNextMarker(_el$6.nextSibling),
+            _el$5 = _el$7.nextSibling,
+            _el$8 = _el$5.nextSibling,
+            [_el$9, _co$2] = _$getNextMarker(_el$8.nextSibling);
+          _$insert(_el$3, () => api().page, _el$7, _co$);
+          _$insert(_el$3, () => api().totalPages, _el$9, _co$2);
+          _$effect(() => _$className(_el$3, styles().compactSummary()));
+          return _el$3;
+        })()];
+      }
+    }));
+    _$runHydrationEvents();
+    return _el$;
+  })();
+}
+export { PaginationItems };

package/dist/chunks/browser-WTHSUNMO.js

@@ -0,0 +1,51 @@
+// dist/chunks/solid-T26JN25X.jsx
+import { tv } from "tailwind-variants/lite";
+var heroRecipe = tv({
+  slots: {
+    root: "nui:text-foreground",
+    layout: "nui:grid nui:min-w-0 nui:items-center nui:gap-10 nui:lg:gap-16",
+    content: "nui:grid nui:min-w-0 nui:gap-6",
+    eyebrow: "nui:font-semibold nui:uppercase nui:tracking-widest",
+    title: "nui:max-w-[20ch]",
+    description: "nui:max-w-[55ch]",
+    actions: "nui:flex nui:flex-wrap nui:items-center nui:gap-3",
+    media: "nui:min-w-0 nui:overflow-hidden nui:rounded-xl nui:[&_img]:h-auto nui:[&_img]:w-full"
+  },
+  variants: {
+    tone: {
+      default: {
+        root: "nui:bg-background"
+      },
+      subtle: {
+        root: "nui:bg-surface"
+      },
+      accent: {
+        root: "nui:bg-[var(--nui-primary-2)]"
+      }
+    },
+    layout: {
+      stacked: {
+        layout: "nui:grid-cols-1"
+      },
+      split: {
+        layout: "nui:grid-cols-1 nui:md:grid-cols-2"
+      }
+    },
+    align: {
+      start: {
+        content: "nui:justify-items-start nui:text-start",
+        actions: "nui:justify-start"
+      },
+      center: {
+        content: "nui:justify-items-center nui:text-center",
+        actions: "nui:justify-center"
+      }
+    }
+  },
+  defaultVariants: {
+    tone: "default",
+    layout: "stacked",
+    align: "start"
+  }
+});
+export { heroRecipe };

package/dist/chunks/browser-WTNWTOU5.js

@@ -0,0 +1,111 @@
+import { progressCircleRecipe } from "./browser-P4BKMSFX.js";
+
+// dist/chunks/solid-6SZD52T6.jsx
+import { template as _$template } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { Progress as ArkProgress, useProgressContext } from "@ark-ui/solid/progress";
+import { mergeProps, Show, splitProps } from "solid-js";
+var _tmpl$ = /* @__PURE__ */_$template(`<div><!$><!/><!$><!/>`);
+function ProgressCircleContent(props) {
+  const api = useProgressContext();
+  const styles = () => progressCircleRecipe({
+    size: props.size
+  });
+  return [(() => {
+    var _el$ = _$getNextElement(_tmpl$),
+      _el$2 = _el$.firstChild,
+      [_el$3, _co$] = _$getNextMarker(_el$2.nextSibling),
+      _el$4 = _el$3.nextSibling,
+      [_el$5, _co$2] = _$getNextMarker(_el$4.nextSibling);
+    _$insert(_el$, _$createComponent(ArkProgress.Circle, {
+      get ["aria-labelledby"]() {
+        return props.labelledBy ?? api().getLabelProps().id;
+      },
+      get ["aria-valuetext"]() {
+        return api().valueAsString;
+      },
+      get ["class"]() {
+        return styles().circle();
+      },
+      get children() {
+        return [_$createComponent(ArkProgress.CircleTrack, {
+          get ["class"]() {
+            return styles().track();
+          }
+        }), _$createComponent(ArkProgress.CircleRange, {
+          get ["class"]() {
+            return styles().range();
+          }
+        })];
+      }
+    }), _el$3, _co$);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!props.showValue)() && !api().indeterminate;
+      },
+      get children() {
+        return _$createComponent(ArkProgress.ValueText, {
+          "aria-live": "off",
+          get ["class"]() {
+            return styles().value();
+          }
+        });
+      }
+    }), _el$5, _co$2);
+    _$effect(() => _$className(_el$, styles().visual()));
+    return _el$;
+  })(), _$createComponent(ArkProgress.Label, {
+    get ["class"]() {
+      return styles().label({
+        class: !props.label ? styles().hidden() : void 0
+      });
+    },
+    get children() {
+      return props.label || props.accessibleLabel || "Progress";
+    }
+  })];
+}
+function ProgressCircle(props) {
+  const [local, rest] = splitProps(mergeProps({
+    defaultValue: 0,
+    showValue: true
+  }, props), ["size", "tone", "class", "label", "showValue", "aria-label", "aria-labelledby"]);
+  return _$createComponent(ArkProgress.Root, _$mergeProps(rest, {
+    orientation: "horizontal",
+    get ["class"]() {
+      return progressCircleRecipe({
+        size: local.size,
+        tone: local.tone
+      }).root({
+        class: local.class
+      });
+    },
+    get children() {
+      return _$createComponent(ProgressCircleContent, {
+        get label() {
+          return local.label;
+        },
+        get showValue() {
+          return local.showValue;
+        },
+        get size() {
+          return local.size;
+        },
+        get accessibleLabel() {
+          return local["aria-label"];
+        },
+        get labelledBy() {
+          return local["aria-labelledby"];
+        }
+      });
+    }
+  }));
+}
+export { ProgressCircle };