@agg-market/ui 0.0.1

package/dist/chunk-J6L5BLKX.mjs

@@ -0,0 +1,136 @@
+import {
+  iconSizeClasses
+} from "./chunk-C4OI72SM.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn,
+  getMotionClassName
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/primitives/button/index.tsx
+import { useSdkUiConfig } from "@agg-market/hooks";
+
+// src/primitives/button/button.constants.ts
+var sizeClasses = {
+  xxs: cn("h-6 px-2.5 gap-1", "text-agg-xs leading-agg-4"),
+  xs: cn("h-7 px-3 gap-1", "text-agg-xs leading-agg-4"),
+  s: cn("h-8 px-4 gap-1.5", "text-agg-sm leading-agg-5"),
+  m: cn("h-9 px-5 gap-1.5", "text-agg-sm leading-agg-5"),
+  l: cn("h-10 px-6 gap-2", "text-agg-base leading-agg-6"),
+  xl: cn("h-11 px-7 gap-2", "text-agg-base leading-agg-6"),
+  xxl: cn("h-12 px-8 gap-2", "text-agg-base leading-agg-6")
+};
+var iconSizeClasses2 = {
+  xxs: iconSizeClasses.xs,
+  xs: iconSizeClasses.xs,
+  s: iconSizeClasses.s,
+  m: iconSizeClasses.s,
+  l: iconSizeClasses.s,
+  xl: iconSizeClasses.s,
+  xxl: iconSizeClasses.s
+};
+var iconSlotClasses = {
+  xxs: "[&_svg]:h-3 [&_svg]:w-3",
+  xs: "[&_svg]:h-3 [&_svg]:w-3",
+  s: "[&_svg]:h-4 [&_svg]:w-4",
+  m: "[&_svg]:h-4 [&_svg]:w-4",
+  l: "[&_svg]:h-4 [&_svg]:w-4",
+  xl: "[&_svg]:h-4 [&_svg]:w-4",
+  xxl: "[&_svg]:h-4 [&_svg]:w-4"
+};
+var variantClasses = {
+  primary: cn(
+    "bg-agg-primary text-agg-on-primary",
+    "hover:bg-agg-primary-hover",
+    "disabled:bg-agg-separator disabled:text-agg-on-primary",
+    "focus-visible:ring-agg-primary-hover"
+  ),
+  secondary: cn(
+    "border border-agg-separator bg-agg-secondary text-agg-foreground",
+    "hover:bg-agg-secondary-hover",
+    "disabled:bg-agg-secondary disabled:text-agg-muted-foreground disabled:border-agg-separator",
+    "focus-visible:ring-agg-separator"
+  ),
+  tertiary: cn(
+    "bg-transparent text-agg-foreground",
+    "hover:bg-agg-secondary-hover",
+    "disabled:bg-transparent disabled:text-agg-muted-foreground",
+    "focus-visible:ring-agg-separator"
+  )
+};
+var baseButtonClasses = cn(
+  "cursor-pointer disabled:cursor-not-allowed",
+  "inline-flex items-center justify-center rounded-agg-full font-agg-sans font-agg-bold text-center",
+  "whitespace-nowrap",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary"
+);
+
+// src/primitives/button/index.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Button = (_a) => {
+  var _b = _a, {
+    children,
+    variant = "primary",
+    size = "m",
+    isLoading = false,
+    disabled,
+    prefix,
+    suffix,
+    type = "button",
+    className,
+    "aria-label": ariaLabel
+  } = _b, other = __objRest(_b, [
+    "children",
+    "variant",
+    "size",
+    "isLoading",
+    "disabled",
+    "prefix",
+    "suffix",
+    "type",
+    "className",
+    "aria-label"
+  ]);
+  const { enableAnimations } = useSdkUiConfig();
+  const isDisabled = disabled || isLoading;
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      type,
+      className: cn(
+        baseButtonClasses,
+        getMotionClassName(enableAnimations, "transition-colors"),
+        sizeClasses[size],
+        iconSlotClasses[size],
+        variantClasses[variant],
+        className
+      ),
+      disabled: isDisabled,
+      "aria-busy": isLoading,
+      "aria-label": ariaLabel
+    }, other), {
+      children: isLoading ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "inline-block rounded-agg-full border-2 border-current border-r-transparent",
+            getMotionClassName(enableAnimations, "animate-spin"),
+            iconSizeClasses2[size]
+          ),
+          "aria-hidden": "true"
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        prefix != null ? prefix : null,
+        /* @__PURE__ */ jsx("span", { children }),
+        suffix != null ? suffix : null
+      ] })
+    })
+  );
+};
+Button.displayName = "Button";
+
+export {
+  Button
+};

package/dist/chunk-J7OETCZ7.mjs

