@agg-market/ui 7.0.0 → 8.0.0

package/dist/trading.mjs

@@ -29,10 +29,8 @@ import {
   getTradingSlippageLabel,
   getTradingValueLabel,
   getTradingVenueLabel
-} from "./chunk-KQKLLL4D.mjs";
-import "./chunk-OAJBTVZT.mjs";
-import "./chunk-EERL6BZF.mjs";
-import "./chunk-MUB7NYWZ.mjs";
+} from "./chunk-JE4MV5RL.mjs";
+import "./chunk-WKY3IN52.mjs";
 export {
   PlaceOrder,
   Settlement,

package/dist/types/primitives/icon/index.d.mts

@@ -23,6 +23,7 @@ import { ErrorFilledIcon } from "./svg/error-filled";
 import { ExternalLinkIcon } from "./svg/external-link";
 import { EthereumIcon } from "./svg/ethereum";
 import { GoogleIcon } from "./svg/google";
+import { ImageIcon } from "./svg/image";
 import { InfoIcon } from "./svg/info";
 import { iconNames } from "./registry";
 import { LinkAccountsIcon } from "./svg/link-accounts";
@@ -50,4 +51,4 @@ export declare const Icon: {
     ({ name, color, size, className, style, ...props }: IconProps): JSX.Element;
     displayName: string;
 };
-export { AppleIcon, ArrowTrendUpIcon, ArrowsToDotIcon, BankIcon, BestPricesIcon, BoltIcon, CheckCircleIcon, ChartCandlestickIcon, ChartLineIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CopyIcon, CreateAccountIcon, CreditCardIcon, DisconnectIcon, DotsHorizontalIcon, DocumentIcon, DownloadIcon, ErrorFilledIcon, EthereumIcon, ExternalLinkIcon, GoogleIcon, iconNames, InfoIcon, LinkAccountsIcon, PencilIcon, PlaySquareIcon, ProfileIcon, RevenueAltIcon, SearchIcon, ShieldTrustIcon, SolanaIcon, StayInControlIcon, TriangleDownIcon, TriangleUpFilledIcon, TriangleUpIcon, UploadIcon, WalletAvatarIcon, WalletIcon, WarningFilledIcon, WarningIcon, };
+export { AppleIcon, ArrowTrendUpIcon, ArrowsToDotIcon, BankIcon, BestPricesIcon, BoltIcon, CheckCircleIcon, ChartCandlestickIcon, ChartLineIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CopyIcon, CreateAccountIcon, CreditCardIcon, DisconnectIcon, DotsHorizontalIcon, DocumentIcon, DownloadIcon, ErrorFilledIcon, EthereumIcon, ExternalLinkIcon, GoogleIcon, iconNames, ImageIcon, InfoIcon, LinkAccountsIcon, PencilIcon, PlaySquareIcon, ProfileIcon, RevenueAltIcon, SearchIcon, ShieldTrustIcon, SolanaIcon, StayInControlIcon, TriangleDownIcon, TriangleUpFilledIcon, TriangleUpIcon, UploadIcon, WalletAvatarIcon, WalletIcon, WarningFilledIcon, WarningIcon, };

package/dist/types/primitives/icon/index.d.ts

@@ -23,6 +23,7 @@ import { ErrorFilledIcon } from "./svg/error-filled";
 import { ExternalLinkIcon } from "./svg/external-link";
 import { EthereumIcon } from "./svg/ethereum";
 import { GoogleIcon } from "./svg/google";
+import { ImageIcon } from "./svg/image";
 import { InfoIcon } from "./svg/info";
 import { iconNames } from "./registry";
 import { LinkAccountsIcon } from "./svg/link-accounts";
@@ -50,4 +51,4 @@ export declare const Icon: {
     ({ name, color, size, className, style, ...props }: IconProps): JSX.Element;
     displayName: string;
 };
-export { AppleIcon, ArrowTrendUpIcon, ArrowsToDotIcon, BankIcon, BestPricesIcon, BoltIcon, CheckCircleIcon, ChartCandlestickIcon, ChartLineIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CopyIcon, CreateAccountIcon, CreditCardIcon, DisconnectIcon, DotsHorizontalIcon, DocumentIcon, DownloadIcon, ErrorFilledIcon, EthereumIcon, ExternalLinkIcon, GoogleIcon, iconNames, InfoIcon, LinkAccountsIcon, PencilIcon, PlaySquareIcon, ProfileIcon, RevenueAltIcon, SearchIcon, ShieldTrustIcon, SolanaIcon, StayInControlIcon, TriangleDownIcon, TriangleUpFilledIcon, TriangleUpIcon, UploadIcon, WalletAvatarIcon, WalletIcon, WarningFilledIcon, WarningIcon, };
+export { AppleIcon, ArrowTrendUpIcon, ArrowsToDotIcon, BankIcon, BestPricesIcon, BoltIcon, CheckCircleIcon, ChartCandlestickIcon, ChartLineIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CopyIcon, CreateAccountIcon, CreditCardIcon, DisconnectIcon, DotsHorizontalIcon, DocumentIcon, DownloadIcon, ErrorFilledIcon, EthereumIcon, ExternalLinkIcon, GoogleIcon, iconNames, ImageIcon, InfoIcon, LinkAccountsIcon, PencilIcon, PlaySquareIcon, ProfileIcon, RevenueAltIcon, SearchIcon, ShieldTrustIcon, SolanaIcon, StayInControlIcon, TriangleDownIcon, TriangleUpFilledIcon, TriangleUpIcon, UploadIcon, WalletAvatarIcon, WalletIcon, WarningFilledIcon, WarningIcon, };

package/dist/types/primitives/icon/registry.d.mts

@@ -112,6 +112,10 @@ export declare const iconRegistry: {
         ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
         displayName: string;
     };
+    readonly image: {
+        ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
+        displayName: string;
+    };
     readonly info: {
         ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
         displayName: string;

package/dist/types/primitives/icon/registry.d.ts

@@ -112,6 +112,10 @@ export declare const iconRegistry: {
         ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
         displayName: string;
     };
+    readonly image: {
+        ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
+        displayName: string;
+    };
     readonly info: {
         ({ title, className, ...props }: import("./types").IconSvgProps): JSX.Element;
         displayName: string;

package/dist/types/primitives/icon/svg/image.d.mts

@@ -0,0 +1,5 @@
+import type { IconSvgProps } from "../types";
+export declare const ImageIcon: {
+    ({ title, className, ...props }: IconSvgProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/primitives/icon/svg/image.d.ts

@@ -0,0 +1,5 @@
+import type { IconSvgProps } from "../types";
+export declare const ImageIcon: {
+    ({ title, className, ...props }: IconSvgProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/primitives/index.d.mts

@@ -16,3 +16,4 @@ export * from "./search";
 export * from "./state-message";
 export * from "./tabs";
 export * from "./modal";
+export * from "./remote-image";

package/dist/types/primitives/index.d.ts

@@ -16,3 +16,4 @@ export * from "./search";
 export * from "./state-message";
 export * from "./tabs";
 export * from "./modal";
+export * from "./remote-image";

package/dist/types/primitives/remote-image/index.d.mts

@@ -0,0 +1,6 @@
+import type { RemoteImageProps, RemoteImageStatus } from "./remote-image.types";
+export type { RemoteImageProps, RemoteImageStatus };
+export declare const RemoteImage: {
+    ({ src, alt, title, className, classNames, width, height, onClick, ariaLabel, }: RemoteImageProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/primitives/remote-image/index.d.ts

@@ -0,0 +1,6 @@
+import type { RemoteImageProps, RemoteImageStatus } from "./remote-image.types";
+export type { RemoteImageProps, RemoteImageStatus };
+export declare const RemoteImage: {
+    ({ src, alt, title, className, classNames, width, height, onClick, ariaLabel, }: RemoteImageProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/primitives/remote-image/remote-image.constants.d.mts

@@ -0,0 +1,4 @@
+export declare const containerClasses = "relative inline-flex shrink-0 overflow-hidden";
+export declare const imageClasses = "h-full w-full object-cover";
+export declare const skeletonClasses = "h-full w-full rounded-agg-lg";
+export declare const placeholderClasses = "flex h-full w-full items-center justify-center bg-agg-secondary-hover rounded-agg-lg";

package/dist/types/primitives/remote-image/remote-image.constants.d.ts

@@ -0,0 +1,4 @@
+export declare const containerClasses = "relative inline-flex shrink-0 overflow-hidden";
+export declare const imageClasses = "h-full w-full object-cover";
+export declare const skeletonClasses = "h-full w-full rounded-agg-lg";
+export declare const placeholderClasses = "flex h-full w-full items-center justify-center bg-agg-secondary-hover rounded-agg-lg";

package/dist/types/primitives/remote-image/remote-image.types.d.mts

@@ -0,0 +1,16 @@
+export type RemoteImageStatus = "loading" | "loaded" | "error";
+export type RemoteImageProps = {
+    src: string | undefined | null;
+    alt: string;
+    title?: string;
+    className?: string;
+    classNames?: {
+        root?: string;
+        image?: string;
+        placeholder?: string;
+    };
+    width?: number;
+    height?: number;
+    onClick?: () => void;
+    ariaLabel?: string;
+};

package/dist/types/primitives/remote-image/remote-image.types.d.ts

@@ -0,0 +1,16 @@
+export type RemoteImageStatus = "loading" | "loaded" | "error";
+export type RemoteImageProps = {
+    src: string | undefined | null;
+    alt: string;
+    title?: string;
+    className?: string;
+    classNames?: {
+        root?: string;
+        image?: string;
+        placeholder?: string;
+    };
+    width?: number;
+    height?: number;
+    onClick?: () => void;
+    ariaLabel?: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agg-market/ui",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "sideEffects": false,
   "license": "MIT",
   "main": "./dist/index.js",

package/dist/chunk-EEQPPN7N.mjs

@@ -1,214 +0,0 @@
-import {
-  AGG_ROOT_CLASS_NAME,
-  CloseIcon,
-  cn,
-  getMotionClassName
-} from "./chunk-MUB7NYWZ.mjs";
-
-// src/primitives/modal/index.tsx
-import * as Dialog from "@radix-ui/react-dialog";
-import { useSdkUiConfig, useLabels } from "@agg-market/hooks";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Modal = ({
-  open,
-  onOpenChange,
-  children,
-  "aria-label": _ariaLabel,
-  "aria-labelledby": _ariaLabelledBy
-}) => {
-  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, children });
-};
-var ModalContainer = ({
-  children,
-  maxWidth = "600px",
-  classNames,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy
-}) => {
-  const { rootClassName, enableAnimations } = useSdkUiConfig();
-  const overlayAnimationClassName = enableAnimations ? "motion-safe:data-[state=open]:animate-agg-modal-overlay-in motion-safe:data-[state=closed]:animate-agg-modal-overlay-out motion-reduce:animate-none" : void 0;
-  const panelAnimationClassName = enableAnimations ? "motion-safe:data-[state=open]:animate-agg-modal-panel-in motion-safe:data-[state=closed]:animate-agg-modal-panel-out motion-reduce:animate-none" : void 0;
-  return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx(
-      Dialog.Overlay,
-      {
-        className: cn(
-          "fixed inset-0 z-agg-overlay bg-agg-overlay",
-          overlayAnimationClassName,
-          classNames == null ? void 0 : classNames.overlay
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Dialog.Content,
-      {
-        className: cn(
-          "group/agg-modal",
-          "fixed inset-0 z-agg-modal",
-          "flex items-center justify-center p-4",
-          "sm:p-5",
-          classNames == null ? void 0 : classNames.content
-        ),
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        onCloseAutoFocus: (event) => {
-          event.preventDefault();
-        },
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              AGG_ROOT_CLASS_NAME,
-              rootClassName,
-              "flex w-full max-h-[calc(100%-2rem)] flex-col font-agg-sans",
-              "rounded-agg-2xl border border-agg-separator",
-              "bg-agg-secondary text-agg-foreground shadow-agg-modal",
-              "origin-bottom overflow-hidden will-change-transform",
-              panelAnimationClassName,
-              classNames == null ? void 0 : classNames.container
-            ),
-            "data-agg-animations": enableAnimations ? "true" : "false",
-            style: { maxWidth },
-            children
-          }
-        )
-      }
-    )
-  ] });
-};
-Modal.Container = ModalContainer;
-var ModalHeader = ({
-  title,
-  subtitle,
-  leftElement,
-  rightElement,
-  hideClose = false,
-  closeIcon,
-  classNames,
-  children,
-  hideBorder = false
-}) => {
-  const { enableAnimations } = useSdkUiConfig();
-  const labels = useLabels();
-  const defaultCloseIcon = /* @__PURE__ */ jsx(CloseIcon, { className: "h-6 w-6" });
-  const resolvedCloseIcon = closeIcon != null ? closeIcon : defaultCloseIcon;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "group/agg-modal-header",
-        "flex flex-col",
-        "sticky top-0 z-20",
-        "bg-agg-secondary",
-        hideBorder ? "border-0" : "border-b border-agg-separator",
-        subtitle ? "min-h-20" : "min-h-16",
-        classNames == null ? void 0 : classNames.root
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex items-center justify-between",
-              "px-4 py-4",
-              "sm:px-8 sm:py-6",
-              subtitle && "sm:py-4",
-              children ? "pb-3 sm:pb-4" : void 0,
-              classNames == null ? void 0 : classNames.container
-            ),
-            children: [
-              leftElement ? /* @__PURE__ */ jsx(Fragment, { children: leftElement }) : null,
-              /* @__PURE__ */ jsxs("div", { className: cn("max-w-[calc(100%-1rem)] flex-1", classNames == null ? void 0 : classNames.titleContainer), children: [
-                /* @__PURE__ */ jsx(
-                  Dialog.Title,
-                  {
-                    className: cn(
-                      !title && "invisible",
-                      "flex items-center text-agg-lg font-agg-bold leading-agg-6",
-                      "sm:text-agg-2xl sm:leading-agg-8",
-                      "text-ellipsis overflow-hidden whitespace-nowrap",
-                      classNames == null ? void 0 : classNames.title
-                    ),
-                    children: title
-                  }
-                ),
-                subtitle ? /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "text-agg-sm leading-agg-4 text-agg-muted-foreground sm:leading-agg-5",
-                      classNames == null ? void 0 : classNames.subtitle
-                    ),
-                    children: subtitle
-                  }
-                ) : null
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-6 items-center justify-end", children: [
-                rightElement ? /* @__PURE__ */ jsx(Fragment, { children: rightElement }) : null,
-                !hideClose && /* @__PURE__ */ jsx(
-                  Dialog.Close,
-                  {
-                    className: cn(
-                      "outline-0 flex items-center hover:cursor-pointer justify-center text-agg-foreground hover:text-agg-foreground/80",
-                      getMotionClassName(enableAnimations, "transition-colors"),
-                      classNames == null ? void 0 : classNames.close
-                    ),
-                    "aria-label": labels.common.close,
-                    children: resolvedCloseIcon
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        children ? /* @__PURE__ */ jsx("div", { children }) : null
-      ]
-    }
-  );
-};
-Modal.Header = ModalHeader;
-var ModalBody = ({ children, classNames }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "group/agg-modal-body",
-        "grow overflow-y-auto",
-        "px-4 py-6",
-        "sm:p-8",
-        "bg-agg-secondary text-agg-foreground",
-        classNames == null ? void 0 : classNames.root
-      ),
-      children
-    }
-  );
-};
-Modal.Body = ModalBody;
-var ModalFooter = ({
-  children,
-  classNames,
-  hideBorder = false
-}) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "group/agg-modal-footer",
-        "sticky bottom-0",
-        "bg-agg-secondary",
-        "flex h-[73px] w-full flex-row items-center justify-between gap-3",
-        "border-agg-separator p-4",
-        "sm:h-20 sm:justify-end sm:px-8 sm:py-5",
-        hideBorder ? "border-0" : "border-t",
-        classNames == null ? void 0 : classNames.root
-      ),
-      children
-    }
-  );
-};
-Modal.Footer = ModalFooter;
-Modal.displayName = "Modal";
-
-export {
-  Modal
-};