anicca-ui 1.0.0

package/dist/anicca-ui.es.js

@@ -0,0 +1,927 @@
+import { jsx as n, jsxs as c, Fragment as O } from "react/jsx-runtime";
+import { useMemo as F, useState as S, useEffect as E, useCallback as k } from "react";
+const _ = {
+  primary: "--anicca-primary",
+  primaryFg: "--anicca-primary-fg",
+  primarySoft: "--anicca-primary-soft",
+  success: "--anicca-success",
+  successBg: "--anicca-success-bg",
+  danger: "--anicca-danger",
+  dangerBg: "--anicca-danger-bg",
+  warning: "--anicca-warning",
+  warningBg: "--anicca-warning-bg",
+  info: "--anicca-info",
+  infoBg: "--anicca-info-bg",
+  surface: "--anicca-surface",
+  surfaceMuted: "--anicca-surface-muted",
+  surfaceOverlay: "--anicca-surface-overlay",
+  surfaceDark: "--anicca-surface-dark",
+  surfaceDark2: "--anicca-surface-dark-2",
+  surfaceDarkFg: "--anicca-surface-dark-fg",
+  surfaceDarkFgMuted: "--anicca-surface-dark-fg-muted",
+  border: "--anicca-border",
+  borderStrong: "--anicca-border-strong",
+  borderDark: "--anicca-border-dark",
+  text: "--anicca-text",
+  textMuted: "--anicca-text-muted",
+  textSubtle: "--anicca-text-subtle",
+  radius: "--anicca-radius",
+  radiusSm: "--anicca-radius-sm",
+  radiusLg: "--anicca-radius-lg",
+  shadowSm: "--anicca-shadow-sm",
+  shadowMd: "--anicca-shadow-md",
+  shadowLg: "--anicca-shadow-lg"
+};
+function H(t) {
+  if (!t) return {};
+  const e = {};
+  for (const r of Object.keys(t)) {
+    const a = t[r];
+    a !== void 0 && (e[_[r]] = a);
+  }
+  return e;
+}
+function pe({
+  theme: t,
+  as: e = "div",
+  className: r,
+  children: a
+}) {
+  const s = F(() => H(t), [t]);
+  return /* @__PURE__ */ n(e, { style: s, className: r, "data-anicca-theme": "", children: a });
+}
+function be({
+  title: t,
+  value: e,
+  icon: r,
+  trend: a,
+  trendLabel: s,
+  color: o,
+  className: i = ""
+}) {
+  const p = a !== void 0 ? a > 0 ? "up" : a < 0 ? "down" : "neutral" : null, l = {
+    up: "text-a-success bg-a-success-bg",
+    down: "text-a-danger bg-a-danger-bg",
+    neutral: "text-a-text-muted bg-a-surface-muted"
+  };
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: `relative bg-gradient-to-br from-a-surface to-a-surface-muted rounded-a p-6 border-l-4 shadow-a-sm transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] overflow-hidden hover:shadow-a-md hover:-translate-y-1 group ${i}`,
+      style: { borderLeftColor: o ?? "var(--anicca-primary)" },
+      role: "group",
+      "aria-label": `${t}: ${e}`,
+      children: [
+        /* @__PURE__ */ c("div", { className: "flex justify-between items-start mb-3", children: [
+          /* @__PURE__ */ n("span", { className: "text-xs text-a-text-muted font-semibold uppercase tracking-[0.06em]", children: t }),
+          r && /* @__PURE__ */ n("span", { className: "text-2xl text-a-text-subtle opacity-80 transition-transform duration-300 ease-in-out group-hover:scale-110", children: r })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "text-[2rem] font-extrabold text-a-text mb-3 tracking-tight leading-[1.1]", children: e }),
+        a !== void 0 && /* @__PURE__ */ c("div", { className: `inline-flex items-center gap-[0.35rem] text-[0.8rem] font-semibold py-1 px-[0.6rem] rounded-[20px] ${l[p || "neutral"]}`, children: [
+          /* @__PURE__ */ n("span", { className: "text-[0.7rem]", children: p === "up" ? "↑" : p === "down" ? "↓" : "→" }),
+          /* @__PURE__ */ c("span", { className: "font-bold", children: [
+            Math.abs(a),
+            "%"
+          ] }),
+          s && /* @__PURE__ */ n("span", { className: "text-a-text-subtle font-normal ml-2 text-xs", children: s })
+        ] })
+      ]
+    }
+  );
+}
+const Y = {
+  loading: "Loading chart"
+};
+function xe({
+  title: t,
+  subtitle: e,
+  children: r,
+  loading: a = !1,
+  empty: s = !1,
+  emptyMessage: o = "No data available",
+  height: i = 300,
+  labels: p,
+  className: l = ""
+}) {
+  const h = typeof i == "number" ? `${i}px` : i, d = { ...Y, ...p };
+  return /* @__PURE__ */ c("div", { className: `bg-gradient-to-br from-a-surface to-a-surface-muted rounded-a p-7 shadow-a-sm border border-a-border ${l}`, children: [
+    /* @__PURE__ */ c("div", { className: "mb-5", children: [
+      /* @__PURE__ */ n("div", { className: "text-[1.05rem] font-bold text-a-text tracking-[-0.01em]", children: t }),
+      e && /* @__PURE__ */ n("div", { className: "text-[0.8rem] text-a-text-muted mt-[0.3rem] font-normal", children: e })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "relative w-full rounded-xl overflow-hidden", style: { height: h }, children: a ? /* @__PURE__ */ n("div", { className: "w-full rounded-xl anicca-shimmer", style: { height: h }, "aria-label": d.loading }) : s ? /* @__PURE__ */ c("div", { className: "flex flex-col items-center justify-center text-a-text-subtle gap-4 anicca-empty-bg rounded-xl border-2 border-dashed border-a-border", style: { height: h }, children: [
+      /* @__PURE__ */ c(
+        "svg",
+        {
+          className: "w-14 h-14 opacity-40 stroke-[1.2]",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ n("path", { d: "M3 3v18h18", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ n("path", { d: "M7 16l4-4 4 4 5-5", strokeLinecap: "round", strokeLinejoin: "round" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ n("span", { className: "text-[0.9rem] text-a-text-muted font-medium", children: o })
+    ] }) : r })
+  ] });
+}
+const I = {
+  expand: "Expand sidebar",
+  collapse: "Collapse sidebar",
+  navigation: "Sidebar navigation"
+};
+function ge({
+  items: t,
+  collapsed: e = !1,
+  onCollapse: r,
+  logo: a,
+  footer: s,
+  activePath: o = "",
+  labels: i,
+  className: p = ""
+}) {
+  const [l, h] = S({}), d = { ...I, ...i }, m = (v) => {
+    h((M) => ({ ...M, [v]: !M[v] }));
+  }, x = () => {
+    r == null || r(!e);
+  }, u = "flex items-center gap-3 py-[0.65rem] px-4 text-a-surface-dark-fg-muted no-underline text-sm font-medium cursor-pointer transition-all duration-200 ease-in-out border-none bg-transparent w-full text-left rounded-[10px] mb-[2px] hover:bg-a-surface-dark-2/60 hover:text-a-surface-dark-fg group/item", g = "bg-a-primary-soft text-a-primary hover:bg-a-primary-soft hover:text-a-primary", D = (v) => {
+    const M = o === v.href, T = v.children && v.children.length > 0, b = l[v.href];
+    return /* @__PURE__ */ c("div", { children: [
+      T ? /* @__PURE__ */ c(
+        "button",
+        {
+          className: `${u} ${M ? g : ""}`,
+          onClick: () => m(v.href),
+          "aria-expanded": b,
+          children: [
+            v.icon && /* @__PURE__ */ n("span", { className: "shrink-0 w-5 flex items-center justify-center text-[1.1rem] transition-transform duration-200 ease-in-out group-hover/item:scale-110", children: v.icon }),
+            /* @__PURE__ */ n("span", { className: `whitespace-nowrap overflow-hidden text-ellipsis transition-opacity duration-200 ease-in-out ${e ? "hidden" : ""}`, children: v.label }),
+            !e && /* @__PURE__ */ n("span", { className: `ml-auto transition-transform duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)] text-[0.65rem] opacity-60 ${b ? "rotate-90 opacity-100" : ""}`, children: "▶" })
+          ]
+        }
+      ) : /* @__PURE__ */ c(
+        "a",
+        {
+          href: v.href,
+          className: `${u} ${M ? g : ""}`,
+          "aria-current": M ? "page" : void 0,
+          children: [
+            v.icon && /* @__PURE__ */ n("span", { className: "shrink-0 w-5 flex items-center justify-center text-[1.1rem] transition-transform duration-200 ease-in-out group-hover/item:scale-110", children: v.icon }),
+            /* @__PURE__ */ n("span", { className: `whitespace-nowrap overflow-hidden text-ellipsis transition-opacity duration-200 ease-in-out ${e ? "hidden" : ""}`, children: v.label })
+          ]
+        }
+      ),
+      T && !e && /* @__PURE__ */ n("div", { className: `pl-2 overflow-hidden transition-[max-height] duration-[350ms] ease-[cubic-bezier(0.4,0,0.2,1)] ${b ? "max-h-[500px]" : "max-h-0"}`, children: v.children.map(($) => /* @__PURE__ */ c(
+        "a",
+        {
+          href: $.href,
+          className: `${u} pl-11 text-[0.82rem] ${o === $.href ? g : ""}`,
+          "aria-current": o === $.href ? "page" : void 0,
+          children: [
+            $.icon && /* @__PURE__ */ n("span", { className: "shrink-0 w-5 flex items-center justify-center text-[1.1rem]", children: $.icon }),
+            /* @__PURE__ */ n("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis", children: $.label })
+          ]
+        },
+        $.href
+      )) })
+    ] }, v.href);
+  };
+  return /* @__PURE__ */ c(
+    "aside",
+    {
+      className: `flex flex-col h-screen sticky top-0 bg-gradient-to-b from-a-surface-dark to-a-surface-dark-2 text-a-surface-dark-fg transition-[width] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] overflow-hidden border-r border-a-border-dark shrink-0 ${e ? "w-[72px]" : "w-[260px]"} ${p}`,
+      role: "navigation",
+      "aria-label": d.navigation,
+      children: [
+        a && /* @__PURE__ */ n("div", { className: "flex items-center justify-center py-6 px-5 border-b border-a-border-dark min-h-[72px]", children: a }),
+        /* @__PURE__ */ n("nav", { className: "flex-1 overflow-y-auto py-3 px-2 min-h-0", children: t.map(D) }),
+        /* @__PURE__ */ c("div", { className: "p-4 border-t border-a-border-dark", children: [
+          s && !e && s,
+          /* @__PURE__ */ n(
+            "button",
+            {
+              className: "flex items-center justify-center w-full py-[0.6rem] bg-a-surface-dark-2/60 border border-a-border-dark rounded-lg text-a-surface-dark-fg-muted cursor-pointer text-[0.9rem] transition-all duration-200 ease-in-out hover:bg-a-surface-dark-2 hover:text-a-surface-dark-fg",
+              onClick: x,
+              "aria-label": e ? d.expand : d.collapse,
+              children: e ? "→" : "←"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const U = {
+  toggleMenu: "Toggle menu"
+};
+function ye({
+  title: t,
+  logo: e,
+  actions: r,
+  user: a,
+  onMenuToggle: s,
+  labels: o,
+  className: i = ""
+}) {
+  const p = { ...U, ...o }, l = (h) => h.split(" ").map((d) => d[0]).join("").toUpperCase().slice(0, 2);
+  return /* @__PURE__ */ c("header", { className: `flex items-center justify-between px-7 h-[68px] bg-a-surface/90 backdrop-blur-[12px] border-b border-a-border shadow-a-sm sticky top-0 z-[100] ${i}`, role: "banner", children: [
+    /* @__PURE__ */ c("div", { className: "flex items-center gap-[0.85rem]", children: [
+      s && /* @__PURE__ */ n(
+        "button",
+        {
+          className: "flex items-center justify-center w-[38px] h-[38px] border border-a-border bg-a-surface-muted rounded-[10px] cursor-pointer text-a-text-muted text-[1.2rem] transition-all duration-200 ease-in-out hover:bg-a-border hover:text-a-text",
+          onClick: s,
+          "aria-label": p.toggleMenu,
+          children: "☰"
+        }
+      ),
+      e && /* @__PURE__ */ n("div", { className: "flex items-center", children: e }),
+      t && /* @__PURE__ */ n("span", { className: "text-[1.1rem] font-bold text-a-text tracking-[-0.01em]", children: t })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "flex items-center gap-5", children: [
+      r && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: r }),
+      a && /* @__PURE__ */ c("div", { className: "flex items-center gap-3 py-[0.4rem] pr-[0.6rem] pl-[0.4rem] rounded-xl transition-colors duration-200 ease-in-out hover:bg-a-surface-muted", children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: "w-[38px] h-[38px] rounded-[10px] text-a-primary-fg flex items-center justify-center text-[0.8rem] font-bold overflow-hidden",
+            style: { background: "var(--anicca-primary)" },
+            children: a.avatar ? /* @__PURE__ */ n("img", { src: a.avatar, alt: a.name, className: "w-full h-full object-cover" }) : l(a.name)
+          }
+        ),
+        /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ n("span", { className: "text-[0.85rem] font-semibold text-a-text", children: a.name }),
+          a.role && /* @__PURE__ */ n("span", { className: "text-[0.7rem] text-a-text-muted font-normal", children: a.role })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ve({
+  items: t,
+  separator: e = "/",
+  ariaLabel: r = "Breadcrumb",
+  className: a = ""
+}) {
+  return /* @__PURE__ */ n("nav", { className: `py-[0.6rem] ${a}`, "aria-label": r, children: /* @__PURE__ */ n("ol", { className: "flex items-center list-none m-0 p-0 flex-wrap", children: t.map((s, o) => {
+    const i = o === t.length - 1;
+    return /* @__PURE__ */ n("li", { className: "flex items-center", children: i ? /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-[0.35rem] text-a-text text-[0.82rem] font-bold py-[0.3rem] px-[0.7rem] bg-a-surface-muted rounded-md", children: [
+      s.icon && /* @__PURE__ */ n("span", { className: "flex items-center text-[0.85rem]", children: s.icon }),
+      s.label
+    ] }) : /* @__PURE__ */ c(O, { children: [
+      /* @__PURE__ */ c("a", { href: s.href || "#", className: "inline-flex items-center gap-[0.35rem] text-a-text-muted no-underline text-[0.82rem] font-medium py-[0.3rem] px-[0.6rem] rounded-md transition-all duration-200 ease-in-out hover:text-a-primary hover:bg-a-primary-soft", children: [
+        s.icon && /* @__PURE__ */ n("span", { className: "flex items-center text-[0.85rem]", children: s.icon }),
+        s.label
+      ] }),
+      /* @__PURE__ */ n("span", { className: "mx-1 text-a-text-subtle text-xs select-none", "aria-hidden": "true", children: e })
+    ] }) }, `${s.label}-${o}`);
+  }) }) });
+}
+const J = {
+  searchPlaceholder: "Search...",
+  results: "results",
+  emptyMessage: "No data found",
+  page: "Page",
+  of: "of",
+  previous: "← Prev",
+  next: "Next →"
+};
+function Ne({
+  data: t,
+  columns: e,
+  searchable: r = !0,
+  pageSize: a = 5,
+  className: s = "",
+  labels: o
+}) {
+  const [i, p] = S(""), [l, h] = S(null), [d, m] = S(!0), [x, u] = S(0), g = { ...J, ...o }, D = F(() => {
+    let b = t;
+    if (i) {
+      const $ = i.toLowerCase();
+      b = b.filter(
+        (f) => e.some((N) => String(f[N.key] ?? "").toLowerCase().includes($))
+      );
+    }
+    return l && (b = [...b].sort(($, f) => {
+      const N = String($[l] ?? ""), y = String(f[l] ?? ""), w = N.localeCompare(y, void 0, { numeric: !0 });
+      return d ? w : -w;
+    })), b;
+  }, [t, i, l, d, e]), v = a > 0 ? Math.ceil(D.length / a) : 1, M = a > 0 ? D.slice(x * a, (x + 1) * a) : D, T = (b) => {
+    l === b ? m(!d) : (h(b), m(!0));
+  };
+  return /* @__PURE__ */ c("div", { className: `bg-a-surface rounded-a shadow-a-sm border border-a-border overflow-hidden ${s}`, children: [
+    r && /* @__PURE__ */ c("div", { className: "flex items-center justify-between py-5 px-6 border-b border-a-border", children: [
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-2 bg-a-surface-muted border-[1.5px] border-a-border rounded-[10px] py-2 px-[0.85rem] transition-colors focus-within:border-a-primary focus-within:shadow-[0_0_0_3px_var(--anicca-primary-soft)]", children: [
+        /* @__PURE__ */ n("span", { className: "text-[0.85rem] opacity-50", children: "🔍" }),
+        /* @__PURE__ */ n(
+          "input",
+          {
+            className: "border-none bg-transparent outline-none text-[0.85rem] font-[inherit] text-a-text w-[200px] placeholder:text-a-text-subtle",
+            value: i,
+            onChange: (b) => {
+              p(b.target.value), u(0);
+            },
+            placeholder: g.searchPlaceholder
+          }
+        )
+      ] }),
+      /* @__PURE__ */ c("span", { className: "text-xs text-a-text-subtle font-medium", children: [
+        D.length,
+        " ",
+        g.results
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "overflow-x-auto", children: /* @__PURE__ */ c("table", { className: "w-full border-collapse border-spacing-0", children: [
+      /* @__PURE__ */ n("thead", { children: /* @__PURE__ */ n("tr", { children: e.map((b) => /* @__PURE__ */ c(
+        "th",
+        {
+          className: `text-left py-3 px-5 text-[0.7rem] font-semibold text-a-text-muted uppercase tracking-[0.05em] bg-a-surface-muted whitespace-nowrap ${b.sortable ? "cursor-pointer select-none transition-colors duration-150 hover:text-a-text" : ""}`,
+          style: b.width ? { width: b.width } : void 0,
+          onClick: b.sortable ? () => T(b.key) : void 0,
+          children: [
+            b.label,
+            b.sortable && l === b.key && /* @__PURE__ */ n("span", { className: "text-[0.7rem]", children: d ? " ↑" : " ↓" })
+          ]
+        },
+        b.key
+      )) }) }),
+      /* @__PURE__ */ n("tbody", { children: M.length === 0 ? /* @__PURE__ */ n("tr", { children: /* @__PURE__ */ n("td", { colSpan: e.length, className: "py-12 px-6 text-center text-a-text-subtle text-[0.9rem]", children: g.emptyMessage }) }) : M.map((b, $) => /* @__PURE__ */ n("tr", { className: "transition-colors duration-150 hover:[&>td]:bg-a-surface-muted", children: e.map((f) => /* @__PURE__ */ n("td", { className: "py-[0.85rem] px-5 text-[0.85rem] border-b border-a-border align-middle last:border-b-0 text-a-text", children: f.render ? f.render(b[f.key], b) : String(b[f.key] ?? "") }, f.key)) }, $)) })
+    ] }) }),
+    a > 0 && v > 1 && /* @__PURE__ */ c("div", { className: "flex items-center justify-center gap-4 py-4 px-6 border-t border-a-border", children: [
+      /* @__PURE__ */ n(
+        "button",
+        {
+          className: "py-[0.4rem] px-[0.85rem] border-[1.5px] border-a-border rounded-lg bg-a-surface text-[0.78rem] font-medium text-a-text-muted cursor-pointer transition-all duration-150 font-[inherit] hover:enabled:border-a-primary hover:enabled:text-a-primary disabled:opacity-40 disabled:cursor-not-allowed",
+          disabled: x === 0,
+          onClick: () => u(x - 1),
+          children: g.previous
+        }
+      ),
+      /* @__PURE__ */ c("span", { className: "text-[0.78rem] text-a-text-muted font-medium", children: [
+        g.page,
+        " ",
+        x + 1,
+        " ",
+        g.of,
+        " ",
+        v
+      ] }),
+      /* @__PURE__ */ n(
+        "button",
+        {
+          className: "py-[0.4rem] px-[0.85rem] border-[1.5px] border-a-border rounded-lg bg-a-surface text-[0.78rem] font-medium text-a-text-muted cursor-pointer transition-all duration-150 font-[inherit] hover:enabled:border-a-primary hover:enabled:text-a-primary disabled:opacity-40 disabled:cursor-not-allowed",
+          disabled: x >= v - 1,
+          onClick: () => u(x + 1),
+          children: g.next
+        }
+      )
+    ] })
+  ] });
+}
+function we({
+  items: t,
+  title: e,
+  badge: r,
+  className: a = ""
+}) {
+  const s = e && e.length > 0 || r;
+  return /* @__PURE__ */ c("div", { className: `bg-a-surface rounded-a p-6 shadow-a-sm border border-a-border ${a}`, children: [
+    s && /* @__PURE__ */ c("div", { className: "flex justify-between items-center mb-5", children: [
+      e ? /* @__PURE__ */ n("span", { className: "text-[0.95rem] font-bold text-a-text", children: e }) : /* @__PURE__ */ n("span", {}),
+      r && /* @__PURE__ */ n("span", { children: r })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "flex flex-col", children: t.map((o, i) => /* @__PURE__ */ c("div", { className: "flex gap-[0.85rem] py-[0.85rem] relative", children: [
+      i < t.length - 1 && /* @__PURE__ */ n("div", { className: "absolute left-[18px] top-[48px] bottom-0 w-[1.5px] bg-gradient-to-b from-a-border to-transparent" }),
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: "w-9 h-9 rounded-[10px] flex items-center justify-center text-[0.95rem] shrink-0 relative z-[1]",
+          style: { background: o.iconBg || "var(--anicca-surface-muted)" },
+          children: o.icon
+        }
+      ),
+      /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ n("div", { className: "text-[0.82rem] text-a-text leading-relaxed", children: o.message }),
+        /* @__PURE__ */ n("div", { className: "text-[0.7rem] text-a-text-subtle mt-[0.2rem]", children: o.time })
+      ] })
+    ] }, i)) })
+  ] });
+}
+const V = {
+  unit: "projects"
+};
+function ke({
+  items: t,
+  title: e,
+  showCount: r = !0,
+  labels: a,
+  className: s = ""
+}) {
+  const o = { ...V, ...a };
+  return /* @__PURE__ */ c("div", { className: `bg-a-surface rounded-a p-6 shadow-a-sm border border-a-border ${s}`, children: [
+    e && /* @__PURE__ */ c("div", { className: "flex justify-between items-center mb-5", children: [
+      /* @__PURE__ */ n("span", { className: "text-[0.95rem] font-bold text-a-text", children: e }),
+      r && /* @__PURE__ */ c("span", { className: "text-[0.68rem] py-[0.2rem] px-[0.55rem] rounded-[20px] font-semibold bg-a-info-bg text-a-info", children: [
+        t.length,
+        " ",
+        o.unit
+      ] })
+    ] }),
+    t.map((i, p) => {
+      const l = i.color || "var(--anicca-primary)";
+      return /* @__PURE__ */ c("div", { className: `py-[0.85rem] border-b border-a-border last:border-b-0 last:pb-0 ${p === 0 && !e ? "pt-0" : ""}`, children: [
+        /* @__PURE__ */ c("div", { className: "flex justify-between items-center mb-2", children: [
+          /* @__PURE__ */ n("span", { className: "text-[0.85rem] font-semibold text-a-text", children: i.name }),
+          /* @__PURE__ */ c("span", { className: "text-xs font-bold", style: { color: l }, children: [
+            i.progress,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "h-[7px] bg-a-surface-muted rounded overflow-hidden", children: /* @__PURE__ */ n("div", { className: "h-full rounded transition-[width] duration-500 ease-in-out", style: { width: `${i.progress}%`, background: l } }) }),
+        (i.status || i.team) && /* @__PURE__ */ c("div", { className: "flex justify-between items-center mt-[0.4rem]", children: [
+          i.status && /* @__PURE__ */ n("span", { className: "text-[0.7rem] text-a-text-subtle", children: i.status }),
+          i.team && /* @__PURE__ */ n("div", { className: "flex", children: i.team.map((h, d) => {
+            const m = typeof h == "string" ? h : h.color, x = typeof h == "string" ? String.fromCharCode(65 + d) : h.label ?? String.fromCharCode(65 + d);
+            return /* @__PURE__ */ n("div", { className: "w-[22px] h-[22px] rounded-full border-2 border-a-surface -ml-[6px] first:ml-0 flex items-center justify-center text-[0.55rem] font-bold text-a-primary-fg", style: { background: m }, children: x }, d);
+          }) })
+        ] })
+      ] }, i.name);
+    })
+  ] });
+}
+const P = {
+  close: "Close"
+};
+function $e({
+  open: t,
+  onClose: e,
+  title: r,
+  children: a,
+  footer: s,
+  disableEscapeKey: o = !1,
+  disableBackdropClick: i = !1,
+  labels: p,
+  className: l = ""
+}) {
+  const h = { ...P, ...p };
+  return E(() => {
+    if (!t || o) return;
+    const d = (m) => {
+      m.key === "Escape" && e();
+    };
+    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
+  }, [t, e, o]), E(() => {
+    if (t)
+      return document.body.style.overflow = "hidden", () => {
+        document.body.style.overflow = "";
+      };
+  }, [t]), t ? /* @__PURE__ */ n(
+    "div",
+    {
+      className: "fixed inset-0 backdrop-blur-[4px] flex items-center justify-center z-[1000] anicca-fade-in p-4",
+      style: { background: "var(--anicca-surface-overlay)" },
+      onClick: i ? void 0 : e,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": r,
+      children: /* @__PURE__ */ c("div", { className: `bg-a-surface rounded-a shadow-a-lg w-full max-w-[480px] max-h-[90vh] overflow-y-auto anicca-slide-up ${l}`, onClick: (d) => d.stopPropagation(), children: [
+        r && /* @__PURE__ */ c("div", { className: "flex items-center justify-between py-5 px-6 border-b border-a-border", children: [
+          /* @__PURE__ */ n("span", { className: "text-base font-bold text-a-text", children: r }),
+          /* @__PURE__ */ n("button", { className: "w-8 h-8 rounded-lg border-none bg-a-surface-muted text-a-text-muted text-[1.1rem] cursor-pointer flex items-center justify-center transition-all duration-150 hover:bg-a-border hover:text-a-text", onClick: e, "aria-label": h.close, children: "×" })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "p-6 text-a-text", children: a }),
+        s && /* @__PURE__ */ n("div", { className: "flex justify-end gap-3 py-4 px-6 border-t border-a-border", children: s })
+      ] })
+    }
+  ) : null;
+}
+function Me({
+  tabs: t,
+  defaultTab: e,
+  activeKey: r,
+  onChange: a,
+  className: s = ""
+}) {
+  var d;
+  const [o, i] = S(e || ((d = t[0]) == null ? void 0 : d.key) || ""), p = r ?? o, l = t.find((m) => m.key === p), h = (m) => {
+    r === void 0 && i(m), a == null || a(m);
+  };
+  return /* @__PURE__ */ c("div", { className: `bg-a-surface rounded-a shadow-a-sm border border-a-border overflow-hidden ${s}`, children: [
+    /* @__PURE__ */ n("div", { className: "flex pt-2 px-6 border-b border-a-border", role: "tablist", children: t.map((m) => /* @__PURE__ */ c(
+      "button",
+      {
+        className: `py-[0.7rem] px-[1.1rem] text-[0.82rem] font-medium cursor-pointer border-none bg-transparent border-b-2 transition-all duration-200 flex items-center gap-[0.4rem] font-[inherit] -mb-px ${p === m.key ? "text-a-primary border-b-a-primary font-semibold" : "text-a-text-muted border-b-transparent hover:text-a-text"}`,
+        onClick: () => h(m.key),
+        role: "tab",
+        "aria-selected": p === m.key,
+        children: [
+          m.icon && /* @__PURE__ */ n("span", { className: "text-[0.9rem]", children: m.icon }),
+          m.label
+        ]
+      },
+      m.key
+    )) }),
+    /* @__PURE__ */ n("div", { className: "p-6 text-a-text", role: "tabpanel", children: l == null ? void 0 : l.content })
+  ] });
+}
+function Se(t = "This field is required") {
+  return {
+    validate: (e) => e == null ? !1 : typeof e == "string" ? e.trim().length > 0 : Array.isArray(e) ? e.length > 0 : !0,
+    message: t
+  };
+}
+function Ae(t = "Invalid email address") {
+  return {
+    validate: (e) => typeof e != "string" ? !1 : /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e),
+    message: t
+  };
+}
+function De(t, e) {
+  return {
+    validate: (r) => typeof r != "string" ? !1 : r.length >= t,
+    message: e || `Must be at least ${t} characters`
+  };
+}
+function Te(t, e) {
+  return {
+    validate: (r) => typeof r != "string" ? !1 : r.length <= t,
+    message: e || `Must be at most ${t} characters`
+  };
+}
+function Ce(t, e = "Invalid format") {
+  return {
+    validate: (r) => typeof r != "string" ? !1 : t.test(r),
+    message: e
+  };
+}
+function je(t, e) {
+  return {
+    validate: (r) => typeof r != "number" ? !1 : r >= t,
+    message: e || `Must be at least ${t}`
+  };
+}
+function Le(t, e) {
+  return {
+    validate: (r) => typeof r != "number" ? !1 : r <= t,
+    message: e || `Must be at most ${t}`
+  };
+}
+function Fe(t, e) {
+  return {
+    validate: t,
+    message: e
+  };
+}
+function Ee(t) {
+  const { initialValues: e, validationSchema: r, onSubmit: a } = t, [s, o] = S(e), [i, p] = S({}), [l, h] = S({}), [d, m] = S(!1), x = k(
+    (f, N) => {
+      const y = r == null ? void 0 : r[f];
+      if (y) {
+        for (const w of y)
+          if (!w.validate(N))
+            return w.message;
+      }
+    },
+    [r]
+  ), u = k(() => {
+    const f = {};
+    for (const N of Object.keys(e)) {
+      const y = x(N, s[N]);
+      y && (f[N] = y);
+    }
+    return f;
+  }, [e, x, s]), g = Object.keys(i).length === 0, D = k(
+    (f) => (N) => {
+      const y = N.target.value;
+      if (o((w) => ({ ...w, [f]: y })), l[f]) {
+        const w = x(f, y);
+        p((C) => {
+          const L = { ...C };
+          return w ? L[f] = w : delete L[f], L;
+        });
+      }
+    },
+    [l, x]
+  ), v = k(
+    (f) => () => {
+      h((y) => ({ ...y, [f]: !0 }));
+      const N = x(f, s[f]);
+      p((y) => {
+        const w = { ...y };
+        return N ? w[f] = N : delete w[f], w;
+      });
+    },
+    [x, s]
+  ), M = k(
+    async (f) => {
+      f && f.preventDefault();
+      const N = {};
+      for (const w of Object.keys(e))
+        N[w] = !0;
+      h(N);
+      const y = u();
+      if (p(y), Object.keys(y).length === 0 && a) {
+        m(!0);
+        try {
+          await a(s);
+        } finally {
+          m(!1);
+        }
+      }
+    },
+    [e, a, u, s]
+  ), T = k(() => {
+    o(e), p({}), h({}), m(!1);
+  }, [e]), b = k(
+    (f, N) => {
+      if (o((y) => ({ ...y, [f]: N })), l[f]) {
+        const y = x(f, N);
+        p((w) => {
+          const C = { ...w };
+          return y ? C[f] = y : delete C[f], C;
+        });
+      }
+    },
+    [l, x]
+  ), $ = k((f, N) => {
+    p((y) => ({ ...y, [f]: N }));
+  }, []);
+  return {
+    values: s,
+    errors: i,
+    touched: l,
+    isValid: g,
+    isSubmitting: d,
+    handleChange: D,
+    handleBlur: v,
+    handleSubmit: M,
+    reset: T,
+    setFieldValue: b,
+    setFieldError: $
+  };
+}
+const q = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"], z = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], K = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"], R = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+function A(t) {
+  return typeof t == "string" ? new Date(t) : new Date(t.getTime());
+}
+function j(t) {
+  return t.toString().padStart(2, "0");
+}
+function W(t, e, r = "en") {
+  const a = A(t), s = r === "id" ? q : z, o = r === "id" ? K : R;
+  return e.replace("YYYY", a.getFullYear().toString()).replace("MM", j(a.getMonth() + 1)).replace("DD", j(a.getDate())).replace("HH", j(a.getHours())).replace("mm", j(a.getMinutes())).replace("ss", j(a.getSeconds())).replace("dddd", s[a.getDay()]).replace("MMMM", o[a.getMonth()]);
+}
+function G(t, e, r) {
+  const a = A(t), s = A(e);
+  if (r === "years")
+    return Math.abs(a.getFullYear() - s.getFullYear());
+  if (r === "months")
+    return Math.abs(
+      (a.getFullYear() - s.getFullYear()) * 12 + (a.getMonth() - s.getMonth())
+    );
+  const o = Math.abs(a.getTime() - s.getTime());
+  return Math.floor(o / {
+    seconds: 1e3,
+    minutes: 6e4,
+    hours: 36e5,
+    days: 864e5
+  }[r]);
+}
+function Q(t, e = "en") {
+  const r = A(t), s = (/* @__PURE__ */ new Date()).getTime() - r.getTime(), o = s < 0, i = Math.abs(s), p = Math.floor(i / 1e3), l = Math.floor(i / 6e4), h = Math.floor(i / 36e5), d = Math.floor(i / 864e5), m = Math.floor(d / 7), x = Math.floor(d / 30), u = Math.floor(d / 365);
+  if (e === "id") {
+    const g = o ? "lagi" : "lalu";
+    return p < 60 ? "baru saja" : l < 60 ? `${l} menit ${g}` : h < 24 ? `${h} jam ${g}` : d < 7 ? `${d} hari ${g}` : m < 4 ? `${m} minggu ${g}` : x < 12 ? `${x} bulan ${g}` : `${u} tahun ${g}`;
+  }
+  return p < 60 ? "just now" : o ? l < 60 ? `in ${l} minutes` : h < 24 ? `in ${h} hours` : d < 7 ? `in ${d} days` : m < 4 ? `in ${m} weeks` : x < 12 ? `in ${x} months` : `in ${u} years` : l < 60 ? `${l} minutes ago` : h < 24 ? `${h} hours ago` : d < 7 ? `${d} days ago` : m < 4 ? `${m} weeks ago` : x < 12 ? `${x} months ago` : `${u} years ago`;
+}
+function X(t, e) {
+  const r = A(t);
+  switch (e) {
+    case "day":
+      return r.setHours(0, 0, 0, 0), r;
+    case "week": {
+      const a = r.getDay();
+      return r.setDate(r.getDate() - a), r.setHours(0, 0, 0, 0), r;
+    }
+    case "month":
+      return r.setDate(1), r.setHours(0, 0, 0, 0), r;
+    case "year":
+      return r.setMonth(0, 1), r.setHours(0, 0, 0, 0), r;
+  }
+}
+function Z(t, e) {
+  const r = A(t);
+  switch (e) {
+    case "day":
+      return r.setHours(23, 59, 59, 999), r;
+    case "week": {
+      const a = r.getDay();
+      return r.setDate(r.getDate() + (6 - a)), r.setHours(23, 59, 59, 999), r;
+    }
+    case "month":
+      return r.setMonth(r.getMonth() + 1, 0), r.setHours(23, 59, 59, 999), r;
+    case "year":
+      return r.setMonth(11, 31), r.setHours(23, 59, 59, 999), r;
+  }
+}
+function ee(t, e, r) {
+  const a = A(t);
+  switch (r) {
+    case "minutes":
+      return a.setMinutes(a.getMinutes() + e), a;
+    case "hours":
+      return a.setHours(a.getHours() + e), a;
+    case "days":
+      return a.setDate(a.getDate() + e), a;
+    case "months":
+      return a.setMonth(a.getMonth() + e), a;
+    case "years":
+      return a.setFullYear(a.getFullYear() + e), a;
+  }
+}
+function te(t) {
+  return t instanceof Date ? !isNaN(t.getTime()) : typeof t == "string" ? !isNaN(new Date(t).getTime()) : !1;
+}
+function re(t, e) {
+  return A(t).getTime() < A(e).getTime();
+}
+function ae(t, e) {
+  return A(t).getTime() > A(e).getTime();
+}
+function Be(t) {
+  const [e, r] = S(() => {
+    if (t == null) return null;
+    const u = typeof t == "string" ? new Date(t) : t;
+    return isNaN(u.getTime()) ? null : u;
+  }), a = k((u) => {
+    if (u === null) {
+      r(null);
+      return;
+    }
+    const g = typeof u == "string" ? new Date(u) : u;
+    r(isNaN(g.getTime()) ? null : g);
+  }, []), s = k(
+    (u, g = "en") => e ? W(e, u, g) : "",
+    [e]
+  ), o = k(
+    (u, g) => e ? G(e, u, g) : 0,
+    [e]
+  ), i = k(
+    (u = "en") => e ? Q(e, u) : "",
+    [e]
+  ), p = k(
+    (u, g) => e ? ee(e, u, g) : /* @__PURE__ */ new Date(),
+    [e]
+  ), l = k(
+    (u) => e ? X(e, u) : /* @__PURE__ */ new Date(),
+    [e]
+  ), h = k(
+    (u) => e ? Z(e, u) : /* @__PURE__ */ new Date(),
+    [e]
+  ), d = k(() => te(e), [e]), m = k(
+    (u) => e ? re(e, u) : !1,
+    [e]
+  ), x = k(
+    (u) => e ? ae(e, u) : !1,
+    [e]
+  );
+  return {
+    date: e,
+    setDate: a,
+    format: s,
+    diff: o,
+    relative: i,
+    add: p,
+    startOf: l,
+    endOf: h,
+    isValid: d,
+    isBefore: m,
+    isAfter: x
+  };
+}
+function ne(t, e) {
+  let r = null;
+  return (...a) => {
+    r && clearTimeout(r), r = setTimeout(() => t(...a), e);
+  };
+}
+function se(t, e) {
+  let r = 0;
+  return (...a) => {
+    const s = Date.now();
+    s - r >= e && (r = s, t(...a));
+  };
+}
+function oe(t, e, r = "...") {
+  return t.length <= e ? t : t.slice(0, e) + r;
+}
+async function ie(t) {
+  try {
+    if (navigator.clipboard && navigator.clipboard.writeText)
+      return await navigator.clipboard.writeText(t), !0;
+    const e = document.createElement("textarea");
+    e.value = t, e.style.position = "fixed", e.style.opacity = "0", document.body.appendChild(e), e.select();
+    const r = document.execCommand("copy");
+    return document.body.removeChild(e), r;
+  } catch {
+    return !1;
+  }
+}
+function ce(t) {
+  return t.toLowerCase().replace(/[^\w\s-]/g, "").replace(/[\s_]+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+}
+function le(t) {
+  return t && t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
+}
+function de(t) {
+  return typeof structuredClone == "function" ? structuredClone(t) : JSON.parse(JSON.stringify(t));
+}
+function B(t, e = "") {
+  const r = {};
+  for (const a of Object.keys(t)) {
+    const s = e ? `${e}.${a}` : a, o = t[a];
+    o !== null && typeof o == "object" && !Array.isArray(o) ? Object.assign(r, B(o, s)) : r[s] = o;
+  }
+  return r;
+}
+function ue(t, e) {
+  const r = {};
+  for (const a of t) {
+    const s = String(a[e]);
+    r[s] || (r[s] = []), r[s].push(a);
+  }
+  return r;
+}
+function fe(t, e) {
+  const r = /* @__PURE__ */ new Set();
+  return t.filter((a) => {
+    const s = a[e];
+    return r.has(s) ? !1 : (r.add(s), !0);
+  });
+}
+function Oe() {
+  return F(
+    () => ({
+      debounce: ne,
+      throttle: se,
+      truncate: oe,
+      copyToClipboard: ie,
+      slugify: ce,
+      capitalize: le,
+      deepClone: de,
+      flattenObject: B,
+      groupBy: ue,
+      uniqueBy: fe
+    }),
+    []
+  );
+}
+export {
+  _ as ANICCA_THEME_CSS_VAR_MAP,
+  we as AniccaActivityFeed,
+  ve as AniccaBreadcrumb,
+  xe as AniccaChartWrapper,
+  Ne as AniccaDataTable,
+  $e as AniccaModal,
+  ye as AniccaNavbar,
+  ke as AniccaProgressCard,
+  ge as AniccaSidebar,
+  be as AniccaStatCard,
+  Me as AniccaTabs,
+  pe as AniccaThemeProvider,
+  ee as aniccaAdd,
+  le as aniccaCapitalize,
+  ie as aniccaCopyToClipboard,
+  ne as aniccaDebounce,
+  de as aniccaDeepClone,
+  G as aniccaDiff,
+  Z as aniccaEndOf,
+  B as aniccaFlattenObject,
+  W as aniccaFormat,
+  ue as aniccaGroupBy,
+  ae as aniccaIsAfter,
+  re as aniccaIsBefore,
+  te as aniccaIsValid,
+  Q as aniccaRelative,
+  ce as aniccaSlugify,
+  X as aniccaStartOf,
+  se as aniccaThrottle,
+  oe as aniccaTruncate,
+  fe as aniccaUniqueBy,
+  Fe as custom,
+  Ae as email,
+  Le as max,
+  Te as maxLength,
+  je as min,
+  De as minLength,
+  Ce as pattern,
+  Se as required,
+  Be as useAniccaDate,
+  Ee as useAniccaForm,
+  Oe as useAniccaUtils
+};