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

package/dist/chunks/browser-MHG5MHHQ.js

@@ -0,0 +1,41 @@
+import { DialogContent, DialogSurface } from "./browser-DEJV4M5T.js";
+import { DialogCloseTrigger } from "./browser-4HFL7ANH.js";
+import { DialogBackdrop, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogPositioner, DialogTitle } from "./browser-CVMRSBKK.js";
+import { DialogOptions } from "./browser-FLENEAMA.js";
+import { OverlayPortal } from "./browser-FKHIAKUZ.js";
+
+// dist/chunks/solid-MY46IU4O.jsx
+import { createComponent as _$createComponent } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { Dialog as ArkDialog } from "@ark-ui/solid/dialog";
+import { mergeProps } from "solid-js";
+function DialogRoot(props) {
+  return _$createComponent(DialogOptions.Provider, {
+    value: () => ({
+      modal: props.modal ?? true
+    }),
+    get children() {
+      return _$createComponent(ArkDialog.Root, _$mergeProps(() => mergeProps({
+        lazyMount: true,
+        unmountOnExit: true
+      }, props)));
+    }
+  });
+}
+var Dialog = {
+  Root: DialogRoot,
+  Trigger: ArkDialog.Trigger,
+  Content: DialogContent,
+  Header: DialogHeader,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Body: DialogBody,
+  Footer: DialogFooter,
+  CloseTrigger: DialogCloseTrigger,
+  Portal: OverlayPortal,
+  Backdrop: DialogBackdrop,
+  Positioner: DialogPositioner,
+  Surface: DialogSurface,
+  Context: ArkDialog.Context
+};
+export { DialogRoot, Dialog };

package/dist/chunks/browser-MIZ6XF2H.js

@@ -0,0 +1,46 @@
+// dist/chunks/solid-7PP5CS7Y.jsx
+import { tv } from "tailwind-variants/lite";
+var timelineRecipe = tv({
+  slots: {
+    root: "nui-timeline nui:m-0 nui:w-full nui:min-w-0 nui:list-none nui:p-0 nui:text-foreground",
+    item: "nui:relative nui:min-w-0 nui:items-start nui:gap-x-3",
+    indicator: "nui:relative nui:col-start-1 nui:row-start-1 nui:z-1 nui:flex nui:size-6 nui:shrink-0 nui:items-center nui:justify-center nui:rounded-full nui:border nui:border-[var(--nui-timeline-marker-border)] nui:bg-[var(--nui-timeline-marker-bg)] nui:text-[var(--nui-timeline-marker-fg)] nui:[&>svg]:size-3.5",
+    dot: "nui:size-1.5 nui:rounded-full nui:bg-current",
+    content: "nui:col-start-2 nui:row-start-1 nui:grid nui:min-h-6 nui:min-w-0 nui:gap-y-[var(--nui-header-gap)] nui:wrap-anywhere",
+    time: "nui:text-xs nui:leading-relaxed nui:text-muted-foreground"
+  },
+  variants: {
+    density: {
+      comfortable: {
+        root: "nui:[--nui-timeline-gap:1.5rem]"
+      },
+      compact: {
+        root: "nui:[--nui-timeline-gap:1rem]"
+      }
+    },
+    orientation: {
+      vertical: {},
+      horizontal: {
+        root: "nui:overflow-x-auto nui:overscroll-x-contain nui:pb-2 nui:focus-visible:outline-[length:var(--nui-focus-width)] nui:focus-visible:outline-offset-[var(--nui-focus-offset)] nui:focus-visible:outline-focus-ring"
+      }
+    }
+  },
+  defaultVariants: {
+    density: "comfortable",
+    orientation: "vertical"
+  }
+});
+var timelineItemRecipe = tv({
+  variants: {
+    status: {
+      default: "nui:[--nui-timeline-marker-bg:var(--nui-surface)] nui:[--nui-timeline-marker-border:var(--nui-border)] nui:[--nui-timeline-marker-fg:var(--nui-muted-foreground)]",
+      complete: "nui:[--nui-timeline-marker-bg:var(--nui-success-soft)] nui:[--nui-timeline-marker-border:var(--nui-success-border)] nui:[--nui-timeline-marker-fg:var(--nui-success-text)]",
+      current: "nui:[--nui-timeline-marker-bg:var(--nui-primary-soft)] nui:[--nui-timeline-marker-border:var(--nui-primary-focus)] nui:[--nui-timeline-marker-fg:var(--nui-primary-text)]",
+      pending: "nui:[--nui-timeline-marker-bg:var(--nui-surface)] nui:[--nui-timeline-marker-border:var(--nui-border)] nui:[--nui-timeline-marker-fg:var(--nui-neutral-8)]"
+    }
+  },
+  defaultVariants: {
+    status: "default"
+  }
+});
+export { timelineRecipe, timelineItemRecipe };

