@tpc-mare/mare-ui-components-react 0.0.1

package/dist/shared/PanelMenu-5A9LgcGR.js

@@ -0,0 +1,123 @@
+import { jsx as a, jsxs as s, Fragment as u } from "react/jsx-runtime";
+import { useMemo as x } from "react";
+import { createTreeCollection as f, TreeView as n } from "@ark-ui/react/tree-view";
+import { b } from "./icons-_QeAcImG.js";
+const g = "mare:flex mare:flex-col mare:gap-1", v = "mare:flex mare:flex-col mare:gap-1", k = `
+	mare:group mare:flex mare:items-center mare:gap-2 mare:min-h-10 mare:px-3 mare:py-2
+	mare:rounded-menu-item mare:cursor-pointer mare:select-none mare:outline-none
+	mare:tpc-typography-body-s mare:text-default
+	mare:hover:bg-hover mare:ark-open:bg-accent-weak mare:ark-open:text-accent
+	mare:ark-disabled:text-disabled mare:ark-disabled:cursor-not-allowed mare:ark-disabled:pointer-events-none
+`, N = "mare:flex-1 mare:flex mare:items-center mare:gap-2", y = `
+	mare:flex mare:items-center mare:shrink-0 mare:text-default
+	mare:transition-transform mare:ark-open:rotate-180 mare:ark-open:text-accent
+`, C = `
+	mare:flex mare:flex-col mare:gap-1 mare:ps-7 mare:overflow-hidden mare:empty:hidden
+	mare:ark-open:[animation:mare-panel-menu-branch-open_150ms_ease-out]
+	mare:ark-closed:[animation:mare-panel-menu-branch-close_150ms_ease-out]
+`, _ = (e) => `
+	mare:flex mare:items-center mare:gap-2 mare:min-h-10 mare:px-3 mare:py-2
+	mare:rounded-menu-item mare:cursor-pointer mare:select-none mare:outline-none
+	mare:no-underline mare:text-inherit mare:tpc-typography-body-s
+	${e.active ? "mare:bg-accent-weak mare:text-accent" : "mare:text-default mare:hover:bg-hover"}
+	mare:ark-disabled:text-disabled mare:ark-disabled:cursor-not-allowed mare:ark-disabled:pointer-events-none
+`, d = "mare:flex-1 mare:flex mare:items-center mare:gap-2", w = "mare:flex mare:items-center mare:shrink-0 mare:[&>svg]:size-5";
+function i(e, t) {
+  if (t) return t(e);
+  const m = e.icon;
+  return /* @__PURE__ */ s(u, { children: [
+    m ? /* @__PURE__ */ a("span", { className: w, children: m }) : null,
+    /* @__PURE__ */ a("span", { children: e.label })
+  ] });
+}
+function p({
+  node: e,
+  indexPath: t,
+  renderItem: m
+}) {
+  if (e.items?.length)
+    return /* @__PURE__ */ a(
+      n.NodeProvider,
+      {
+        node: e,
+        indexPath: t,
+        children: /* @__PURE__ */ s(n.Branch, { className: v, children: [
+          /* @__PURE__ */ s(n.BranchControl, { className: k, children: [
+            /* @__PURE__ */ a(n.BranchText, { className: N, children: i(e, m) }),
+            /* @__PURE__ */ a(n.BranchIndicator, { className: y, children: /* @__PURE__ */ a(b, {}) })
+          ] }),
+          /* @__PURE__ */ a(n.BranchContent, { className: C, children: e.items.map((o, r) => /* @__PURE__ */ a(
+            p,
+            {
+              node: o,
+              indexPath: [...t, r],
+              renderItem: m
+            },
+            o.value
+          )) })
+        ] })
+      }
+    );
+  const l = e.href, c = _({ active: e.active });
+  return /* @__PURE__ */ a(
+    n.NodeProvider,
+    {
+      node: e,
+      indexPath: t,
+      children: l ? /* @__PURE__ */ a(
+        n.Item,
+        {
+          className: c,
+          asChild: !0,
+          children: /* @__PURE__ */ a(
+            "a",
+            {
+              href: l,
+              target: e.target,
+              children: /* @__PURE__ */ a("span", { className: d, children: i(e, m) })
+            }
+          )
+        }
+      ) : /* @__PURE__ */ a(n.Item, { className: c, children: /* @__PURE__ */ a("span", { className: d, children: i(e, m) }) })
+    }
+  );
+}
+function V({
+  items: e,
+  expandedValue: t,
+  defaultExpandedValue: m,
+  onExpandedChange: l,
+  renderItem: c
+}) {
+  const o = x(
+    () => f({
+      rootNode: { value: "__root__", label: "", items: e },
+      nodeToValue: (r) => r.value,
+      nodeToString: (r) => r.label,
+      nodeToChildren: (r) => r.items ?? [],
+      isNodeDisabled: (r) => !!r.disabled
+    }),
+    [e]
+  );
+  return /* @__PURE__ */ a(
+    n.Root,
+    {
+      collection: o,
+      expandedValue: t,
+      defaultExpandedValue: m,
+      onExpandedChange: (r) => l?.(r.expandedValue),
+      children: /* @__PURE__ */ a(n.Tree, { className: g, children: o.rootNode.items?.map((r, h) => /* @__PURE__ */ a(
+        p,
+        {
+          node: r,
+          indexPath: [h],
+          renderItem: c
+        },
+        r.value
+      )) })
+    }
+  );
+}
+export {
+  V as P
+};