@@ -0,0 +1,147 @@
+import {
+  defaultSettlementDifferencesTitle,
+  defaultSettlementSectionLabel,
+  getTradingVenueLabel
+} from "./chunk-KDBYDMYV.mjs";
+import {
+  Skeleton,
+  skeletonViews
+} from "./chunk-NFYS557L.mjs";
+import {
+  VenueLogo
+} from "./chunk-LY6474C4.mjs";
+import {
+  Icon
+} from "./chunk-DA6KZWSK.mjs";
+import {
+  Card
+} from "./chunk-YUIZZ6XE.mjs";
+import {
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/trading/settlement/index.tsx
+import { useEffect, useState } from "react";
+import { useLabels } from "@agg-market/hooks";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var getSettlementHeaderClassName = () => {
+  return "flex items-center justify-between gap-4";
+};
+var Settlement = ({
+  sectionLabel = defaultSettlementSectionLabel,
+  question,
+  differencesTitle = defaultSettlementDifferencesTitle,
+  differences,
+  venues,
+  defaultExpandedVenue,
+  expandedVenue,
+  isLoading = false,
+  onExpandedVenueChange,
+  onShowMore,
+  className
+}) => {
+  var _a, _b;
+  const labels = useLabels();
+  const resolvedSectionLabel = sectionLabel === defaultSettlementSectionLabel ? labels.trading.settlementSection : sectionLabel;
+  const resolvedDifferencesTitle = differencesTitle === defaultSettlementDifferencesTitle ? labels.trading.settlementDifferencesTitle : differencesTitle;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ariaLabel: labels.trading.settlementLoading,
+        className,
+        view: skeletonViews.settlement
+      }
+    );
+  }
+  const [internalExpandedVenue, setInternalExpandedVenue] = (
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useState((_b = defaultExpandedVenue != null ? defaultExpandedVenue : (_a = venues[0]) == null ? void 0 : _a.venue) != null ? _b : null)
+  );
+  useEffect(() => {
+    if (expandedVenue === void 0)
+      return;
+    setInternalExpandedVenue(expandedVenue);
+  }, [expandedVenue]);
+  const resolvedExpandedVenue = expandedVenue === void 0 ? internalExpandedVenue : expandedVenue;
+  const handleVenueClick = (venue) => {
+    const nextVenue = resolvedExpandedVenue === venue ? null : venue;
+    if (expandedVenue === void 0) {
+      setInternalExpandedVenue(nextVenue);
+    }
+    onExpandedVenueChange == null ? void 0 : onExpandedVenueChange(nextVenue);
+  };
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "gap-5 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: getSettlementHeaderClassName(), children: [
+          /* @__PURE__ */ jsx("p", { className: "text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground", children: resolvedSectionLabel }),
+          /* @__PURE__ */ jsx("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: question })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: resolvedDifferencesTitle }),
+          /* @__PURE__ */ jsx("ul", { className: "list-disc pl-5 text-agg-sm leading-agg-5 text-agg-foreground", children: differences.map((difference) => /* @__PURE__ */ jsx("li", { children: difference }, difference)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-agg-separator" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: venues.map((venue) => {
+          const venueLabel = getTradingVenueLabel(venue.venue, venue.label);
+          const isExpanded = resolvedExpandedVenue === venue.venue;
+          return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", isExpanded ? "gap-2" : "gap-0"), children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "flex items-center gap-2 text-left",
+                "aria-expanded": isExpanded,
+                "aria-label": labels.trading.settlementDetailsAria(venueLabel),
+                onClick: () => handleVenueClick(venue.venue),
+                children: [
+                  /* @__PURE__ */ jsx(VenueLogo, { venue: venue.venue, size: "s", ariaLabel: venueLabel }),
+                  /* @__PURE__ */ jsx("span", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: venueLabel }),
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: isExpanded ? "chevron-up" : "chevron-down",
+                      size: "s",
+                      className: "text-agg-foreground",
+                      color: "currentColor"
+                    }
+                  )
+                ]
+              }
+            ),
+            isExpanded ? /* @__PURE__ */ jsxs("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
+              venue.description,
+              venue.showMoreLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                " ",
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "font-agg-normal text-agg-foreground underline-offset-2 hover:underline",
+                    "aria-label": labels.trading.settlementShowMoreAria(
+                      venue.showMoreLabel,
+                      venueLabel
+                    ),
+                    onClick: () => onShowMore == null ? void 0 : onShowMore(venue.venue),
+                    children: venue.showMoreLabel
+                  }
+                )
+              ] }) : null
+            ] }) : null
+          ] }, venue.venue);
+        }) })
+      ]
+    }
+  );
+};
+Settlement.displayName = "Settlement";
+
+export {
+  Settlement
+};

package/dist/chunk-JLLMIPIX.mjs

@@ -0,0 +1,42 @@
+import {
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/primitives/number-value.tsx
+import { useMemo } from "react";
+import { useSdkUiConfig } from "@agg-market/hooks";
+import { jsx } from "react/jsx-runtime";
+var NumberValue = ({
+  value,
+  format = "number",
+  fallback = "\u2014",
+  className,
+  ariaLabel
+}) => {
+  const config = useSdkUiConfig();
+  const formatted = useMemo(() => {
+    if (value == null)
+      return fallback;
+    if (format === "date") {
+      if (value instanceof Date)
+        return config.formatDate(value);
+      return fallback;
+    }
+    if (typeof value !== "number")
+      return fallback;
+    if (format === "percent")
+      return config.formatPercent(value);
+    if (format === "currency")
+      return config.formatCurrency(value);
+    if (format === "compactCurrency") {
+      return config.formatCompactCurrency(value);
+    }
+    return config.formatNumber(value);
+  }, [config, fallback, format, value]);
+  return /* @__PURE__ */ jsx("span", { className: cn("font-agg-sans", className), "aria-label": ariaLabel, children: formatted });
+};
+NumberValue.displayName = "NumberValue";
+
+export {
+  NumberValue
+};