@ansh-ui/react 0.2.0

package/dist/chunk-HPGCILO4.js

@@ -0,0 +1,760 @@
+import { useControllableState } from './chunk-LXCIXR5T.js';
+import { cx } from './chunk-H34OXXJU.js';
+import { useMemo, useCallback, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { toHex, parseColor, pickReadable } from '@ansh-ui/core';
+
+function compare(a, b) {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+}
+function DataTable({
+  data,
+  columns,
+  getRowId,
+  caption,
+  selectable = false,
+  selected,
+  onSelectedChange,
+  sort,
+  defaultSort = null,
+  onSortChange,
+  pageSize,
+  page,
+  onPageChange,
+  loading = false,
+  emptyState,
+  onRowClick,
+  stickyHeader = false,
+  density = "comfortable",
+  striped = false,
+  className,
+  rowClassName
+}) {
+  const [sortState, setSortState] = useControllableState({
+    value: sort,
+    defaultValue: defaultSort,
+    onChange: onSortChange
+  });
+  const [selection, setSelection] = useControllableState({
+    value: selected,
+    defaultValue: [],
+    onChange: onSelectedChange
+  });
+  const [currentPage, setCurrentPage] = useControllableState({
+    value: page,
+    defaultValue: 0,
+    onChange: onPageChange
+  });
+  const sorted = useMemo(() => {
+    if (!sortState) return data;
+    const column = columns.find((c) => c.id === sortState.columnId);
+    if (!column?.sortValue) return data;
+    const rows = [...data];
+    rows.sort((a, b) => {
+      const result = compare(column.sortValue(a), column.sortValue(b));
+      return sortState.direction === "asc" ? result : -result;
+    });
+    return rows;
+  }, [data, columns, sortState]);
+  const pageCount = pageSize ? Math.max(1, Math.ceil(sorted.length / pageSize)) : 1;
+  const safePage = Math.min(currentPage, pageCount - 1);
+  const visible = pageSize ? sorted.slice(safePage * pageSize, safePage * pageSize + pageSize) : sorted;
+  const visibleIds = useMemo(() => visible.map(getRowId), [visible, getRowId]);
+  const selectedSet = useMemo(() => new Set(selection), [selection]);
+  const allVisibleSelected = visibleIds.length > 0 && visibleIds.every((rowId) => selectedSet.has(rowId));
+  const someVisibleSelected = visibleIds.some((rowId) => selectedSet.has(rowId));
+  const toggleAll = useCallback(() => {
+    if (allVisibleSelected) {
+      setSelection(selection.filter((rowId) => !visibleIds.includes(rowId)));
+    } else {
+      setSelection([.../* @__PURE__ */ new Set([...selection, ...visibleIds])]);
+    }
+  }, [allVisibleSelected, selection, visibleIds, setSelection]);
+  const toggleRow = useCallback(
+    (rowId) => {
+      setSelection(
+        selectedSet.has(rowId) ? selection.filter((v) => v !== rowId) : [...selection, rowId]
+      );
+    },
+    [selection, selectedSet, setSelection]
+  );
+  const onSort = (column) => {
+    if (!column.sortable) return;
+    if (sortState?.columnId !== column.id) {
+      setSortState({ columnId: column.id, direction: "asc" });
+    } else if (sortState.direction === "asc") {
+      setSortState({ columnId: column.id, direction: "desc" });
+    } else {
+      setSortState(null);
+    }
+  };
+  const columnCount = columns.length + (selectable ? 1 : 0);
+  return /* @__PURE__ */ jsxs("div", { className: cx("ansh-table-wrap", stickyHeader && "ansh-table-wrap--sticky", className), children: [
+    /* @__PURE__ */ jsxs(
+      "table",
+      {
+        className: cx("ansh-table", `ansh-table--${density}`, striped && "ansh-table--striped"),
+        children: [
+          /* @__PURE__ */ jsxs("caption", { className: "ansh-visually-hidden", children: [
+            caption,
+            sortState ? `, sorted by ${columns.find((c) => c.id === sortState.columnId)?.id} ${sortState.direction === "asc" ? "ascending" : "descending"}` : ""
+          ] }),
+          /* @__PURE__ */ jsx("thead", { className: "ansh-table__head", children: /* @__PURE__ */ jsxs("tr", { children: [
+            selectable ? /* @__PURE__ */ jsx("th", { scope: "col", className: "ansh-table__cell ansh-table__cell--check", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                className: "ansh-table__checkbox",
+                checked: allVisibleSelected,
+                ref: (node) => {
+                  if (node) node.indeterminate = !allVisibleSelected && someVisibleSelected;
+                },
+                "aria-label": allVisibleSelected ? "Deselect all rows" : "Select all rows",
+                onChange: toggleAll
+              }
+            ) }) : null,
+            columns.map((column) => {
+              const isSorted = sortState?.columnId === column.id;
+              return /* @__PURE__ */ jsx(
+                "th",
+                {
+                  scope: "col",
+                  className: cx(
+                    "ansh-table__cell",
+                    "ansh-table__cell--head",
+                    column.align && `ansh-table__cell--${column.align}`,
+                    column.hideBelow && `ansh-hide-below-${column.hideBelow}`
+                  ),
+                  style: column.width ? { width: column.width } : void 0,
+                  "aria-sort": isSorted ? sortState.direction === "asc" ? "ascending" : "descending" : void 0,
+                  children: column.sortable ? /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ansh-table__sort ansh-focusable",
+                      onClick: () => onSort(column),
+                      "aria-label": column.ariaLabel ? `Sort by ${column.ariaLabel}` : typeof column.header === "string" ? `Sort by ${column.header}` : "Sort column",
+                      children: [
+                        /* @__PURE__ */ jsx("span", { children: column.header }),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cx("ansh-table__arrow", isSorted && "ansh-table__arrow--on"),
+                            "aria-hidden": "true",
+                            "data-direction": isSorted ? sortState.direction : "none",
+                            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10 12", width: "10", height: "12", children: /* @__PURE__ */ jsx(
+                              "path",
+                              {
+                                d: "M5 1v10M2 4l3-3 3 3M2 8l3 3 3-3",
+                                stroke: "currentColor",
+                                strokeWidth: "1.4",
+                                fill: "none",
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round"
+                              }
+                            ) })
+                          }
+                        )
+                      ]
+                    }
+                  ) : column.header
+                },
+                column.id
+              );
+            })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: loading ? Array.from({ length: pageSize ?? 5 }, (_, rowIndex) => /* @__PURE__ */ jsx("tr", { className: "ansh-table__row", children: Array.from({ length: columnCount }, (_2, cellIndex) => /* @__PURE__ */ jsx("td", { className: "ansh-table__cell", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ansh-skeleton",
+              style: { width: `${50 + cellIndex * 37 % 40}%`, height: "1em" }
+            }
+          ) }, cellIndex)) }, `skeleton-${rowIndex}`)) : visible.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columnCount, className: "ansh-table__empty", children: emptyState ?? "No results" }) }) : visible.map((row, index) => {
+            const rowId = getRowId(row);
+            const isSelected = selectedSet.has(rowId);
+            return /* @__PURE__ */ jsxs(
+              "tr",
+              {
+                className: cx(
+                  "ansh-table__row",
+                  isSelected && "ansh-table__row--selected",
+                  onRowClick && "ansh-table__row--clickable",
+                  rowClassName?.(row)
+                ),
+                "aria-selected": selectable ? isSelected : void 0,
+                ...onRowClick ? {
+                  onClick: (event) => {
+                    const target = event.target;
+                    if (target.closest("button, a, input, select, textarea")) return;
+                    onRowClick(row);
+                  }
+                } : null,
+                children: [
+                  selectable ? /* @__PURE__ */ jsx("td", { className: "ansh-table__cell ansh-table__cell--check", children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      className: "ansh-table__checkbox",
+                      checked: isSelected,
+                      "aria-label": `Select row ${index + 1}`,
+                      onChange: () => toggleRow(rowId)
+                    }
+                  ) }) : null,
+                  columns.map((column) => /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      className: cx(
+                        "ansh-table__cell",
+                        column.align && `ansh-table__cell--${column.align}`,
+                        column.hideBelow && `ansh-hide-below-${column.hideBelow}`
+                      ),
+                      children: column.cell(row, index)
+                    },
+                    column.id
+                  ))
+                ]
+              },
+              rowId
+            );
+          }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "ansh-visually-hidden", role: "status", "aria-live": "polite", children: selectable && selection.length > 0 ? `${selection.length} selected` : "" }),
+    pageSize && pageCount > 1 ? /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        page: safePage,
+        pageCount,
+        onPageChange: setCurrentPage,
+        total: sorted.length,
+        pageSize
+      }
+    ) : null
+  ] });
+}
+function Pagination({
+  page,
+  pageCount,
+  onPageChange,
+  total,
+  pageSize,
+  siblings = 1,
+  className
+}) {
+  const pages = useMemo(() => {
+    const result = [];
+    const first = 0;
+    const last = pageCount - 1;
+    for (let index = first; index <= last; index++) {
+      const nearCurrent = Math.abs(index - page) <= siblings;
+      const isEdge = index === first || index === last;
+      if (nearCurrent || isEdge) {
+        result.push(index);
+      } else if (result[result.length - 1] !== "gap") {
+        result.push("gap");
+      }
+    }
+    return result;
+  }, [page, pageCount, siblings]);
+  const from = pageSize ? page * pageSize + 1 : null;
+  const to = pageSize && total ? Math.min((page + 1) * pageSize, total) : null;
+  return /* @__PURE__ */ jsxs("nav", { className: cx("ansh-pagination", className), "aria-label": "Pagination", children: [
+    from !== null && to !== null ? /* @__PURE__ */ jsxs("p", { className: "ansh-pagination__summary", children: [
+      from,
+      "\u2013",
+      to,
+      " of ",
+      total
+    ] }) : null,
+    /* @__PURE__ */ jsxs("ol", { className: "ansh-pagination__list", children: [
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ansh-pagination__button ansh-focusable",
+          disabled: page === 0,
+          "aria-label": "Previous page",
+          onClick: () => onPageChange(page - 1),
+          children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: "12", height: "12", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M7.5 2.5L4 6l3.5 3.5",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              fill: "none",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) })
+        }
+      ) }),
+      pages.map(
+        (entry, index) => entry === "gap" ? /* @__PURE__ */ jsx("li", { "aria-hidden": "true", className: "ansh-pagination__gap", children: "\u2026" }, `gap-${index}`) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx(
+              "ansh-pagination__button",
+              entry === page && "ansh-pagination__button--current",
+              "ansh-focusable"
+            ),
+            "aria-current": entry === page ? "page" : void 0,
+            "aria-label": `Page ${entry + 1}`,
+            onClick: () => onPageChange(entry),
+            children: entry + 1
+          }
+        ) }, entry)
+      ),
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ansh-pagination__button ansh-focusable",
+          disabled: page >= pageCount - 1,
+          "aria-label": "Next page",
+          onClick: () => onPageChange(page + 1),
+          children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: "12", height: "12", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M4.5 2.5L8 6l-3.5 3.5",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              fill: "none",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) })
+        }
+      ) })
+    ] })
+  ] });
+}
+function Table({
+  caption,
+  density = "comfortable",
+  striped = false,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cx("ansh-table-wrap", className), children: /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: cx("ansh-table", `ansh-table--${density}`, striped && "ansh-table--striped"),
+      children: [
+        caption ? /* @__PURE__ */ jsx("caption", { className: "ansh-visually-hidden", children: caption }) : null,
+        children
+      ]
+    }
+  ) });
+}
+function Badge({
+  tone = "neutral",
+  variant = "soft",
+  size = "md",
+  dot = false,
+  icon,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cx(
+        "ansh-badge",
+        `ansh-badge--${tone}`,
+        `ansh-badge--${variant}`,
+        `ansh-badge--${size}`,
+        className
+      ),
+      ...rest,
+      children: [
+        dot ? /* @__PURE__ */ jsx("span", { className: "ansh-badge__dot", "aria-hidden": "true" }) : null,
+        icon ? /* @__PURE__ */ jsx("span", { className: "ansh-badge__icon", children: icon }) : null,
+        children
+      ]
+    }
+  );
+}
+function initials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+  return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+}
+function hash(text) {
+  let value = 0;
+  for (let i = 0; i < text.length; i++) {
+    value = value * 31 + text.charCodeAt(i) | 0;
+  }
+  return Math.abs(value);
+}
+function Avatar({
+  src,
+  name,
+  size = "md",
+  shape = "circle",
+  status,
+  className,
+  ...rest
+}) {
+  const [failed, setFailed] = useState(false);
+  const { background, foreground } = useMemo(() => {
+    const hue = hash(name) % 360;
+    const backgroundHex = toHex(parseColor(`oklch(72% 0.13 ${hue})`));
+    return {
+      background: backgroundHex,
+      foreground: toHex(pickReadable(backgroundHex, "#ffffff", "#101828"))
+    };
+  }, [name]);
+  const showImage = src && !failed;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cx("ansh-avatar", `ansh-avatar--${size}`, `ansh-avatar--${shape}`, className),
+      ...rest,
+      children: [
+        showImage ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: name,
+            className: "ansh-avatar__image",
+            onError: () => setFailed(true)
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "ansh-avatar__fallback",
+            style: { background, color: foreground },
+            "aria-hidden": "true",
+            children: initials(name)
+          }
+        ),
+        !showImage ? /* @__PURE__ */ jsx("span", { className: "ansh-visually-hidden", children: name }) : null,
+        status ? /* @__PURE__ */ jsx("span", { className: cx("ansh-avatar__status", `ansh-avatar__status--${status}`), children: /* @__PURE__ */ jsx("span", { className: "ansh-visually-hidden", children: status }) }) : null
+      ]
+    }
+  );
+}
+function AvatarGroup({ max = 4, size, className, children }) {
+  const items = Array.isArray(children) ? children : [children];
+  const shown = items.slice(0, max);
+  const overflow = items.length - shown.length;
+  return /* @__PURE__ */ jsxs("span", { className: cx("ansh-avatar-group", size && `ansh-avatar-group--${size}`, className), children: [
+    shown,
+    overflow > 0 ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cx(
+          "ansh-avatar",
+          size && `ansh-avatar--${size}`,
+          "ansh-avatar--circle",
+          "ansh-avatar--more"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "ansh-avatar__fallback", "aria-hidden": "true", children: [
+            "+",
+            overflow
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "ansh-visually-hidden", children: [
+            "and ",
+            overflow,
+            " more"
+          ] })
+        ]
+      }
+    ) : null
+  ] });
+}
+function Kbd({ children, className }) {
+  const keys = children.split("+").map((key) => key.trim());
+  return /* @__PURE__ */ jsx("span", { className: cx("ansh-kbd-group", className), children: keys.map((key, index) => /* @__PURE__ */ jsxs("span", { children: [
+    index > 0 ? /* @__PURE__ */ jsx("span", { className: "ansh-kbd__plus", "aria-hidden": "true", children: "+" }) : null,
+    /* @__PURE__ */ jsx("kbd", { className: "ansh-kbd", children: key })
+  ] }, `${key}-${index}`)) });
+}
+function Stat({
+  label,
+  value,
+  delta,
+  deltaLabel,
+  invertDelta = false,
+  hint,
+  icon,
+  className
+}) {
+  const positive = delta !== void 0 && delta > 0;
+  const negative = delta !== void 0 && delta < 0;
+  const good = invertDelta ? negative : positive;
+  return /* @__PURE__ */ jsxs("div", { className: cx("ansh-stat", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "ansh-stat__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "ansh-stat__label", children: label }),
+      icon ? /* @__PURE__ */ jsx("span", { className: "ansh-stat__icon", children: icon }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ansh-stat__value", children: value }),
+    delta !== void 0 ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(
+          "ansh-stat__delta",
+          delta !== 0 && (good ? "ansh-stat__delta--good" : "ansh-stat__delta--bad")
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "ansh-stat__arrow", "aria-hidden": "true", children: positive ? "\u2191" : negative ? "\u2193" : "\u2192" }),
+          /* @__PURE__ */ jsx("span", { children: deltaLabel ?? `${delta > 0 ? "+" : ""}${delta}%` }),
+          hint ? /* @__PURE__ */ jsx("span", { className: "ansh-stat__hint", children: hint }) : null
+        ]
+      }
+    ) : hint ? /* @__PURE__ */ jsx("div", { className: "ansh-stat__hint", children: hint }) : null
+  ] });
+}
+function EmptyState({
+  title,
+  description,
+  icon,
+  action,
+  size = "md",
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("ansh-empty", `ansh-empty--${size}`, className), children: [
+    icon ? /* @__PURE__ */ jsx("span", { className: "ansh-empty__icon", "aria-hidden": "true", children: icon }) : null,
+    /* @__PURE__ */ jsx("p", { className: "ansh-empty__title", children: title }),
+    description ? /* @__PURE__ */ jsx("p", { className: "ansh-empty__description", children: description }) : null,
+    action ? /* @__PURE__ */ jsx("div", { className: "ansh-empty__action", children: action }) : null
+  ] });
+}
+function DescriptionList({
+  items,
+  orientation = "horizontal",
+  className
+}) {
+  return /* @__PURE__ */ jsx("dl", { className: cx("ansh-dl", `ansh-dl--${orientation}`, className), children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "ansh-dl__row", children: [
+    /* @__PURE__ */ jsx("dt", { className: "ansh-dl__term", children: item.term }),
+    /* @__PURE__ */ jsx("dd", { className: "ansh-dl__description", children: item.description })
+  ] }, index)) });
+}
+function Timeline({
+  items,
+  className
+}) {
+  return /* @__PURE__ */ jsx("ol", { className: cx("ansh-timeline", className), children: items.map((item) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cx("ansh-timeline__item", item.tone && `ansh-timeline__item--${item.tone}`),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ansh-timeline__marker", "aria-hidden": "true", children: item.icon }),
+        /* @__PURE__ */ jsxs("div", { className: "ansh-timeline__body", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ansh-timeline__head", children: [
+            /* @__PURE__ */ jsx("span", { className: "ansh-timeline__title", children: item.title }),
+            item.timestamp ? /* @__PURE__ */ jsx("span", { className: "ansh-timeline__time", children: item.timestamp }) : null
+          ] }),
+          item.description ? /* @__PURE__ */ jsx("p", { className: "ansh-timeline__description", children: item.description }) : null
+        ] })
+      ]
+    },
+    item.id
+  )) });
+}
+function CodeBlock({
+  code,
+  language = "tsx",
+  copyable = true,
+  lineNumbers = false,
+  filename,
+  className
+}) {
+  const [copied, setCopied] = useState(false);
+  const lines = useMemo(() => code.split("\n"), [code]);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1600);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("ansh-code", className), children: [
+    filename || copyable ? /* @__PURE__ */ jsxs("div", { className: "ansh-code__bar", children: [
+      /* @__PURE__ */ jsx("span", { className: "ansh-code__filename", children: filename ?? language }),
+      copyable ? /* @__PURE__ */ jsxs("button", { type: "button", className: "ansh-code__copy ansh-focusable", onClick: copy, children: [
+        copied ? "Copied" : "Copy",
+        /* @__PURE__ */ jsx("span", { className: "ansh-visually-hidden", children: " code to clipboard" })
+      ] }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx("pre", { className: cx("ansh-code__pre", lineNumbers && "ansh-code__pre--numbered"), children: /* @__PURE__ */ jsx("code", { className: `language-${language}`, children: lineNumbers ? lines.map((line, index) => /* @__PURE__ */ jsxs("span", { className: "ansh-code__line", children: [
+      /* @__PURE__ */ jsx("span", { className: "ansh-code__lineno", "aria-hidden": "true", children: index + 1 }),
+      line,
+      "\n"
+    ] }, index)) : code }) })
+  ] });
+}
+function Progress({
+  value,
+  max = 100,
+  size = "md",
+  tone = "accent",
+  label,
+  showLabel = false,
+  formatValue,
+  className
+}) {
+  const indeterminate = value === void 0;
+  const clamped = indeterminate ? 0 : Math.min(Math.max(value, 0), max);
+  const percent = clamped / max * 100;
+  const text = formatValue ? formatValue(clamped, max) : `${Math.round(percent)}%`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("ansh-progress", `ansh-progress--${size}`, `ansh-progress--${tone}`, className),
+      children: [
+        showLabel ? /* @__PURE__ */ jsxs("div", { className: "ansh-progress__labels", children: [
+          /* @__PURE__ */ jsx("span", { className: "ansh-progress__label", children: label }),
+          !indeterminate ? /* @__PURE__ */ jsx("span", { className: "ansh-progress__value", children: text }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "ansh-progress__track",
+              indeterminate && "ansh-progress__track--indeterminate"
+            ),
+            role: "progressbar",
+            "aria-label": label,
+            ...indeterminate ? null : {
+              "aria-valuenow": clamped,
+              "aria-valuemin": 0,
+              "aria-valuemax": max,
+              "aria-valuetext": text
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "ansh-progress__fill",
+                style: indeterminate ? void 0 : { width: `${percent}%` }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function CircularProgress({
+  value,
+  max = 100,
+  size = 48,
+  thickness = 4,
+  tone = "accent",
+  label,
+  formatValue,
+  className,
+  children
+}) {
+  const indeterminate = value === void 0;
+  const clamped = indeterminate ? 25 : Math.min(Math.max(value, 0), max);
+  const fraction = clamped / max;
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const text = formatValue ? formatValue(clamped, max) : `${Math.round(fraction * 100)}%`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "ansh-ring",
+        `ansh-ring--${tone}`,
+        indeterminate && "ansh-ring--indeterminate",
+        className
+      ),
+      style: { width: size, height: size },
+      role: "progressbar",
+      "aria-label": label,
+      ...indeterminate ? null : {
+        "aria-valuenow": clamped,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuetext": text
+      },
+      children: [
+        /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: "ansh-ring__track",
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              fill: "none",
+              strokeWidth: thickness
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: "ansh-ring__fill",
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              fill: "none",
+              strokeWidth: thickness,
+              strokeLinecap: "round",
+              strokeDasharray: circumference,
+              strokeDashoffset: circumference * (1 - fraction),
+              transform: `rotate(-90 ${size / 2} ${size / 2})`
+            }
+          )
+        ] }),
+        children ? /* @__PURE__ */ jsx("span", { className: "ansh-ring__content", children }) : null
+      ]
+    }
+  );
+}
+function Meter({
+  value,
+  min = 0,
+  max = 100,
+  low,
+  high,
+  inverted = false,
+  label,
+  showValue = true,
+  formatValue,
+  className
+}) {
+  const clamped = Math.min(Math.max(value, min), max);
+  const percent = (clamped - min) / (max - min) * 100;
+  let tone = "success";
+  if (low !== void 0 && clamped < low) tone = inverted ? "success" : "danger";
+  else if (high !== void 0 && clamped > high) tone = inverted ? "danger" : "success";
+  else if (low !== void 0 || high !== void 0) tone = "warning";
+  const text = formatValue ? formatValue(clamped) : String(clamped);
+  return /* @__PURE__ */ jsxs("div", { className: cx("ansh-meter", `ansh-meter--${tone}`, className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "ansh-progress__labels", children: [
+      /* @__PURE__ */ jsx("span", { className: "ansh-progress__label", children: label }),
+      showValue ? /* @__PURE__ */ jsx("span", { className: "ansh-progress__value", children: text }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ansh-progress__track",
+        role: "meter",
+        "aria-label": label,
+        "aria-valuenow": clamped,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuetext": text,
+        children: /* @__PURE__ */ jsx("div", { className: "ansh-progress__fill", style: { width: `${percent}%` } })
+      }
+    )
+  ] });
+}
+
+export { Avatar, AvatarGroup, Badge, CircularProgress, CodeBlock, DataTable, DescriptionList, EmptyState, Kbd, Meter, Pagination, Progress, Stat, Table, Timeline };
+//# sourceMappingURL=chunk-HPGCILO4.js.map
+//# sourceMappingURL=chunk-HPGCILO4.js.map