@agg-market/ui 0.0.1

package/dist/settlement.mjs

@@ -0,0 +1,15 @@
+import {
+  Settlement
+} from "./chunk-J7OETCZ7.mjs";
+import "./chunk-KDBYDMYV.mjs";
+import "./chunk-NFYS557L.mjs";
+import "./chunk-LY6474C4.mjs";
+import "./chunk-DA6KZWSK.mjs";
+import "./chunk-VYNVBJK6.mjs";
+import "./chunk-BNDFQPHF.mjs";
+import "./chunk-C4OI72SM.mjs";
+import "./chunk-YUIZZ6XE.mjs";
+import "./chunk-GC3QIIH7.mjs";
+export {
+  Settlement
+};

package/dist/skeleton.d.mts

@@ -0,0 +1,22 @@
+declare const skeletonViews: {
+    readonly eventListItem: "event-list-item";
+    readonly eventListItemDetails: "event-list-item-details";
+    readonly marketDetailsMinified: "market-details-minified";
+    readonly marketDetailsDetailed: "market-details-detailed";
+    readonly eventList: "event-list";
+    readonly settlement: "settlement";
+    readonly placeOrder: "place-order";
+};
+type SkeletonView = (typeof skeletonViews)[keyof typeof skeletonViews];
+type SkeletonProps = {
+    view: SkeletonView;
+    className?: string;
+    ariaLabel?: string;
+};
+
+declare const Skeleton: {
+    ({ view, className, ariaLabel }: SkeletonProps): JSX.Element;
+    displayName: string;
+};
+
+export { Skeleton, type SkeletonProps, type SkeletonView, skeletonViews };

package/dist/skeleton.d.ts

@@ -0,0 +1,22 @@
+declare const skeletonViews: {
+    readonly eventListItem: "event-list-item";
+    readonly eventListItemDetails: "event-list-item-details";
+    readonly marketDetailsMinified: "market-details-minified";
+    readonly marketDetailsDetailed: "market-details-detailed";
+    readonly eventList: "event-list";
+    readonly settlement: "settlement";
+    readonly placeOrder: "place-order";
+};
+type SkeletonView = (typeof skeletonViews)[keyof typeof skeletonViews];
+type SkeletonProps = {
+    view: SkeletonView;
+    className?: string;
+    ariaLabel?: string;
+};
+
+declare const Skeleton: {
+    ({ view, className, ariaLabel }: SkeletonProps): JSX.Element;
+    displayName: string;
+};
+
+export { Skeleton, type SkeletonProps, type SkeletonView, skeletonViews };

package/dist/skeleton.js

