@ansh-ui/vue 0.2.0

package/dist/chunk-FVKLCGA4.js

@@ -0,0 +1,1035 @@
+import { useControllableState } from './chunk-OAQ7MDYX.js';
+import { cx, resolveSlotContent } from './chunk-NJDDNO4C.js';
+import { defineComponent, computed, h, ref, onBeforeUnmount } from 'vue';
+import { toHex, parseColor, pickReadable } from '@ansh-ui/core';
+
+var DATA_TABLE_PROP_KEYS = [
+  "data",
+  "columns",
+  "getRowId",
+  "caption",
+  "selectable",
+  "selected",
+  "sort",
+  "defaultSort",
+  "pageSize",
+  "page",
+  "loading",
+  "emptyState",
+  "onRowClick",
+  "stickyHeader",
+  "density",
+  "striped",
+  "rowClassName"
+];
+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" });
+}
+var DataTable = defineComponent(
+  (props, { emit, attrs }) => {
+    const [sortState, setSortState] = useControllableState(
+      () => props.sort,
+      props.defaultSort ?? null,
+      (next) => emit("update:sort", next)
+    );
+    const [selection, setSelection] = useControllableState(
+      () => props.selected,
+      [],
+      (next) => emit("update:selected", next)
+    );
+    const [currentPage, setCurrentPage] = useControllableState(
+      () => props.page,
+      0,
+      (next) => emit("update:page", next)
+    );
+    const sorted = computed(() => {
+      const state = sortState.value;
+      if (!state) return props.data;
+      const column = props.columns.find((c) => c.id === state.columnId);
+      const sortValue = column?.sortValue;
+      if (!sortValue) return props.data;
+      const rows = [...props.data];
+      rows.sort((a, b) => {
+        const result = compare(sortValue(a), sortValue(b));
+        return state.direction === "asc" ? result : -result;
+      });
+      return rows;
+    });
+    const pageCount = computed(
+      () => props.pageSize ? Math.max(1, Math.ceil(sorted.value.length / props.pageSize)) : 1
+    );
+    const safePage = computed(() => Math.min(currentPage.value, pageCount.value - 1));
+    const visible = computed(() => {
+      const pageSize = props.pageSize;
+      if (!pageSize) return sorted.value;
+      const start = safePage.value * pageSize;
+      return sorted.value.slice(start, start + pageSize);
+    });
+    const visibleIds = computed(() => visible.value.map(props.getRowId));
+    const selectedSet = computed(() => new Set(selection.value));
+    const allVisibleSelected = computed(
+      () => visibleIds.value.length > 0 && visibleIds.value.every((id) => selectedSet.value.has(id))
+    );
+    const someVisibleSelected = computed(
+      () => visibleIds.value.some((id) => selectedSet.value.has(id))
+    );
+    const toggleAll = () => {
+      if (allVisibleSelected.value) {
+        setSelection(selection.value.filter((id) => !visibleIds.value.includes(id)));
+      } else {
+        setSelection([.../* @__PURE__ */ new Set([...selection.value, ...visibleIds.value])]);
+      }
+    };
+    const toggleRow = (rowId) => {
+      setSelection(
+        selectedSet.value.has(rowId) ? selection.value.filter((v) => v !== rowId) : [...selection.value, rowId]
+      );
+    };
+    const onSort = (column) => {
+      if (!column.sortable) return;
+      const state = sortState.value;
+      if (state?.columnId !== column.id) {
+        setSortState({ columnId: column.id, direction: "asc" });
+      } else if (state.direction === "asc") {
+        setSortState({ columnId: column.id, direction: "desc" });
+      } else {
+        setSortState(null);
+      }
+    };
+    return () => {
+      const columns = props.columns;
+      const selectable = props.selectable ?? false;
+      const density = props.density ?? "comfortable";
+      const striped = props.striped ?? false;
+      const columnCount = columns.length + (selectable ? 1 : 0);
+      const onRowClick = props.onRowClick;
+      const renderBody = () => {
+        if (props.loading) {
+          return Array.from(
+            { length: props.pageSize ?? 5 },
+            (_, rowIndex) => h("tr", { key: `skeleton-${rowIndex}`, class: "ansh-table__row" }, [
+              ...Array.from(
+                { length: columnCount },
+                (_2, cellIndex) => h("td", { key: cellIndex, class: "ansh-table__cell" }, [
+                  h("span", {
+                    class: "ansh-skeleton",
+                    style: { width: `${50 + cellIndex * 37 % 40}%`, height: "1em" }
+                  })
+                ])
+              )
+            ])
+          );
+        }
+        if (visible.value.length === 0) {
+          return [
+            h("tr", {}, [
+              h("td", { colspan: columnCount, class: "ansh-table__empty" }, [
+                props.emptyState ? resolveSlotContent(props.emptyState) : "No results"
+              ])
+            ])
+          ];
+        }
+        return visible.value.map((row, index) => {
+          const rowId = props.getRowId(row);
+          const isSelected = selectedSet.value.has(rowId);
+          return h(
+            "tr",
+            {
+              key: rowId,
+              class: cx(
+                "ansh-table__row",
+                isSelected && "ansh-table__row--selected",
+                Boolean(onRowClick) && "ansh-table__row--clickable",
+                props.rowClassName?.(row)
+              ),
+              "aria-selected": selectable ? isSelected : void 0,
+              // A click that started on a control inside the row belongs to that control —
+              // opening a detail view because someone ticked a checkbox is the classic
+              // clickable-row bug.
+              onClick: onRowClick ? (event) => {
+                const target = event.target;
+                if (target.closest("button, a, input, select, textarea")) return;
+                onRowClick(row);
+              } : void 0
+            },
+            [
+              selectable ? h("td", { class: "ansh-table__cell ansh-table__cell--check" }, [
+                h("input", {
+                  type: "checkbox",
+                  class: "ansh-table__checkbox",
+                  checked: isSelected,
+                  "aria-label": `Select row ${index + 1}`,
+                  onChange: () => toggleRow(rowId)
+                })
+              ]) : null,
+              ...columns.map(
+                (column) => h(
+                  "td",
+                  {
+                    key: column.id,
+                    class: cx(
+                      "ansh-table__cell",
+                      column.align && `ansh-table__cell--${column.align}`,
+                      column.hideBelow && `ansh-hide-below-${column.hideBelow}`
+                    )
+                  },
+                  [column.cell(row, index)]
+                )
+              )
+            ]
+          );
+        });
+      };
+      return h(
+        "div",
+        {
+          class: cx(
+            "ansh-table-wrap",
+            props.stickyHeader && "ansh-table-wrap--sticky",
+            attrs.class
+          )
+        },
+        [
+          h(
+            "table",
+            { class: cx("ansh-table", `ansh-table--${density}`, striped && "ansh-table--striped") },
+            [
+              h("caption", { class: "ansh-visually-hidden" }, [
+                props.caption,
+                sortState.value ? `, sorted by ${columns.find((c) => c.id === sortState.value.columnId)?.id} ${sortState.value.direction === "asc" ? "ascending" : "descending"}` : ""
+              ]),
+              h("thead", { class: "ansh-table__head" }, [
+                h("tr", {}, [
+                  selectable ? h("th", { scope: "col", class: "ansh-table__cell ansh-table__cell--check" }, [
+                    h("input", {
+                      type: "checkbox",
+                      class: "ansh-table__checkbox",
+                      checked: allVisibleSelected.value,
+                      // Mixed state when only some rows are ticked — announced as "partially
+                      // checked" rather than lying about the state. A fresh function
+                      // identity every render is what makes Vue re-invoke this ref callback
+                      // (mirroring the React version's inline ref) so the flag stays current.
+                      ref: (el) => {
+                        if (el) {
+                          el.indeterminate = !allVisibleSelected.value && someVisibleSelected.value;
+                        }
+                      },
+                      "aria-label": allVisibleSelected.value ? "Deselect all rows" : "Select all rows",
+                      onChange: toggleAll
+                    })
+                  ]) : null,
+                  ...columns.map((column) => {
+                    const isSorted = sortState.value?.columnId === column.id;
+                    return h(
+                      "th",
+                      {
+                        key: column.id,
+                        scope: "col",
+                        class: 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` on the header is what makes a screen reader announce the
+                        // sort state; the arrow glyph alone conveys nothing.
+                        "aria-sort": isSorted ? sortState.value.direction === "asc" ? "ascending" : "descending" : void 0
+                      },
+                      [
+                        column.sortable ? h(
+                          "button",
+                          {
+                            type: "button",
+                            class: "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"
+                          },
+                          [
+                            h("span", {}, [resolveSlotContent(column.header)]),
+                            h(
+                              "span",
+                              {
+                                class: cx(
+                                  "ansh-table__arrow",
+                                  isSorted && "ansh-table__arrow--on"
+                                ),
+                                "aria-hidden": "true",
+                                "data-direction": isSorted ? sortState.value.direction : "none"
+                              },
+                              [
+                                h("svg", { viewBox: "0 0 10 12", width: "10", height: "12" }, [
+                                  h("path", {
+                                    d: "M5 1v10M2 4l3-3 3 3M2 8l3 3 3-3",
+                                    stroke: "currentColor",
+                                    "stroke-width": "1.4",
+                                    fill: "none",
+                                    "stroke-linecap": "round",
+                                    "stroke-linejoin": "round"
+                                  })
+                                ])
+                              ]
+                            )
+                          ]
+                        ) : resolveSlotContent(column.header)
+                      ]
+                    );
+                  })
+                ])
+              ]),
+              h("tbody", {}, renderBody())
+            ]
+          ),
+          // Selection count and page changes announced without stealing focus.
+          h(
+            "span",
+            { class: "ansh-visually-hidden", role: "status", "aria-live": "polite" },
+            selectable && selection.value.length > 0 ? `${selection.value.length} selected` : ""
+          ),
+          props.pageSize && pageCount.value > 1 ? h(Pagination, {
+            page: safePage.value,
+            pageCount: pageCount.value,
+            total: sorted.value.length,
+            pageSize: props.pageSize,
+            onPageChange: setCurrentPage
+          }) : null
+        ]
+      );
+    };
+  },
+  {
+    name: "AnshDataTable",
+    inheritAttrs: false,
+    props: DATA_TABLE_PROP_KEYS,
+    emits: ["update:sort", "update:selected", "update:page"]
+  }
+);
+var Pagination = defineComponent({
+  name: "AnshPagination",
+  inheritAttrs: false,
+  props: {
+    page: { type: Number, required: true },
+    pageCount: { type: Number, required: true },
+    onPageChange: { type: Function, required: true },
+    total: { type: Number, default: void 0 },
+    pageSize: { type: Number, default: void 0 },
+    siblings: { type: Number, default: 1 }
+  },
+  setup(props, { attrs }) {
+    return () => {
+      const pages = [];
+      const first = 0;
+      const last = props.pageCount - 1;
+      for (let index = first; index <= last; index++) {
+        const nearCurrent = Math.abs(index - props.page) <= props.siblings;
+        const isEdge = index === first || index === last;
+        if (nearCurrent || isEdge) {
+          pages.push(index);
+        } else if (pages[pages.length - 1] !== "gap") {
+          pages.push("gap");
+        }
+      }
+      const from = props.pageSize ? props.page * props.pageSize + 1 : null;
+      const to = props.pageSize && props.total ? Math.min((props.page + 1) * props.pageSize, props.total) : null;
+      return h(
+        "nav",
+        { class: cx("ansh-pagination", attrs.class), "aria-label": "Pagination" },
+        [
+          from !== null && to !== null ? h("p", { class: "ansh-pagination__summary" }, `${from}\u2013${to} of ${props.total}`) : null,
+          h("ol", { class: "ansh-pagination__list" }, [
+            h("li", {}, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: "ansh-pagination__button ansh-focusable",
+                  disabled: props.page === 0,
+                  "aria-label": "Previous page",
+                  onClick: () => props.onPageChange(props.page - 1)
+                },
+                [
+                  h(
+                    "svg",
+                    { viewBox: "0 0 12 12", width: "12", height: "12", "aria-hidden": "true" },
+                    [
+                      h("path", {
+                        d: "M7.5 2.5L4 6l3.5 3.5",
+                        stroke: "currentColor",
+                        "stroke-width": "1.5",
+                        fill: "none",
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round"
+                      })
+                    ]
+                  )
+                ]
+              )
+            ]),
+            ...pages.map(
+              (entry, index) => entry === "gap" ? h(
+                "li",
+                { key: `gap-${index}`, "aria-hidden": "true", class: "ansh-pagination__gap" },
+                "\u2026"
+              ) : h("li", { key: entry }, [
+                h(
+                  "button",
+                  {
+                    type: "button",
+                    class: cx(
+                      "ansh-pagination__button",
+                      entry === props.page && "ansh-pagination__button--current",
+                      "ansh-focusable"
+                    ),
+                    "aria-current": entry === props.page ? "page" : void 0,
+                    "aria-label": `Page ${entry + 1}`,
+                    onClick: () => props.onPageChange(entry)
+                  },
+                  String(entry + 1)
+                )
+              ])
+            ),
+            h("li", {}, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: "ansh-pagination__button ansh-focusable",
+                  disabled: props.page >= props.pageCount - 1,
+                  "aria-label": "Next page",
+                  onClick: () => props.onPageChange(props.page + 1)
+                },
+                [
+                  h(
+                    "svg",
+                    { viewBox: "0 0 12 12", width: "12", height: "12", "aria-hidden": "true" },
+                    [
+                      h("path", {
+                        d: "M4.5 2.5L8 6l-3.5 3.5",
+                        stroke: "currentColor",
+                        "stroke-width": "1.5",
+                        fill: "none",
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round"
+                      })
+                    ]
+                  )
+                ]
+              )
+            ])
+          ])
+        ]
+      );
+    };
+  }
+});
+var Table = defineComponent({
+  name: "AnshTable",
+  inheritAttrs: false,
+  props: {
+    caption: { type: String, default: void 0 },
+    density: { type: String, default: "comfortable" },
+    striped: { type: Boolean, default: false }
+  },
+  setup(props, { slots, attrs }) {
+    return () => h("div", { class: cx("ansh-table-wrap", attrs.class) }, [
+      h(
+        "table",
+        {
+          class: cx(
+            "ansh-table",
+            `ansh-table--${props.density}`,
+            props.striped && "ansh-table--striped"
+          )
+        },
+        [
+          props.caption ? h("caption", { class: "ansh-visually-hidden" }, props.caption) : null,
+          slots.default?.()
+        ]
+      )
+    ]);
+  }
+});
+var Badge = defineComponent({
+  name: "AnshBadge",
+  inheritAttrs: false,
+  props: {
+    tone: { type: String, default: "neutral" },
+    variant: { type: String, default: "soft" },
+    size: { type: String, default: "md" },
+    /** Leading dot. Useful for statuses where the label is short. */
+    dot: { type: Boolean, default: false },
+    icon: { type: [String, Object, Function], default: void 0 }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      return h(
+        "span",
+        {
+          class: cx(
+            "ansh-badge",
+            `ansh-badge--${props.tone}`,
+            `ansh-badge--${props.variant}`,
+            `ansh-badge--${props.size}`,
+            attrClass
+          ),
+          ...restAttrs
+        },
+        [
+          props.dot ? h("span", { class: "ansh-badge__dot", "aria-hidden": "true" }) : null,
+          props.icon ? h("span", { class: "ansh-badge__icon" }, [resolveSlotContent(props.icon)]) : null,
+          slots.default?.()
+        ]
+      );
+    };
+  }
+});
+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);
+}
+var Avatar = defineComponent({
+  name: "AnshAvatar",
+  inheritAttrs: false,
+  props: {
+    src: { type: String, default: void 0 },
+    name: { type: String, required: true },
+    size: { type: String, default: "md" },
+    shape: { type: String, default: "circle" },
+    status: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { attrs }) {
+    const failed = ref(false);
+    const colors = computed(() => {
+      const hue = hash(props.name) % 360;
+      const backgroundHex = toHex(parseColor(`oklch(72% 0.13 ${hue})`));
+      return {
+        background: backgroundHex,
+        foreground: toHex(pickReadable(backgroundHex, "#ffffff", "#101828"))
+      };
+    });
+    const showImage = computed(() => Boolean(props.src) && !failed.value);
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      return h(
+        "span",
+        {
+          class: cx(
+            "ansh-avatar",
+            `ansh-avatar--${props.size}`,
+            `ansh-avatar--${props.shape}`,
+            attrClass
+          ),
+          ...restAttrs
+        },
+        [
+          showImage.value ? h("img", {
+            src: props.src,
+            alt: props.name,
+            class: "ansh-avatar__image",
+            // Falling back on error rather than showing a broken-image icon, which is what a
+            // bare `<img>` does when a CDN URL expires.
+            onError: () => {
+              failed.value = true;
+            }
+          }) : h(
+            "span",
+            {
+              class: "ansh-avatar__fallback",
+              style: { background: colors.value.background, color: colors.value.foreground },
+              "aria-hidden": "true"
+            },
+            initials(props.name)
+          ),
+          // The name is always available to assistive technology, even when the initials are
+          // shown as decorative.
+          !showImage.value ? h("span", { class: "ansh-visually-hidden" }, props.name) : null,
+          props.status ? h(
+            "span",
+            { class: cx("ansh-avatar__status", `ansh-avatar__status--${props.status}`) },
+            [h("span", { class: "ansh-visually-hidden" }, props.status)]
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var AvatarGroup = defineComponent({
+  name: "AnshAvatarGroup",
+  inheritAttrs: false,
+  props: {
+    /** Maximum shown before collapsing into a "+N" chip. Default `4`. */
+    max: { type: Number, default: 4 },
+    size: { type: String, default: void 0 }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const items = slots.default?.() ?? [];
+      const shown = items.slice(0, props.max);
+      const overflow = items.length - shown.length;
+      return h(
+        "span",
+        {
+          class: cx(
+            "ansh-avatar-group",
+            props.size && `ansh-avatar-group--${props.size}`,
+            attrs.class
+          )
+        },
+        [
+          shown,
+          overflow > 0 ? h(
+            "span",
+            {
+              class: cx(
+                "ansh-avatar",
+                props.size && `ansh-avatar--${props.size}`,
+                "ansh-avatar--circle",
+                "ansh-avatar--more"
+              )
+            },
+            [
+              h(
+                "span",
+                { class: "ansh-avatar__fallback", "aria-hidden": "true" },
+                `+${overflow}`
+              ),
+              h("span", { class: "ansh-visually-hidden" }, `and ${overflow} more`)
+            ]
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var Kbd = defineComponent({
+  name: "AnshKbd",
+  inheritAttrs: false,
+  setup(_props, { slots, attrs }) {
+    return () => {
+      const nodes = slots.default?.() ?? [];
+      const text = nodes.map((node) => typeof node.children === "string" ? node.children : "").join("");
+      const keys = text.split("+").map((key) => key.trim());
+      return h(
+        "span",
+        { class: cx("ansh-kbd-group", attrs.class) },
+        keys.map(
+          (key, index) => h("span", { key: `${key}-${index}` }, [
+            index > 0 ? h("span", { class: "ansh-kbd__plus", "aria-hidden": "true" }, "+") : null,
+            h("kbd", { class: "ansh-kbd" }, key)
+          ])
+        )
+      );
+    };
+  }
+});
+var Stat = defineComponent({
+  name: "AnshStat",
+  inheritAttrs: false,
+  props: {
+    label: { type: [String, Object, Function], required: true },
+    value: { type: [String, Object, Function], required: true },
+    delta: { type: Number, default: void 0 },
+    deltaLabel: { type: String, default: void 0 },
+    invertDelta: { type: Boolean, default: false },
+    hint: { type: [String, Object, Function], default: void 0 },
+    icon: { type: [String, Object, Function], default: void 0 }
+  },
+  setup(props, { attrs }) {
+    return () => {
+      const delta = props.delta;
+      const positive = delta !== void 0 && delta > 0;
+      const negative = delta !== void 0 && delta < 0;
+      const good = props.invertDelta ? negative : positive;
+      return h("div", { class: cx("ansh-stat", attrs.class) }, [
+        h("div", { class: "ansh-stat__head" }, [
+          h("span", { class: "ansh-stat__label" }, [resolveSlotContent(props.label)]),
+          props.icon ? h("span", { class: "ansh-stat__icon" }, [resolveSlotContent(props.icon)]) : null
+        ]),
+        h("div", { class: "ansh-stat__value" }, [resolveSlotContent(props.value)]),
+        delta !== void 0 ? h(
+          "div",
+          {
+            class: cx(
+              "ansh-stat__delta",
+              delta !== 0 && (good ? "ansh-stat__delta--good" : "ansh-stat__delta--bad")
+            )
+          },
+          [
+            h(
+              "span",
+              { class: "ansh-stat__arrow", "aria-hidden": "true" },
+              positive ? "\u2191" : negative ? "\u2193" : "\u2192"
+            ),
+            h("span", {}, props.deltaLabel ?? `${delta > 0 ? "+" : ""}${delta}%`),
+            props.hint ? h("span", { class: "ansh-stat__hint" }, [resolveSlotContent(props.hint)]) : null
+          ]
+        ) : props.hint ? h("div", { class: "ansh-stat__hint" }, [resolveSlotContent(props.hint)]) : null
+      ]);
+    };
+  }
+});
+var EmptyState = defineComponent({
+  name: "AnshEmptyState",
+  inheritAttrs: false,
+  props: {
+    title: { type: [String, Object, Function], required: true },
+    description: { type: [String, Object, Function], default: void 0 },
+    icon: { type: [String, Object, Function], default: void 0 },
+    action: { type: [String, Object, Function], default: void 0 },
+    size: { type: String, default: "md" }
+  },
+  setup(props, { attrs }) {
+    return () => h("div", { class: cx("ansh-empty", `ansh-empty--${props.size}`, attrs.class) }, [
+      props.icon ? h("span", { class: "ansh-empty__icon", "aria-hidden": "true" }, [
+        resolveSlotContent(props.icon)
+      ]) : null,
+      h("p", { class: "ansh-empty__title" }, [resolveSlotContent(props.title)]),
+      props.description ? h("p", { class: "ansh-empty__description" }, [resolveSlotContent(props.description)]) : null,
+      props.action ? h("div", { class: "ansh-empty__action" }, [resolveSlotContent(props.action)]) : null
+    ]);
+  }
+});
+var DescriptionList = defineComponent({
+  name: "AnshDescriptionList",
+  inheritAttrs: false,
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    orientation: { type: String, default: "horizontal" }
+  },
+  setup(props, { attrs }) {
+    return () => h(
+      "dl",
+      { class: cx("ansh-dl", `ansh-dl--${props.orientation}`, attrs.class) },
+      props.items.map(
+        (item, index) => h("div", { class: "ansh-dl__row", key: index }, [
+          h("dt", { class: "ansh-dl__term" }, [resolveSlotContent(item.term)]),
+          h("dd", { class: "ansh-dl__description" }, [resolveSlotContent(item.description)])
+        ])
+      )
+    );
+  }
+});
+var Timeline = defineComponent({
+  name: "AnshTimeline",
+  inheritAttrs: false,
+  props: {
+    items: { type: Array, required: true }
+  },
+  setup(props, { attrs }) {
+    return () => h(
+      "ol",
+      { class: cx("ansh-timeline", attrs.class) },
+      props.items.map(
+        (item) => h(
+          "li",
+          {
+            key: item.id,
+            class: cx("ansh-timeline__item", item.tone && `ansh-timeline__item--${item.tone}`)
+          },
+          [
+            h("span", { class: "ansh-timeline__marker", "aria-hidden": "true" }, [
+              item.icon ? resolveSlotContent(item.icon) : null
+            ]),
+            h("div", { class: "ansh-timeline__body" }, [
+              h("div", { class: "ansh-timeline__head" }, [
+                h("span", { class: "ansh-timeline__title" }, [resolveSlotContent(item.title)]),
+                item.timestamp ? h("span", { class: "ansh-timeline__time" }, [
+                  resolveSlotContent(item.timestamp)
+                ]) : null
+              ]),
+              item.description ? h("p", { class: "ansh-timeline__description" }, [
+                resolveSlotContent(item.description)
+              ]) : null
+            ])
+          ]
+        )
+      )
+    );
+  }
+});
+var CodeBlock = defineComponent({
+  name: "AnshCodeBlock",
+  inheritAttrs: false,
+  props: {
+    code: { type: String, required: true },
+    language: { type: String, default: "tsx" },
+    copyable: { type: Boolean, default: true },
+    lineNumbers: { type: Boolean, default: false },
+    filename: { type: String, default: void 0 }
+  },
+  setup(props, { attrs }) {
+    const copied = ref(false);
+    let timer;
+    const copy = async () => {
+      try {
+        await navigator.clipboard.writeText(props.code);
+        copied.value = true;
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          copied.value = false;
+        }, 1600);
+      } catch {
+      }
+    };
+    onBeforeUnmount(() => clearTimeout(timer));
+    return () => {
+      const lines = props.code.split("\n");
+      return h("div", { class: cx("ansh-code", attrs.class) }, [
+        props.filename || props.copyable ? h("div", { class: "ansh-code__bar" }, [
+          h("span", { class: "ansh-code__filename" }, props.filename ?? props.language),
+          props.copyable ? h(
+            "button",
+            { type: "button", class: "ansh-code__copy ansh-focusable", onClick: copy },
+            [
+              copied.value ? "Copied" : "Copy",
+              h("span", { class: "ansh-visually-hidden" }, " code to clipboard")
+            ]
+          ) : null
+        ]) : null,
+        h("pre", { class: cx("ansh-code__pre", props.lineNumbers && "ansh-code__pre--numbered") }, [
+          h(
+            "code",
+            { class: `language-${props.language}` },
+            props.lineNumbers ? lines.map(
+              (line, index) => h("span", { class: "ansh-code__line", key: index }, [
+                h(
+                  "span",
+                  { class: "ansh-code__lineno", "aria-hidden": "true" },
+                  String(index + 1)
+                ),
+                line,
+                "\n"
+              ])
+            ) : props.code
+          )
+        ])
+      ]);
+    };
+  }
+});
+var Progress = defineComponent({
+  name: "AnshProgress",
+  inheritAttrs: false,
+  props: {
+    value: { type: Number, default: void 0 },
+    max: { type: Number, default: 100 },
+    size: { type: String, default: "md" },
+    tone: {
+      type: String,
+      default: "accent"
+    },
+    label: { type: String, required: true },
+    showLabel: { type: Boolean, default: false },
+    formatValue: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props, { attrs }) {
+    return () => {
+      const rawValue = props.value;
+      const indeterminate = rawValue === void 0;
+      const clamped = rawValue === void 0 ? 0 : Math.min(Math.max(rawValue, 0), props.max);
+      const percent = clamped / props.max * 100;
+      const text = props.formatValue ? props.formatValue(clamped, props.max) : `${Math.round(percent)}%`;
+      return h(
+        "div",
+        {
+          class: cx(
+            "ansh-progress",
+            `ansh-progress--${props.size}`,
+            `ansh-progress--${props.tone}`,
+            attrs.class
+          )
+        },
+        [
+          props.showLabel ? h("div", { class: "ansh-progress__labels" }, [
+            h("span", { class: "ansh-progress__label" }, props.label),
+            !indeterminate ? h("span", { class: "ansh-progress__value" }, text) : null
+          ]) : null,
+          h(
+            "div",
+            {
+              class: cx(
+                "ansh-progress__track",
+                indeterminate && "ansh-progress__track--indeterminate"
+              ),
+              role: "progressbar",
+              "aria-label": props.label,
+              // An indeterminate progressbar omits `aria-valuenow` entirely. Setting it to 0 would
+              // be announced as "0 percent", implying stalled work rather than unknown duration.
+              ...indeterminate ? null : {
+                "aria-valuenow": clamped,
+                "aria-valuemin": 0,
+                "aria-valuemax": props.max,
+                "aria-valuetext": text
+              }
+            },
+            [
+              h("div", {
+                class: "ansh-progress__fill",
+                style: indeterminate ? void 0 : { width: `${percent}%` }
+              })
+            ]
+          )
+        ]
+      );
+    };
+  }
+});
+var CircularProgress = defineComponent({
+  name: "AnshCircularProgress",
+  inheritAttrs: false,
+  props: {
+    value: { type: Number, default: void 0 },
+    max: { type: Number, default: 100 },
+    size: { type: Number, default: 48 },
+    thickness: { type: Number, default: 4 },
+    tone: {
+      type: String,
+      default: "accent"
+    },
+    label: { type: String, required: true },
+    formatValue: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props, { attrs, slots }) {
+    return () => {
+      const rawValue = props.value;
+      const indeterminate = rawValue === void 0;
+      const clamped = rawValue === void 0 ? 25 : Math.min(Math.max(rawValue, 0), props.max);
+      const fraction = clamped / props.max;
+      const radius = (props.size - props.thickness) / 2;
+      const circumference = 2 * Math.PI * radius;
+      const text = props.formatValue ? props.formatValue(clamped, props.max) : `${Math.round(fraction * 100)}%`;
+      return h(
+        "div",
+        {
+          class: cx(
+            "ansh-ring",
+            `ansh-ring--${props.tone}`,
+            indeterminate && "ansh-ring--indeterminate",
+            attrs.class
+          ),
+          style: { width: `${props.size}px`, height: `${props.size}px` },
+          role: "progressbar",
+          "aria-label": props.label,
+          ...indeterminate ? null : {
+            "aria-valuenow": clamped,
+            "aria-valuemin": 0,
+            "aria-valuemax": props.max,
+            "aria-valuetext": text
+          }
+        },
+        [
+          h(
+            "svg",
+            {
+              width: props.size,
+              height: props.size,
+              viewBox: `0 0 ${props.size} ${props.size}`,
+              "aria-hidden": "true"
+            },
+            [
+              h("circle", {
+                class: "ansh-ring__track",
+                cx: props.size / 2,
+                cy: props.size / 2,
+                r: radius,
+                fill: "none",
+                "stroke-width": props.thickness
+              }),
+              h("circle", {
+                class: "ansh-ring__fill",
+                cx: props.size / 2,
+                cy: props.size / 2,
+                r: radius,
+                fill: "none",
+                "stroke-width": props.thickness,
+                "stroke-linecap": "round",
+                "stroke-dasharray": circumference,
+                "stroke-dashoffset": circumference * (1 - fraction),
+                transform: `rotate(-90 ${props.size / 2} ${props.size / 2})`
+              })
+            ]
+          ),
+          slots.default ? h("span", { class: "ansh-ring__content" }, slots.default()) : null
+        ]
+      );
+    };
+  }
+});
+var Meter = defineComponent({
+  name: "AnshMeter",
+  inheritAttrs: false,
+  props: {
+    value: { type: Number, required: true },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    low: { type: Number, default: void 0 },
+    high: { type: Number, default: void 0 },
+    inverted: { type: Boolean, default: false },
+    label: { type: String, required: true },
+    showValue: { type: Boolean, default: true },
+    formatValue: { type: Function, default: void 0 }
+  },
+  setup(props, { attrs }) {
+    return () => {
+      const clamped = Math.min(Math.max(props.value, props.min), props.max);
+      const percent = (clamped - props.min) / (props.max - props.min) * 100;
+      let tone = "success";
+      if (props.low !== void 0 && clamped < props.low)
+        tone = props.inverted ? "success" : "danger";
+      else if (props.high !== void 0 && clamped > props.high)
+        tone = props.inverted ? "danger" : "success";
+      else if (props.low !== void 0 || props.high !== void 0) tone = "warning";
+      const text = props.formatValue ? props.formatValue(clamped) : String(clamped);
+      return h("div", { class: cx("ansh-meter", `ansh-meter--${tone}`, attrs.class) }, [
+        h("div", { class: "ansh-progress__labels" }, [
+          h("span", { class: "ansh-progress__label" }, props.label),
+          props.showValue ? h("span", { class: "ansh-progress__value" }, text) : null
+        ]),
+        h(
+          "div",
+          {
+            class: "ansh-progress__track",
+            role: "meter",
+            "aria-label": props.label,
+            "aria-valuenow": clamped,
+            "aria-valuemin": props.min,
+            "aria-valuemax": props.max,
+            "aria-valuetext": text
+          },
+          [h("div", { class: "ansh-progress__fill", style: { width: `${percent}%` } })]
+        )
+      ]);
+    };
+  }
+});
+
+export { Avatar, AvatarGroup, Badge, CircularProgress, CodeBlock, DataTable, DescriptionList, EmptyState, Kbd, Meter, Pagination, Progress, Stat, Table, Timeline };
+//# sourceMappingURL=chunk-FVKLCGA4.js.map
+//# sourceMappingURL=chunk-FVKLCGA4.js.map