package/dist/shared/ProgressSpinner-B-lrS-tu.js

@@ -0,0 +1,35 @@
+import { jsx as e } from "react/jsx-runtime";
+function n({
+  circleClass: r,
+  className: i
+}) {
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      className: `mare:inline-block mare:[animation:spin_2s_linear_infinite] ${i ?? ""}`,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ e(
+        "svg",
+        {
+          className: "mare:size-full",
+          viewBox: "0 0 50 50",
+          children: /* @__PURE__ */ e(
+            "circle",
+            {
+              className: `mare:fill-none mare:[stroke-dashoffset:0] mare:[animation:mare-spinner-dash_1.5s_ease-in-out_infinite] ${r ?? ""}`,
+              stroke: "var(--color-fg-default)",
+              cx: "25",
+              cy: "25",
+              r: "20",
+              strokeWidth: "4",
+              strokeLinecap: "round"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  n as P
+};

package/dist/shared/RadioGroup-lw27DCoV.js

@@ -0,0 +1,133 @@
+import { jsx as e, jsxs as k } from "react/jsx-runtime";
+import { RadioGroup as r } from "@ark-ui/react/radio-group";
+const g = `
+	mare:flex mare:gap-4
+	mare:ark-vertical:flex-col
+	mare:ark-horizontal:flex-row
+	mare:ark-disabled:cursor-default
+`, z = `
+	mare:relative mare:inline-flex mare:items-center mare:gap-2
+	mare:select-none mare:cursor-pointer
+	mare:ark-disabled:cursor-default
+	mare:data-size-small:gap-1.5
+	mare:data-size-medium:gap-2
+	mare:data-size-large:gap-2.5
+`, f = `
+	mare:relative mare:inline-flex mare:items-center mare:justify-center mare:shrink-0
+	mare:rounded-full mare:border mare:border-strong mare:bg-transparent
+	mare:shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+	mare:transition-[border-width,border-color] mare:duration-200
+	mare:overflow-hidden
+
+	mare:data-size-small:w-4.5 mare:data-size-small:h-4.5
+	mare:data-size-medium:w-6 mare:data-size-medium:h-6
+	mare:data-size-large:w-8 mare:data-size-large:h-8
+
+	mare:not-ark-disabled:hover:border-accent
+
+	mare:ark-checked:border-accent
+	mare:data-size-small:ark-checked:border-[6px]
+	mare:data-size-medium:ark-checked:border-[8px]
+	mare:data-size-large:ark-checked:border-[11px]
+	mare:not-ark-disabled:ark-checked:hover:border-accent-hover
+
+	mare:ark-disabled:border-disabled!
+
+	mare:ark-invalid:border-danger!
+`, v = `
+	mare:invisible mare:rounded-full mare:bg-[var(--color-fg-on-accent)]
+
+	mare:data-size-small:w-2 mare:data-size-small:h-2
+	mare:data-size-medium:w-2.5 mare:data-size-medium:h-2.5
+	mare:data-size-large:w-3 mare:data-size-large:h-3
+
+	mare:ark-checked:visible
+	mare:ark-disabled:ark-checked:bg-disabled!
+	mare:ark-invalid:ark-checked:bg-[var(--color-fg-on-danger)]!
+`, x = `
+	mare:text-default
+	mare:data-size-small:tpc-typography-body-s
+	mare:data-size-medium:tpc-typography-body-m
+	mare:data-size-large:tpc-typography-body-l
+	mare:ark-disabled:text-disabled
+`, y = `
+	mare:sr-only
+`;
+function I({
+  items: m,
+  value: l,
+  defaultValue: s,
+  onValueChange: i,
+  size: d = "small",
+  orientation: t = "vertical",
+  disabled: o = !1,
+  invalid: c = !1,
+  readOnly: n = !1,
+  required: b = !1,
+  name: u,
+  form: h,
+  id: p
+}) {
+  return /* @__PURE__ */ e(
+    r.Root,
+    {
+      value: l,
+      defaultValue: s,
+      onValueChange: (a) => {
+        a.value && i?.(a.value);
+      },
+      orientation: t,
+      disabled: o,
+      invalid: c,
+      readOnly: n,
+      required: b,
+      name: u,
+      form: h,
+      id: p,
+      className: g,
+      children: m.map((a) => /* @__PURE__ */ k(
+        r.Item,
+        {
+          value: a.value,
+          disabled: a.disabled,
+          className: z,
+          "data-size": d,
+          children: [
+            /* @__PURE__ */ e(
+              r.ItemControl,
+              {
+                className: f,
+                "data-size": d,
+                children: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: v,
+                    "data-size": d
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ e(
+              r.ItemText,
+              {
+                className: x,
+                "data-size": d,
+                children: a.label
+              }
+            ),
+            /* @__PURE__ */ e(
+              r.ItemHiddenInput,
+              {
+                className: y
+              }
+            )
+          ]
+        },
+        a.value
+      ))
+    }
+  );
+}
+export {
+  I as R
+};

package/dist/shared/SearchField-CuQ0cXOZ.js

@@ -0,0 +1,63 @@
+import { jsx as n } from "react/jsx-runtime";
+import { a as x, I as t } from "./IconField-Dh6j6SL1.js";
+import { P as I } from "./ProgressSpinner-B-lrS-tu.js";
+import { S as v, a as F } from "./icons-_QeAcImG.js";
+const L = (o) => !!o.value && o.clearable, P = (o) => o.loading && !o.disabled;
+function B({
+  value: o = "",
+  onValueChange: s,
+  loading: e = !1,
+  clearable: c = !1,
+  disabled: i = !1,
+  leftIcon: l = /* @__PURE__ */ n(v, {}),
+  clearIcon: u = /* @__PURE__ */ n(F, {}),
+  rightIcon: r,
+  onClear: S,
+  ...h
+}) {
+  const a = L({ value: o, clearable: c }), p = P({ loading: e, disabled: i }), C = !!r || c || e, f = /* @__PURE__ */ n(
+    x,
+    {
+      ...h,
+      value: o,
+      onValueChange: s,
+      disabled: i,
+      rounded: !0
+    }
+  );
+  if (!C)
+    return /* @__PURE__ */ n(
+      t,
+      {
+        icon: l,
+        position: "left",
+        disabled: i,
+        children: f
+      }
+    );
+  const d = r || (p ? /* @__PURE__ */ n(I, { className: "mare:size-5" }) : a ? u : null), m = !r && !p && a;
+  return /* @__PURE__ */ n(
+    t,
+    {
+      icon: l,
+      position: "left",
+      disabled: i,
+      children: /* @__PURE__ */ n(
+        t,
+        {
+          icon: d,
+          position: "right",
+          disabled: i,
+          onIconClick: m ? () => {
+            s?.(""), S?.();
+          } : void 0,
+          iconLabel: m ? "Clear" : void 0,
+          children: f
+        }
+      )
+    }
+  );
+}
+export {
+  B as S
+};

package/dist/shared/SelectField-D6OlgFYy.js

@@ -0,0 +1,118 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { useMemo as w } from "react";
+import { createListCollection as S, SelectRoot as y, SelectLabel as v, SelectControl as N, SelectTrigger as C, SelectContext as I, SelectValueText as T, SelectClearTrigger as j, SelectIndicator as _, SelectPositioner as z, SelectContent as D, SelectItem as L, SelectItemText as V, SelectItemIndicator as $ } from "@ark-ui/react/select";
+import { a as F, b as M, C as P } from "./icons-_QeAcImG.js";
+const R = {
+  small: "mare:h-10",
+  medium: "mare:h-12"
+}, q = {
+  small: "mare:tpc-typography-body-s",
+  medium: "mare:tpc-typography-body-m"
+}, A = (r) => `
+	mare:group mare:w-full mare:flex mare:items-center mare:justify-between mare:gap-3
+	${R[r]}
+	mare:px-3 mare:cursor-pointer
+	mare:rounded-input mare:border mare:border-strong mare:bg-default
+	mare:text-default ${q[r]}
+	mare:ark-open:outline-solid mare:ark-open:outline-2 mare:ark-open:outline-accent mare:ark-open:-outline-offset-2
+	mare:ark-disabled:text-disabled mare:ark-disabled:border-disabled-default mare:ark-disabled:cursor-not-allowed
+	mare:data-[invalid]:outline-solid mare:data-[invalid]:outline-2 mare:data-[invalid]:outline-danger mare:data-[invalid]:-outline-offset-2
+`, l = "mare:flex-auto mare:text-left mare:truncate mare:data-[placeholder-shown]:text-weak", B = "mare:flex mare:items-center mare:shrink-0 mare:text-lg mare:transition-transform mare:ark-open:rotate-180 mare:text-default", E = "mare:flex mare:items-center mare:shrink-0 mare:text-base mare:cursor-pointer mare:text-default mare:hover:text-weak", G = "mare:flex mare:items-center mare:shrink-0 mare:text-weak mare:[&>svg]:size-5", H = `
+	mare:flex mare:flex-col mare:gap-0.5 mare:p-1
+	mare:rounded-input mare:border mare:border-default mare:bg-raised
+	mare:shadow-[0_2px_6px_0_rgba(0,0,0,0.16)]
+	mare:max-h-72 mare:overflow-y-auto
+	mare:min-w-[var(--reference-width)]
+	mare:z-50
+`, J = `
+	mare:group/option mare:flex mare:items-center mare:justify-between mare:gap-2
+	mare:w-full mare:min-h-8 mare:py-2 mare:px-3 mare:cursor-pointer mare:rounded-menu-item
+	mare:tpc-typography-body-s mare:text-default
+	mare:ark-highlighted:bg-hover
+	mare:ark-selected:bg-accent-weak mare:ark-selected:text-accent
+	mare:ark-disabled:text-disabled mare:ark-disabled:cursor-not-allowed
+`, K = "mare:flex mare:items-center mare:text-accent", Q = "mare:tpc-typography-label-s mare:text-default mare:mb-1.5 mare:block";
+function Z({
+  value: r = null,
+  onValueChange: d,
+  options: t,
+  placeholder: o = "Select…",
+  size: u = "small",
+  disabled: p = !1,
+  invalid: f = !1,
+  clearable: h = !1,
+  label: n,
+  leadingIcon: s,
+  indicator: x,
+  clearIcon: b,
+  checkIcon: g,
+  renderValue: c,
+  renderOption: i
+}) {
+  const k = w(
+    () => S({
+      items: t,
+      itemToValue: (a) => a.value,
+      itemToString: (a) => a.label,
+      isItemDisabled: (a) => !!a.disabled
+    }),
+    [t]
+  );
+  return /* @__PURE__ */ m(
+    y,
+    {
+      collection: k,
+      value: r == null ? [] : [r],
+      disabled: p,
+      invalid: f,
+      onValueChange: (a) => d?.(a.value[0] ?? null),
+      children: [
+        n && /* @__PURE__ */ e(v, { className: Q, children: n }),
+        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ m(C, { className: A(u), children: [
+          s && /* @__PURE__ */ e("span", { className: G, children: s }),
+          c ? /* @__PURE__ */ e(I, { children: (a) => a.selectedItems.length > 0 ? /* @__PURE__ */ e("span", { className: l, children: c(
+            a.selectedItems[0]
+          ) }) : /* @__PURE__ */ e(
+            "span",
+            {
+              className: l,
+              style: {
+                color: "var(--color-fg-weak)"
+              },
+              children: o
+            }
+          ) }) : /* @__PURE__ */ e(
+            T,
+            {
+              className: l,
+              placeholder: o
+            }
+          ),
+          h && /* @__PURE__ */ e(j, { className: E, children: b ?? /* @__PURE__ */ e(F, {}) }),
+          /* @__PURE__ */ e(_, { className: B, children: x ?? /* @__PURE__ */ e(M, {}) })
+        ] }) }),
+        /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(D, { className: H, children: t.map((a) => /* @__PURE__ */ m(
+          L,
+          {
+            item: a,
+            className: J,
+            children: [
+              /* @__PURE__ */ e(V, { children: i ? i(a) : a.label }),
+              /* @__PURE__ */ e(
+                $,
+                {
+                  className: K,
+                  children: g ?? /* @__PURE__ */ e(P, {})
+                }
+              )
+            ]
+          },
+          a.value
+        )) }) })
+      ]
+    }
+  );
+}
+export {
+  Z as S
+};

package/dist/shared/Snackbar-C29nLHO9.js

@@ -0,0 +1,100 @@
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { Portal as g } from "@ark-ui/react/portal";
+import { Toaster as y, Toast as m, createToaster as u } from "@ark-ui/react/toast";
+import { B as b } from "./Button-AfMqNCme.js";
+const h = `
+	mare:group mare:w-full mare:min-w-[20rem] mare:max-w-[429px]
+	mare:relative mare:overflow-hidden mare:rounded-tpc-snackbar
+	mare:flex mare:items-center mare:gap-3 mare:p-3 mare:pr-4 mare:min-h-13
+	mare:shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.10),0px_4px_6px_-2px_rgba(0,0,0,0.05)]
+	mare:outline-none
+	mare:[translate:var(--x)_var(--y)] mare:[scale:var(--scale)]
+	mare:[z-index:var(--z-index)] mare:[height:var(--height)]
+	mare:[opacity:var(--opacity)] mare:[will-change:translate,opacity,scale]
+	mare:[transition:translate_400ms,scale_400ms,opacity_400ms,height_400ms]
+	mare:ark-closed:[transition:translate_400ms,scale_400ms,opacity_200ms]
+	mare:ark-type-contrast:bg-inverse mare:ark-type-contrast:text-on-inverse
+	mare:ark-type-secondary:bg-raised mare:ark-type-secondary:text-default mare:ark-type-secondary:border mare:ark-type-secondary:border-default
+	mare:ark-type-error:bg-danger mare:ark-type-error:text-on-danger
+`, k = `
+	mare:flex mare:max-w-13 mare:min-w-6 mare:aspect-square mare:shrink-0
+	mare:items-center mare:justify-center mare:rounded-tpc-container-s
+`, x = (a) => `
+	mare:tpc-typography-body-s ${a ? "" : "mare:ps-1"}
+`, f = "mare:ml-auto mare:shrink-0", _ = `
+	mare:absolute mare:bottom-0 mare:left-0 mare:h-1 mare:w-0
+	mare:[background-color:currentColor]
+	mare:[animation:mare-snackbar-progress_var(--mare-snackbar-life)_linear_forwards]
+`, v = {
+  "top-left": "top-start",
+  "top-center": "top",
+  "top-right": "top-end",
+  "bottom-left": "bottom-start",
+  "bottom-center": "bottom",
+  "bottom-right": "bottom-end"
+}, w = (a) => v[a], i = 3e3, c = (a) => Math.max(a ?? i, i), l = /* @__PURE__ */ new WeakMap(), B = {
+  error: [1, 2],
+  secondary: [3, 6],
+  contrast: [6, 8]
+}, T = (a, t) => {
+  const [s, e] = B[a];
+  return t ? s : e;
+};
+function I(a = {}) {
+  const t = u({
+    placement: w(a.placement ?? "bottom-center")
+  }), s = {
+    show(e) {
+      const r = e.severity ?? "contrast";
+      return t.create({
+        description: e.detail,
+        type: r,
+        priority: T(r, !!e.action),
+        duration: c(e.life),
+        action: e.action,
+        meta: { leading: e.leading, progressBar: e.progressBar }
+      });
+    },
+    dismiss(e) {
+      t.dismiss(e);
+    },
+    update(e, r) {
+      const n = t.getVisibleToasts().find((d) => d.id === e);
+      t.update(e, {
+        description: r.detail ?? n?.description,
+        type: r.severity ?? n?.type,
+        duration: r.life != null ? c(r.life) : n?.duration,
+        action: r.action ?? n?.action,
+        meta: {
+          leading: r.leading ?? n?.meta?.leading,
+          progressBar: r.progressBar ?? n?.meta?.progressBar
+        }
+      });
+    }
+  };
+  return l.set(s, t), s;
+}
+function j({ controller: a, portalContainer: t }) {
+  const s = l.get(a);
+  if (!s)
+    throw new Error("Snackbar: controller was not created by createSnackbar().");
+  return /* @__PURE__ */ o(g, { container: t, children: /* @__PURE__ */ o(y, { toaster: s, children: (e) => {
+    const r = e.meta?.leading, n = !!e.meta?.progressBar;
+    return /* @__PURE__ */ p(m.Root, { className: h, children: [
+      r ? /* @__PURE__ */ o("div", { className: k, children: r }) : null,
+      /* @__PURE__ */ o(m.Description, { className: x(!!r), children: e.description }),
+      e.action ? /* @__PURE__ */ o("div", { className: f, children: /* @__PURE__ */ o(m.ActionTrigger, { asChild: !0, children: /* @__PURE__ */ o(b, { severity: "ghost", link: !0, size: "xsmall", children: e.action.label }) }) }) : null,
+      n ? /* @__PURE__ */ o(
+        "div",
+        {
+          className: _,
+          style: { "--mare-snackbar-life": `${e.duration}ms` }
+        }
+      ) : null
+    ] }, e.id);
+  } }) });
+}
+export {
+  j as S,
+  I as c
+};

package/dist/shared/Stepper-BGKHXl-b.js

@@ -0,0 +1,110 @@
+import { jsxs as m, jsx as e, Fragment as g } from "react/jsx-runtime";
+import { Steps as a } from "@ark-ui/react/steps";
+import { C as k, c as b, d as v } from "./icons-_QeAcImG.js";
+const y = "mare:flex mare:ark-horizontal:flex-col mare:ark-vertical:flex-row mare:gap-4 mare:w-full", N = `
+	mare:hidden mare:sm:flex mare:gap-2 mare:overflow-x-auto
+	mare:ark-horizontal:flex-row mare:ark-horizontal:items-center mare:ark-horizontal:justify-between
+	mare:ark-vertical:flex-col mare:ark-vertical:items-start
+`, w = "mare:relative mare:flex mare:items-center mare:ark-vertical:items-start mare:gap-3 mare:flex-1 mare:last:flex-none", j = `
+	mare:group mare:flex mare:items-center mare:gap-3 mare:bg-transparent mare:border-none
+	mare:text-left mare:cursor-pointer mare:rounded-md mare:outline-none
+	mare:disabled:cursor-not-allowed mare:disabled:opacity-50
+`, z = (t) => `
+	mare:group mare:flex mare:items-center mare:justify-center mare:shrink-0 mare:relative
+	mare:size-8 mare:rounded-full mare:tpc-typography-label-s
+	mare:ark-incomplete:bg-neutral-weak mare:ark-incomplete:text-weak
+	mare:ark-current:bg-accent mare:ark-current:text-on-accent
+	${t === "strong" ? "mare:ark-complete:bg-accent mare:ark-complete:text-on-accent" : "mare:ark-complete:bg-accent-weak mare:ark-complete:text-accent"}
+`, C = "mare:flex mare:items-center mare:justify-center mare:[&>svg]:size-4", S = "mare:flex mare:items-center mare:justify-center mare:group-[[data-complete]]:hidden", I = "mare:hidden mare:group-[[data-complete]]:flex mare:items-center mare:justify-center mare:absolute mare:inset-0 mare:[&>svg]:size-4", T = `
+	mare:flex-1 mare:h-[1.5px] mare:bg-neutral-weak mare:transition-colors mare:duration-300
+	mare:ark-complete:bg-accent
+	mare:ark-vertical:absolute mare:ark-vertical:flex-none mare:ark-vertical:w-[1.5px] mare:ark-vertical:h-auto
+	mare:ark-vertical:top-8 mare:ark-vertical:bottom-[-0.5rem] mare:ark-vertical:start-[calc(1rem-0.75px)]
+`, L = "mare:flex mare:flex-col mare:items-start mare:gap-0.5", R = "mare:tpc-typography-label-s mare:text-default mare:group-[[data-incomplete]]:text-weak", B = "mare:block mare:tpc-typography-body-xs mare:text-weak", F = `
+	mare:p-4 mare:min-h-24 mare:rounded-input mare:border mare:border-default
+	mare:bg-default mare:text-default mare:tpc-typography-body-s
+`, M = `
+	mare:flex mare:sm:hidden mare:items-center mare:justify-between mare:gap-3
+	mare:px-3 mare:py-2 mare:rounded-input mare:border mare:border-default mare:bg-default
+`, P = "mare:flex-1 mare:text-center mare:truncate mare:tpc-typography-body-s mare:text-default", c = `
+	mare:flex mare:items-center mare:justify-center mare:size-8 mare:rounded-full mare:text-default
+	mare:hover:bg-hover mare:disabled:opacity-40 mare:disabled:cursor-not-allowed mare:disabled:pointer-events-none
+`;
+function $({ items: t }) {
+  return /* @__PURE__ */ m("div", { className: M, children: [
+    /* @__PURE__ */ e(a.PrevTrigger, { className: c, children: /* @__PURE__ */ e(b, {}) }),
+    /* @__PURE__ */ e(a.Context, { children: (n) => /* @__PURE__ */ m("span", { className: P, children: [
+      t[n.value]?.title,
+      " · ",
+      n.value + 1,
+      "/",
+      n.count
+    ] }) }),
+    /* @__PURE__ */ e(a.NextTrigger, { className: c, children: /* @__PURE__ */ e(v, {}) })
+  ] });
+}
+function E({
+  items: t,
+  step: n,
+  defaultStep: o,
+  onStepChange: s,
+  onStepComplete: i,
+  linear: d = !1,
+  orientation: p = "horizontal",
+  indicatorVariant: u = "default",
+  isStepValid: f,
+  isStepSkippable: h
+}) {
+  const x = z(u);
+  return /* @__PURE__ */ m(
+    a.Root,
+    {
+      className: y,
+      count: t.length,
+      step: n,
+      defaultStep: o,
+      linear: d,
+      orientation: p,
+      isStepValid: f,
+      isStepSkippable: h,
+      onStepChange: (r) => s?.(r.step),
+      onStepComplete: i,
+      children: [
+        /* @__PURE__ */ e(a.List, { className: N, children: t.map((r, l) => /* @__PURE__ */ m(
+          a.Item,
+          {
+            index: l,
+            className: w,
+            children: [
+              /* @__PURE__ */ m(a.Trigger, { className: j, children: [
+                /* @__PURE__ */ e(a.Indicator, { className: x, children: r.icon ? /* @__PURE__ */ e("span", { className: C, children: r.icon }) : /* @__PURE__ */ m(g, { children: [
+                  /* @__PURE__ */ e("span", { className: I, children: /* @__PURE__ */ e(k, {}) }),
+                  /* @__PURE__ */ e("span", { className: S, children: l + 1 })
+                ] }) }),
+                /* @__PURE__ */ m("span", { className: L, children: [
+                  /* @__PURE__ */ e("span", { className: R, children: r.title }),
+                  r.description && /* @__PURE__ */ e("span", { className: B, children: r.description })
+                ] })
+              ] }),
+              /* @__PURE__ */ e(a.Separator, { className: T })
+            ]
+          },
+          l
+        )) }),
+        /* @__PURE__ */ e($, { items: t }),
+        t.map((r, l) => /* @__PURE__ */ e(
+          a.Content,
+          {
+            index: l,
+            className: F,
+            children: r.content
+          },
+          l
+        ))
+      ]
+    }
+  );
+}
+export {
+  E as S
+};