package/dist/chunks/browser-MMGRME53.js

@@ -0,0 +1,66 @@
+import { counterAnchorRecipe, counterLabelClass, counterRecipe } from "./browser-IK5JKXQU.js";
+
+// dist/chunks/solid-3SS5BJPQ.jsx
+import { template as _$template } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { insert as _$insert } 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 { Show, splitProps } from "solid-js";
+var _tmpl$ = /* @__PURE__ */_$template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */_$template(`<span><span aria-hidden=true></span><span>`);
+function CounterAnchor(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _$spread(_el$, _$mergeProps(rest, {
+      get ["class"]() {
+        return counterAnchorRecipe({
+          class: local.class
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$;
+  })();
+}
+function nonNegativeInteger(value, fallback) {
+  return Number.isFinite(value) ? Math.max(0, Math.floor(value)) : fallback;
+}
+function Counter(props) {
+  const [local, rest] = splitProps(props, ["value", "max", "showZero", "label", "variant", "tone", "size", "placement", "class"]);
+  const count = () => nonNegativeInteger(local.value, 0);
+  const limit = () => nonNegativeInteger(local.max ?? 99, 99);
+  const display = () => count() > limit() ? `${limit()}+` : String(count());
+  return _$createComponent(Show, {
+    get when() {
+      return count() > 0 || local.showZero;
+    },
+    get children() {
+      var _el$2 = _$getNextElement(_tmpl$2),
+        _el$3 = _el$2.firstChild,
+        _el$4 = _el$3.nextSibling;
+      _$spread(_el$2, _$mergeProps(rest, {
+        get ["class"]() {
+          return counterRecipe({
+            variant: local.variant,
+            tone: local.tone,
+            size: local.size,
+            placement: local.placement,
+            class: local.class
+          });
+        }
+      }), false, true);
+      _$insert(_el$3, display);
+      _$className(_el$4, counterLabelClass);
+      _$insert(_el$4, () => local.label ?? String(count()));
+      _$runHydrationEvents();
+      return _el$2;
+    }
+  });
+}
+export { CounterAnchor, Counter };

package/dist/chunks/browser-MNIHBYER.js

@@ -0,0 +1,22 @@
+// dist/chunks/solid-ERS5BSG5.jsx
+import { createComponent as _$createComponent } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { Menu as ArkMenu } from "@ark-ui/solid/menu";
+import { mergeProps, splitProps } from "solid-js";
+function MenuRoot(props) {
+  const [local, rest] = splitProps(props, ["positioning"]);
+  return _$createComponent(ArkMenu.Root, _$mergeProps(() => mergeProps({
+    lazyMount: true
+  }, rest), {
+    get positioning() {
+      return mergeProps({
+        placement: "bottom-start",
+        strategy: "fixed",
+        gutter: 4,
+        overflowPadding: 16,
+        overlap: true
+      }, local.positioning ?? {});
+    }
+  }));
+}
+export { MenuRoot };

package/dist/chunks/browser-MU6R72WX.js

@@ -0,0 +1,111 @@
+import { sidebarRecipe } from "./browser-77AU5EFP.js";
+import { Resizable } from "./browser-PZRZPQK4.js";
+
+// dist/chunks/solid-6IEZVOLF.jsx
+import { template as _$template } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { insert as _$insert } 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(`<div>`);
+var _tmpl$2 = /* @__PURE__ */_$template(`<span>`);
+var _tmpl$3 = /* @__PURE__ */_$template(`<main>`);
+var styles = sidebarRecipe();
+function SidebarHeader(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 SidebarBody(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (() => {
+    var _el$2 = _$getNextElement(_tmpl$);
+    _$spread(_el$2, _$mergeProps(rest, {
+      get ["class"]() {
+        return styles.body({
+          class: local.class
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$2;
+  })();
+}
+function SidebarFooter(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (() => {
+    var _el$3 = _$getNextElement(_tmpl$);
+    _$spread(_el$3, _$mergeProps(rest, {
+      get ["class"]() {
+        return styles.footer({
+          class: local.class
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$3;
+  })();
+}
+function SidebarLabel(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (() => {
+    var _el$4 = _$getNextElement(_tmpl$2);
+    _$spread(_el$4, _$mergeProps(rest, {
+      get ["class"]() {
+        return styles.label({
+          class: local.class
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$4;
+  })();
+}
+function SidebarExpanded(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (() => {
+    var _el$5 = _$getNextElement(_tmpl$);
+    _$spread(_el$5, _$mergeProps(rest, {
+      get ["class"]() {
+        return styles.expanded({
+          class: local.class
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$5;
+  })();
+}
+function SidebarMain(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return _$createComponent(Resizable.Panel, {
+    id: "main",
+    get children() {
+      var _el$6 = _$getNextElement(_tmpl$3);
+      _$spread(_el$6, _$mergeProps(rest, {
+        get ["class"]() {
+          return styles.main({
+            class: local.class
+          });
+        }
+      }), false, true);
+      _$insert(_el$6, () => local.children);
+      _$runHydrationEvents();
+      return _el$6;
+    }
+  });
+}
+export { SidebarHeader, SidebarBody, SidebarFooter, SidebarLabel, SidebarExpanded, SidebarMain };

package/dist/chunks/browser-N2VP3WKO.js

@@ -0,0 +1,36 @@
+import { PopoverArrow, PopoverPositioner, PopoverSurface } from "./browser-NOGBB3OJ.js";
+import { OverlayPortal } from "./browser-FKHIAKUZ.js";
+
+// dist/chunks/solid-Y4QTMFIB.jsx
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { mergeProps, Show, splitProps } from "solid-js";
+function PopoverContent(props) {
+  const [local, rest] = splitProps(mergeProps({
+    showArrow: true
+  }, props), ["mount", "showArrow", "children"]);
+  return _$createComponent(OverlayPortal, _$mergeProps(() => local.mount ? {
+    mount: local.mount
+  } : {}, {
+    get children() {
+      return _$createComponent(PopoverPositioner, {
+        get children() {
+          return _$createComponent(PopoverSurface, _$mergeProps(rest, {
+            get children() {
+              return [_$createComponent(Show, {
+                get when() {
+                  return local.showArrow;
+                },
+                get children() {
+                  return _$createComponent(PopoverArrow, {});
+                }
+              }), _$memo(() => local.children)];
+            }
+          }));
+        }
+      });
+    }
+  }));
+}
+export { PopoverContent };

package/dist/chunks/browser-NBDJXNJ3.js

@@ -0,0 +1,42 @@
+import { AlertDialogActionTrigger, AlertDialogCancelTrigger } from "./browser-JJFYDCN6.js";
+import { Dialog } from "./browser-MHG5MHHQ.js";
+
+// dist/chunks/solid-BB7SMGH7.jsx
+import { createComponent as _$createComponent } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { Dialog as ArkDialog } from "@ark-ui/solid/dialog";
+import { mergeProps, splitProps } from "solid-js";
+function AlertDialogRoot(props) {
+  return _$createComponent(Dialog.Root, _$mergeProps(props, {
+    role: "alertdialog",
+    modal: true,
+    trapFocus: true,
+    preventScroll: true,
+    closeOnInteractOutside: false
+  }));
+}
+function AlertDialogContent(props) {
+  const [local, rest] = splitProps(mergeProps({
+    size: "sm"
+  }, props), ["size"]);
+  return _$createComponent(Dialog.Content, _$mergeProps(rest, {
+    get size() {
+      return local.size;
+    },
+    variant: "card"
+  }));
+}
+var AlertDialog = {
+  Root: AlertDialogRoot,
+  Trigger: ArkDialog.Trigger,
+  Content: AlertDialogContent,
+  Header: Dialog.Header,
+  Title: Dialog.Title,
+  Description: Dialog.Description,
+  Body: Dialog.Body,
+  Footer: Dialog.Footer,
+  CancelTrigger: AlertDialogCancelTrigger,
+  ActionTrigger: AlertDialogActionTrigger,
+  Context: ArkDialog.Context
+};
+export { AlertDialogRoot, AlertDialogContent, AlertDialog };

package/dist/chunks/browser-NDVSSK43.js

@@ -0,0 +1,23 @@
+// dist/chunks/solid-ZZAXEXNQ.jsx
+import { tv } from "tailwind-variants/lite";
+var accordionRecipe = tv({
+  slots: {
+    root: "nui:w-full nui:min-w-0 nui:overflow-hidden nui:rounded-xl nui:border nui:border-border",
+    item: "nui:min-w-0 nui:border-b nui:border-border nui:last:border-b-0",
+    heading: "nui:m-0"
+  },
+  variants: {
+    variant: {
+      outline: {
+        root: "nui:bg-background"
+      },
+      soft: {
+        root: "nui:bg-surface"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outline"
+  }
+});
+export { accordionRecipe };

package/dist/chunks/browser-NOGBB3OJ.js

@@ -0,0 +1,111 @@
+import { popoverRecipe } from "./browser-YUPLA3SY.js";
+
+// dist/chunks/solid-NYBAG3U4.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 { spread as _$spread } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { Popover as ArkPopover } from "@ark-ui/solid/popover";
+import { splitProps } from "solid-js";
+var _tmpl$ = /* @__PURE__ */_$template(`<div>`);
+var styles = popoverRecipe();
+function PopoverSurface(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return _$createComponent(ArkPopover.Content, _$mergeProps(rest, {
+    get ["class"]() {
+      return styles.content({
+        class: local.class
+      });
+    }
+  }));
+}
+function PopoverPositioner(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return _$createComponent(ArkPopover.Positioner, _$mergeProps(rest, {
+    get ["class"]() {
+      return styles.positioner({
+        class: local.class
+      });
+    }
+  }));
+}
+function PopoverArrow(props) {
+  const [local, rest] = splitProps(props, ["children"]);
+  return _$createComponent(ArkPopover.Arrow, _$mergeProps(rest, {
+    get children() {
+      return local.children ?? _$createComponent(ArkPopover.ArrowTip, {});
+    }
+  }));
+}
+function PopoverHeader(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _$spread(_el$, _$mergeProps(rest, {
+      "data-nui-popover-header": "",
+      get ["class"]() {
+        return styles.header({
+          class: local.class
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$;
+  })();
+}
+function PopoverTitle(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return _$createComponent(ArkPopover.Title, _$mergeProps(rest, {
+    get ["class"]() {
+      return styles.title({
+        class: local.class
+      });
+    }
+  }));
+}
+function PopoverDescription(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return _$createComponent(ArkPopover.Description, _$mergeProps(rest, {
+    get ["class"]() {
+      return styles.description({
+        class: local.class
+      });
+    }
+  }));
+}
+function PopoverBody(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (() => {
+    var _el$2 = _$getNextElement(_tmpl$);
+    _$spread(_el$2, _$mergeProps(rest, {
+      "data-nui-popover-body": "",
+      get ["class"]() {
+        return styles.body({
+          class: local.class
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$2;
+  })();
+}
+function PopoverFooter(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (() => {
+    var _el$3 = _$getNextElement(_tmpl$);
+    _$spread(_el$3, _$mergeProps(rest, {
+      "data-nui-popover-footer": "",
+      get ["class"]() {
+        return styles.footer({
+          class: local.class
+        });
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$3;
+  })();
+}
+export { PopoverSurface, PopoverPositioner, PopoverArrow, PopoverHeader, PopoverTitle, PopoverDescription, PopoverBody, PopoverFooter };

package/dist/chunks/browser-OIVPB5XZ.js

@@ -0,0 +1,36 @@
+// dist/chunks/solid-MIHOQZ45.jsx
+import { tv } from "tailwind-variants/lite";
+var mediaObjectRecipe = tv({
+  slots: {
+    root: "nui:grid nui:min-w-0 nui:grid-cols-[auto_minmax(0,1fr)] nui:gap-x-4 nui:gap-y-3 nui:md:grid-cols-[auto_minmax(0,1fr)_auto]",
+    media: "nui:row-span-2 nui:w-[var(--nui-media-size)] nui:shrink-0 nui:overflow-hidden nui:rounded-md nui:md:row-span-1 nui:[&_img]:h-auto nui:[&_img]:w-full",
+    content: "nui:grid nui:min-w-0 nui:content-start nui:gap-2 nui:wrap-anywhere",
+    actions: "nui:col-start-2 nui:flex nui:min-w-0 nui:flex-wrap nui:gap-2 nui:md:col-start-3"
+  },
+  variants: {
+    size: {
+      sm: {
+        root: "nui:[--nui-media-size:2.5rem]"
+      },
+      md: {
+        root: "nui:[--nui-media-size:4rem]"
+      },
+      lg: {
+        root: "nui:[--nui-media-size:6rem]"
+      }
+    },
+    align: {
+      start: {
+        root: "nui:items-start"
+      },
+      center: {
+        root: "nui:items-center"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    align: "start"
+  }
+});
+export { mediaObjectRecipe };

package/dist/chunks/browser-OLKVLHTF.js

@@ -0,0 +1,133 @@
+import { Empty } from "./browser-EJK3XQAG.js";
+
+// dist/chunks/solid-WBB57U7D.jsx
+import { template as _$template } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { createMemo, createUniqueId, For, Show, splitProps } from "solid-js";
+var _tmpl$ = /* @__PURE__ */_$template(`<p class=nui-data-description>`);
+var _tmpl$2 = /* @__PURE__ */_$template(`<ul class=nui-bar-list-items>`);
+var _tmpl$3 = /* @__PURE__ */_$template(`<figure><figcaption class=nui-data-label></figcaption><!$><!/><!$><!/>`);
+var _tmpl$4 = /* @__PURE__ */_$template(`<li class=nui-bar-list-item><span class=nui-bar-list-label></span><span class=nui-bar-list-value></span><div class=nui-bar-list-track aria-hidden=true><span class=nui-bar-list-fill>`);
+var number = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 2
+});
+function BarList(props) {
+  const [local, rest] = splitProps(props, ["title", "description", "data", "label", "value", "valueFormat", "tone", "maxValue", "emptyMessage", "class"]);
+  const captionId = createUniqueId();
+  const rows = createMemo(() => local.data.map(datum => ({
+    datum,
+    value: local.value(datum)
+  })).filter(row => Number.isFinite(row.value) && row.value >= 0));
+  const maximum = createMemo(() => rows().reduce((max, row) => Math.max(max, row.value), Number.isFinite(local.maxValue) && (local.maxValue ?? 0) > 0 ? local.maxValue ?? 0 : 0));
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$3),
+      _el$2 = _el$.firstChild,
+      _el$5 = _el$2.nextSibling,
+      [_el$6, _co$] = _$getNextMarker(_el$5.nextSibling),
+      _el$7 = _el$6.nextSibling,
+      [_el$8, _co$2] = _$getNextMarker(_el$7.nextSibling);
+    _$spread(_el$, _$mergeProps(rest, {
+      "aria-labelledby": captionId,
+      get ["class"]() {
+        return barListClass(local.class);
+      }
+    }), false, true);
+    _$setAttribute(_el$2, "id", captionId);
+    _$insert(_el$2, () => local.title);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return local.description;
+      },
+      get children() {
+        var _el$3 = _$getNextElement(_tmpl$);
+        _$insert(_el$3, () => local.description);
+        return _el$3;
+      }
+    }), _el$6, _co$);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return rows().length > 0;
+      },
+      get fallback() {
+        return _$createComponent(BarListEmpty, {
+          get message() {
+            return local.emptyMessage;
+          }
+        });
+      },
+      get children() {
+        var _el$4 = _$getNextElement(_tmpl$2);
+        _$insert(_el$4, _$createComponent(For, {
+          get each() {
+            return rows();
+          },
+          children: row => _$createComponent(BarListRow, {
+            get label() {
+              return local.label(row.datum);
+            },
+            get value() {
+              return (local.valueFormat ?? number.format)(row.value);
+            },
+            get width() {
+              return row.value / (maximum() || 1) * 100;
+            },
+            get tone() {
+              return _$memo(() => typeof local.tone === "function")() ? local.tone(row.datum) : local.tone ?? "primary";
+            }
+          })
+        }));
+        return _el$4;
+      }
+    }), _el$8, _co$2);
+    _$runHydrationEvents();
+    return _el$;
+  })();
+}
+function BarListRow(props) {
+  return (() => {
+    var _el$9 = _$getNextElement(_tmpl$4),
+      _el$0 = _el$9.firstChild,
+      _el$1 = _el$0.nextSibling,
+      _el$10 = _el$1.nextSibling,
+      _el$11 = _el$10.firstChild;
+    _$insert(_el$0, () => props.label);
+    _$insert(_el$1, () => props.value);
+    _$effect(_p$ => {
+      var _v$ = props.tone,
+        _v$2 = `${props.width}%`;
+      _v$ !== _p$.e && _$setAttribute(_el$11, "data-tone", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setStyleProperty(_el$11, "width", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$9;
+  })();
+}
+function BarListEmpty(props) {
+  return _$createComponent(Empty.Root, {
+    layout: "compact",
+    get children() {
+      return _$createComponent(Empty.Title, {
+        get children() {
+          return props.message ?? "No data available";
+        }
+      });
+    }
+  });
+}
+function barListClass(className) {
+  return ["nui-bar-list", className].filter(Boolean).join(" ");
+}
+export { BarList };