@@ -0,0 +1,523 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/primitives/skeleton/index.tsx
+var skeleton_exports = {};
+__export(skeleton_exports, {
+  Skeleton: () => Skeleton,
+  skeletonViews: () => skeletonViews
+});
+module.exports = __toCommonJS(skeleton_exports);
+
+// src/primitives/skeleton/views/event-list-skeleton-view.tsx
+var import_hooks4 = require("@agg-market/hooks");
+
+// src/shared/utils.ts
+var cn = (...values) => values.filter(Boolean).join(" ");
+var getMotionClassName = (enabled, ...values) => {
+  if (!enabled)
+    return void 0;
+  return cn(...values);
+};
+
+// src/primitives/skeleton/skeleton-block.tsx
+var import_hooks = require("@agg-market/hooks");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SkeletonBlock = ({ className }) => {
+  const { enableAnimations } = (0, import_hooks.useSdkUiConfig)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "bg-agg-separator",
+        getMotionClassName(enableAnimations, "animate-pulse"),
+        className
+      )
+    }
+  );
+};
+SkeletonBlock.displayName = "SkeletonBlock";
+
+// src/primitives/skeleton/views/event-list-item-skeleton-view.tsx
+var import_hooks3 = require("@agg-market/hooks");
+
+// src/primitives/card/index.tsx
+var import_hooks2 = require("@agg-market/hooks");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Card = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { enableAnimations } = (0, import_hooks2.useSdkUiConfig)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    __spreadValues({
+      className: cn(
+        "flex w-full flex-col font-agg-sans",
+        "rounded-agg-xl border border-agg-separator",
+        "bg-agg-secondary text-agg-foreground shadow-agg-card",
+        getMotionClassName(enableAnimations, "transition-shadow hover:shadow-agg-card-hover"),
+        className
+      )
+    }, props)
+  );
+};
+Card.displayName = "Card";
+
+// src/events/item/event-list-item.constants.ts
+var baseCardClassName = "gap-3 overflow-hidden p-5 w-full";
+
+// src/primitives/skeleton/views/event-list-item-skeleton-view.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var EventListItemSkeletonView = ({
+  className,
+  ariaLabel,
+  isStandalone = false
+}) => {
+  const labels = (0, import_hooks3.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    Card,
+    {
+      className: cn(baseCardClassName, className),
+      role: isStandalone ? "status" : void 0,
+      "aria-label": isStandalone ? ariaLabel != null ? ariaLabel : labels.eventItem.loading : void 0,
+      "aria-busy": isStandalone || void 0,
+      "aria-hidden": isStandalone ? void 0 : true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full items-start gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-10 w-10 rounded-agg-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-5 w-[82%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-5 w-[68%] rounded-agg-sm" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col gap-3", children: [0, 1].map((index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            className: "grid w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-4 w-10 rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-9 w-[101px] rounded-agg-full" })
+            ]
+          },
+          index
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between gap-2 text-agg-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-4 w-36 rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-4 w-20 rounded-agg-sm" })
+        ] })
+      ]
+    }
+  );
+};
+EventListItemSkeletonView.displayName = "EventListItemSkeletonView";
+
+// src/primitives/skeleton/views/event-list-skeleton-view.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var EventListSkeletonView = ({ className, ariaLabel }) => {
+  const labels = (0, import_hooks4.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "section",
+    {
+      className: cn("flex w-full flex-col gap-5", className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventList.loading("events"),
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { className: "flex w-full flex-col items-start justify-between gap-2 md:flex-row md:flex-nowrap md:items-center md:gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SkeletonBlock, { className: "h-7 w-40 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex max-w-full gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SkeletonBlock, { className: "h-10 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SkeletonBlock, { className: "h-10 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SkeletonBlock, { className: "h-10 w-24 rounded-agg-full" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "grid grid-cols-1 gap-5 md:grid-cols-3", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          EventListItemSkeletonView,
+          {
+            isStandalone: false,
+            className: "w-full min-w-0 max-w-none"
+          },
+          index
+        )) })
+      ]
+    }
+  );
+};
+EventListSkeletonView.displayName = "EventListSkeletonView";
+
+// src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
+var import_hooks5 = require("@agg-market/hooks");
+
+// src/events/item-details/event-list-item-details.constants.ts
+var detailsBaseCardClassName = "w-full overflow-hidden gap-6 p-5 md:gap-8 md:p-10";
+
+// src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var EventListItemDetailsSkeletonView = ({
+  className,
+  ariaLabel
+}) => {
+  const labels = (0, import_hooks5.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    Card,
+    {
+      className: cn(detailsBaseCardClassName, className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.loading,
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex w-full items-start gap-3 md:gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "size-10 rounded-agg-lg md:size-[60px]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-5 w-[82%] rounded-agg-sm md:h-7 md:w-[55%]" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-2 overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-10 w-full rounded-agg-full md:w-[220px]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-2 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-[300px] w-full rounded-agg-xl", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-full w-full rounded-agg-xl" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-5 w-40 rounded-agg-sm" })
+        ] })
+      ]
+    }
+  );
+};
+EventListItemDetailsSkeletonView.displayName = "EventListItemDetailsSkeletonView";
+
+// src/primitives/skeleton/views/market-details-skeleton-view.tsx
+var import_hooks6 = require("@agg-market/hooks");
+
+// src/events/market-details/market-details.constants.ts
+var marketDetailsBaseCardClassName = "w-full overflow-hidden rounded-agg-lg border border-agg-separator bg-agg-secondary text-agg-foreground shadow-none hover:shadow-none";
+
+// src/primitives/skeleton/views/market-details-skeleton-view.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var MarketDetailsSkeletonView = ({
+  className,
+  ariaLabel,
+  isDetailed
+}) => {
+  const labels = (0, import_hooks6.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    Card,
+    {
+      className: cn(marketDetailsBaseCardClassName, className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.loading,
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-3 p-4 md:px-5 md:py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "size-12 rounded-agg-lg md:size-[60px]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-6 w-40 rounded-agg-sm" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 w-28 rounded-agg-sm" })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-8 w-16 rounded-agg-sm" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-10 flex-1 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-10 flex-1 rounded-agg-full" })
+          ] })
+        ] }),
+        isDetailed ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex h-14 items-end", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-full w-full rounded-none" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-4 p-5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 w-12 rounded-agg-sm" }),
+              [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                "div",
+                {
+                  className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-2 rounded-agg-full" })
+                  ]
+                },
+                `ask-${index}`
+              ))
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 w-12 rounded-agg-sm" }),
+              [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                "div",
+                {
+                  className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-2 rounded-agg-full" })
+                  ]
+                },
+                `bid-${index}`
+              ))
+            ] })
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+};
+MarketDetailsSkeletonView.displayName = "MarketDetailsSkeletonView";
+
+// src/primitives/skeleton/views/place-order-skeleton-view.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var placeOrderCardClassName = "overflow-hidden rounded-agg-xl border border-agg-border bg-agg-secondary shadow-none hover:shadow-none";
+var ContentBody = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-start justify-between gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-12 w-12 shrink-0 rounded-agg-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-[92%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-[80%] rounded-agg-sm" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-6 w-6 rounded-agg-sm" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-28 rounded-agg-sm" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-11 items-end border-b border-agg-separator", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-[3px] w-12 rounded-t-agg-sm" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-28 rounded-agg-sm" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-9 w-28 rounded-agg-sm" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rounded-agg-lg border border-agg-trade-highlight-border bg-agg-trade-highlight-surface p-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-3", children: [
+        [0, 1].map((index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" })
+          ] }),
+          index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-px w-full bg-agg-trade-highlight-border" }) : null
+        ] }, `place-order-route-${index}`)),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "mx-auto h-5 w-40 rounded-agg-sm" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-36 rounded-agg-sm" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-24 rounded-agg-sm" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-9 w-36 rounded-agg-sm" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-[88%] self-center rounded-agg-sm" })
+  ] });
+};
+var PlaceOrderSkeletonView = ({
+  className,
+  ariaLabel
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: cn("w-full", className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : "Loading place order",
+      "aria-busy": true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-full items-end justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        Card,
+        {
+          className: cn(
+            placeOrderCardClassName,
+            "w-full max-w-[400px] rounded-t-agg-xl rounded-b-none border-b-0"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContentBody, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "border-t border-agg-separator bg-agg-secondary p-4", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-12 w-full rounded-agg-full" }) })
+          ]
+        }
+      ) })
+    }
+  );
+};
+PlaceOrderSkeletonView.displayName = "PlaceOrderSkeletonView";
+
+// src/primitives/skeleton/views/settlement-skeleton-view.tsx
+var import_hooks7 = require("@agg-market/hooks");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SettlementSkeletonView = ({
+  className,
+  ariaLabel
+}) => {
+  const labels = (0, import_hooks7.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    Card,
+    {
+      className: cn(
+        "gap-5 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none",
+        className
+      ),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.trading.settlementLoading,
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-1 md:flex-row md:items-center md:justify-between md:gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-20 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-5 w-full max-w-80 rounded-agg-sm" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-5 w-52 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-[88%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-[84%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-[80%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-[74%] rounded-agg-sm" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-4 rounded-agg-sm" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2 pl-6", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-full rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-[92%] rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-[34%] rounded-agg-sm" })
+            ] })
+          ] }),
+          [0, 1, 2].map((index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-5 w-20 rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-4 rounded-agg-sm" })
+          ] }, `settlement-venue-${index}`))
+        ] })
+      ]
+    }
+  );
+};
+SettlementSkeletonView.displayName = "SettlementSkeletonView";
+
+// src/primitives/skeleton/skeleton.types.ts
+var skeletonViews = {
+  eventListItem: "event-list-item",
+  eventListItemDetails: "event-list-item-details",
+  marketDetailsMinified: "market-details-minified",
+  marketDetailsDetailed: "market-details-detailed",
+  eventList: "event-list",
+  settlement: "settlement",
+  placeOrder: "place-order"
+};
+
+// src/primitives/skeleton/index.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Skeleton = ({ view, className, ariaLabel }) => {
+  if (view === skeletonViews.eventListItem) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EventListItemSkeletonView, { className, ariaLabel, isStandalone: true });
+  }
+  if (view === skeletonViews.eventListItemDetails) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EventListItemDetailsSkeletonView, { className, ariaLabel });
+  }
+  if (view === skeletonViews.marketDetailsMinified) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: false });
+  }
+  if (view === skeletonViews.marketDetailsDetailed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: true });
+  }
+  if (view === skeletonViews.settlement) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SettlementSkeletonView, { className, ariaLabel });
+  }
+  if (view === skeletonViews.placeOrder) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PlaceOrderSkeletonView, { className, ariaLabel });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EventListSkeletonView, { className, ariaLabel });
+};
+Skeleton.displayName = "Skeleton";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Skeleton,
+  skeletonViews
+});

package/dist/skeleton.mjs

@@ -0,0 +1,10 @@
+import {
+  Skeleton,
+  skeletonViews
+} from "./chunk-NFYS557L.mjs";
+import "./chunk-YUIZZ6XE.mjs";
+import "./chunk-GC3QIIH7.mjs";
+export {
+  Skeleton,
+  skeletonViews
+};