@ton/appkit-react 0.0.6-alpha.3 → 1.0.0-alpha.0

package/dist/esm/components/ui/icons/verified-icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULT_ICON_SIZE } from './types';
+export const VerifiedIcon = ({ size = DEFAULT_ICON_SIZE, ...props }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", ...props, children: _jsx("path", { fillRule: "evenodd", d: "M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }));
+//# sourceMappingURL=verified-icon.js.map

package/dist/esm/components/ui/icons/verified-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"verified-icon.js","sourceRoot":"","sources":["../../../../../src/components/ui/icons/verified-icon.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG5C,MAAM,CAAC,MAAM,YAAY,GAAkB,CAAC,EAAE,IAAI,GAAG,iBAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACnF,cACI,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,4BAA4B,iBACtB,MAAM,KACd,KAAK,YAET,eACI,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,iiBAAiiB,EACniB,QAAQ,EAAC,SAAS,GACpB,GACA,CACT,CAAC"}

package/dist/esm/components/ui/info-block/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export * from './info-block';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/ui/info-block/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/ui/info-block/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,cAAc,CAAC"}

package/dist/esm/components/ui/info-block/info-block.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styles from './info-block.module.css';
+import { Skeleton } from '../skeleton';
+const Container = ({ className, ...props }) => {
+    return _jsx("div", { className: clsx(styles.container, className), ...props });
+};
+const Row = ({ className, ...props }) => {
+    return _jsx("div", { className: clsx(styles.row, className), ...props });
+};
+const Label = ({ className, ...props }) => {
+    return _jsx("span", { className: clsx(styles.label, className), ...props });
+};
+const Value = ({ className, ...props }) => {
+    return _jsx("span", { className: clsx(styles.value, className), ...props });
+};
+const LabelSkeleton = ({ width = 64, height = '1lh', ...props }) => {
+    return _jsx(Skeleton, { width: width, height: height, ...props });
+};
+const ValueSkeleton = ({ width = 80, height = '1lh', ...props }) => {
+    return _jsx(Skeleton, { width: width, height: height, ...props });
+};
+export const InfoBlock = {
+    Container,
+    Row,
+    Label,
+    Value,
+    LabelSkeleton,
+    ValueSkeleton,
+};
+//# sourceMappingURL=info-block.js.map

package/dist/esm/components/ui/info-block/info-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-block.js","sourceRoot":"","sources":["../../../../../src/components/ui/info-block/info-block.tsx"],"names":[],"mappings":";AASA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,MAAM,SAAS,GAA8B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrE,OAAO,cAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AAC5E,CAAC,CAAC;AAEF,MAAM,GAAG,GAA8B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC/D,OAAO,cAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AACtE,CAAC,CAAC;AAEF,MAAM,KAAK,GAA+B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClE,OAAO,eAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,KAAK,GAA+B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClE,OAAO,eAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,aAAa,GAAsB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClF,OAAO,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,KAAM,KAAK,GAAI,CAAC;AACjE,CAAC,CAAC;AAEF,MAAM,aAAa,GAAsB,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClF,OAAO,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,KAAM,KAAK,GAAI,CAAC;AACjE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,SAAS;IACT,GAAG;IACH,KAAK;IACL,KAAK;IACL,aAAa;IACb,aAAa;CAChB,CAAC"}

package/dist/esm/components/ui/info-block/info-block.module.css

@@ -0,0 +1,30 @@
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  box-sizing: border-box;
+  padding: 16px 0;
+  border-radius: var(--ta-border-radius-l);
+}
+
+.row {
+  composes: bodyMedium from "../../../styles/typography.module.css";
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.label {
+  composes: bodyMedium from "../../../styles/typography.module.css";
+  color: var(--ta-color-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.value {
+  composes: bodyMedium from "../../../styles/typography.module.css";
+  color: var(--ta-color-text);
+  text-align: right;
+}

package/dist/esm/components/ui/input/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export * from './input';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/ui/input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/ui/input/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,SAAS,CAAC"}

package/dist/esm/components/ui/input/input.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { createContext, useContext, useMemo } from 'react';
+import clsx from 'clsx';
+import { Skeleton } from '../skeleton';
+import { useInputResize } from './use-input-resize';
+import styles from './input.module.css';
+const InputContext = createContext(undefined);
+const useInputContext = () => {
+    const context = useContext(InputContext);
+    if (!context) {
+        throw new Error('Input components must be used within an Input.Container');
+    }
+    return context;
+};
+const Container = ({ size = 'm', variant = 'default', disabled, error, loading, resizable, className, children, ...props }) => {
+    const contextValue = useMemo(() => ({ size, variant, disabled, error, loading, resizable }), [size, variant, disabled, error, loading, resizable]);
+    return (_jsx(InputContext.Provider, { value: contextValue, children: _jsx("div", { className: clsx(styles.container, styles[`variant-${variant}`], disabled && styles.disabled, error && styles.error, loading && styles.loading, className), ...props, children: children }) }));
+};
+const Header = ({ className, children, ...props }) => (_jsx("div", { className: clsx(styles.header, className), ...props, children: children }));
+const Title = ({ className, children, ...props }) => (_jsx("span", { className: clsx(styles.title, className), ...props, children: children }));
+const Field = ({ className, children, ...props }) => (_jsx("div", { className: clsx(styles.field, className), ...props, children: children }));
+const Slot = ({ side, className, children, ...props }) => (_jsx("div", { className: clsx(styles.slot, side === 'right' && styles.right, className), ...props, children: children }));
+const InputControl = ({ className, disabled: propsDisabled, onChange, ...props }) => {
+    const { size: contextSize, disabled: contextDisabled, loading, resizable } = useInputContext();
+    const disabled = propsDisabled || contextDisabled;
+    const { inputRef, measureMaxRef, measureMinRef, resizeStyle, adjustSize } = useInputResize({
+        resizable,
+        contextSize,
+        value: props.value,
+    });
+    const handleChange = (e) => {
+        onChange?.(e);
+        adjustSize();
+    };
+    const text = String(props.value ?? props.defaultValue ?? '');
+    if (loading) {
+        const skeletonClass = styles[`inputSkeleton_${contextSize}`];
+        return (_jsx("div", { className: clsx(styles.input, styles.inputSkeleton, skeletonClass, className), children: _jsx(Skeleton, { width: 75, height: "70%" }) }));
+    }
+    return (_jsxs(_Fragment, { children: [resizable && (_jsxs(_Fragment, { children: [_jsx("span", { ref: measureMaxRef, className: clsx(styles.inputMeasure, styles[`input_${contextSize}`]), "aria-hidden": true, children: text }), _jsx("span", { ref: measureMinRef, className: clsx(styles.inputMeasure, styles.input_s), "aria-hidden": true })] })), _jsx("input", { className: clsx(styles.input, styles[`input_${contextSize}`], className), style: resizeStyle, disabled: disabled, ...props, ref: inputRef, onChange: handleChange })] }));
+};
+const Caption = ({ className, children, ...props }) => {
+    const { error } = useInputContext();
+    return (_jsx("span", { className: clsx(styles.caption, error && styles.errorText, className), ...props, children: children }));
+};
+export const Input = Object.assign(Container, {
+    Container,
+    Header,
+    Title,
+    Field,
+    Slot,
+    Input: InputControl,
+    Caption,
+});
+//# sourceMappingURL=input.js.map

package/dist/esm/components/ui/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../src/components/ui/input/input.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/ui/input/input.module.css

@@ -0,0 +1,147 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 4px;
+}
+
+.title {
+  composes: bodyMedium from "../../../styles/typography.module.css";
+  color: var(--ta-color-text-secondary);
+}
+
+.field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--ta-color-background-secondary);
+  border: var(--ta-border-width-m) solid transparent;
+  border-radius: var(--ta-border-radius-l);
+  transition: border-color 0.2s;
+  overflow: hidden;
+  position: relative;
+}
+
+.field:focus-within {
+  border-color: var(--ta-color-primary);
+}
+
+/* Sizes */
+.field {
+  padding: 14px;
+}
+
+/* Variants */
+.variant-unstyled .field {
+  background: none;
+  border: none;
+  padding: 0;
+  min-height: unset;
+  border-radius: 0;
+}
+
+.variant-unstyled .field:focus-within {
+  background: none;
+  border: none;
+}
+
+/* States */
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.error .field {
+  border-color: var(--ta-color-error);
+}
+
+.input_s {
+  composes: inputS from "../../../styles/typography.module.css";
+}
+
+.input_m {
+  composes: inputM from "../../../styles/typography.module.css";
+}
+
+.input_l {
+  composes: inputL from "../../../styles/typography.module.css";
+}
+
+.inputSkeleton_s {
+  height: var(--ta-input-s-line-height);
+}
+
+.input_resize_m {
+  font-size: var(--ta-input-m-size);
+  font-weight: var(--ta-input-m-weight);
+}
+
+.input_resize_s {
+  font-size: var(--ta-input-s-size);
+  font-weight: var(--ta-input-s-weight);
+}
+
+.inputSkeleton_m {
+  height: var(--ta-input-m-line-height);
+}
+
+.inputSkeleton_l {
+  height: var(--ta-input-l-line-height);
+}
+
+/* Hidden spans used to measure text width at each size (same idea as Uniswap AmountInput) */
+.inputMeasure {
+  position: absolute;
+  visibility: hidden;
+  white-space: pre;
+  pointer-events: none;
+  font-family: var(--ta-font-family);
+}
+
+.input {
+  flex: 1;
+  min-width: 0;
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--ta-color-text);
+  font-family: var(--ta-font-family);
+  width: 100%;
+  padding: 0;
+}
+
+.input::placeholder {
+  color: var(--ta-color-text-secondary);
+  opacity: 0.6;
+}
+
+.inputSkeleton {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+.slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.caption {
+  composes: footnoteRegular from "../../../styles/typography.module.css";
+  padding: 0 4px;
+  color: var(--ta-color-text-secondary);
+}
+
+.errorText {
+  color: var(--ta-color-error);
+}

package/dist/esm/components/ui/input/use-input-resize.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useRef, useState, useLayoutEffect } from 'react';
+export const readResizeMetrics = (maxSpan, minSpan, input) => {
+    const maxStyle = getComputedStyle(maxSpan);
+    const maxFontSize = parseFloat(maxStyle.fontSize);
+    const lineHeightRatio = parseFloat(maxStyle.lineHeight) / maxFontSize;
+    return {
+        maxFontSize,
+        minFontSize: parseFloat(getComputedStyle(minSpan).fontSize),
+        lineHeightRatio,
+        parentFontSize: parseFloat(getComputedStyle(input.parentElement).fontSize),
+    };
+};
+export const useInputResize = ({ resizable, contextSize, value }) => {
+    const inputRef = useRef(null);
+    const measureMaxRef = useRef(null);
+    const measureMinRef = useRef(null);
+    const [fontSizeEm, setFontSizeEm] = useState(undefined);
+    const lineHeightRatioRef = useRef(1.25);
+    const adjustSize = () => {
+        if (!resizable || !inputRef.current || !measureMaxRef.current || !measureMinRef.current)
+            return;
+        const availableWidth = inputRef.current.clientWidth;
+        if (availableWidth === 0)
+            return;
+        const textWidth = measureMaxRef.current.offsetWidth;
+        const { maxFontSize, minFontSize, lineHeightRatio, parentFontSize } = readResizeMetrics(measureMaxRef.current, measureMinRef.current, inputRef.current);
+        const ratio = textWidth > 0 ? availableWidth / textWidth : 1;
+        const scaledPx = Math.min(maxFontSize, Math.max(minFontSize, maxFontSize * ratio));
+        setFontSizeEm(scaledPx / parentFontSize);
+        lineHeightRatioRef.current = lineHeightRatio;
+    };
+    // Re-measure when controlled value or context size changes
+    useLayoutEffect(adjustSize, [resizable, contextSize, value]);
+    // Re-measure on container resize (observe parent, not the input itself,
+    // to avoid feedback loop when font-size change triggers ResizeObserver)
+    useLayoutEffect(() => {
+        const parent = inputRef.current?.parentElement;
+        if (!resizable || !parent)
+            return;
+        const observer = new ResizeObserver(adjustSize);
+        observer.observe(parent);
+        return () => observer.disconnect();
+    }, [resizable, contextSize]);
+    const resizeStyle = resizable && fontSizeEm !== undefined
+        ? { fontSize: `${fontSizeEm}em`, lineHeight: lineHeightRatioRef.current }
+        : undefined;
+    return { inputRef, measureMaxRef, measureMinRef, resizeStyle, adjustSize };
+};
+//# sourceMappingURL=use-input-resize.js.map

package/dist/esm/components/ui/input/use-input-resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-resize.js","sourceRoot":"","sources":["../../../../../src/components/ui/input/use-input-resize.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/ui/logo/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export * from './logo';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/ui/logo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/ui/logo/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,QAAQ,CAAC"}

package/dist/esm/components/ui/logo/logo.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useState } from 'react';
+import clsx from 'clsx';
+import { useImageLoadingStatus } from './use-image-loading-status';
+import styles from './logo.module.css';
+const LogoContext = createContext(null);
+const useLogoContext = () => {
+    const ctx = useContext(LogoContext);
+    if (!ctx)
+        throw new Error('Logo compound components must be used within Logo.Root');
+    return ctx;
+};
+const LogoRoot = forwardRef(({ className, ...props }, ref) => {
+    const [imageLoadingStatus, setImageLoadingStatus] = useState('idle');
+    return (_jsx(LogoContext.Provider, { value: { imageLoadingStatus, onImageLoadingStatusChange: setImageLoadingStatus }, children: _jsx("span", { className: clsx(styles.logoRoot, className), ...props, ref: ref }) }));
+});
+LogoRoot.displayName = 'LogoRoot';
+const LogoImage = forwardRef(({ src, onLoadingStatusChange, className, ...props }, ref) => {
+    const context = useLogoContext();
+    const loadingStatus = useImageLoadingStatus(src);
+    useLayoutEffect(() => {
+        if (loadingStatus !== 'idle') {
+            onLoadingStatusChange?.(loadingStatus);
+            context.onImageLoadingStatusChange(loadingStatus);
+        }
+    }, [loadingStatus]);
+    return loadingStatus === 'loaded' ? (_jsx("img", { className: clsx(styles.logoImage, className), ...props, ref: ref, src: src })) : null;
+});
+LogoImage.displayName = 'LogoImage';
+const LogoFallback = forwardRef(({ delayMs, className, ...props }, ref) => {
+    const context = useLogoContext();
+    const [canRender, setCanRender] = useState(delayMs === undefined);
+    useEffect(() => {
+        if (delayMs !== undefined) {
+            const id = window.setTimeout(() => setCanRender(true), delayMs);
+            return () => window.clearTimeout(id);
+        }
+        return undefined;
+    }, [delayMs]);
+    return canRender && context.imageLoadingStatus !== 'loaded' ? (_jsx("span", { className: clsx(styles.logoFallback, className), ...props, ref: ref })) : null;
+});
+LogoFallback.displayName = 'LogoFallback';
+export const Logo = forwardRef(({ size = 30, src, alt, fallback, ...props }, ref) => {
+    return (_jsxs(LogoRoot, { ref: ref, style: { width: size, height: size }, ...props, children: [_jsx(LogoImage, { src: src, alt: alt }), (fallback || alt) && _jsx(LogoFallback, { delayMs: 600, children: fallback ? fallback : alt?.[0] })] }));
+});
+Logo.displayName = 'Logo';
+//# sourceMappingURL=logo.js.map

package/dist/esm/components/ui/logo/logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.js","sourceRoot":"","sources":["../../../../../src/components/ui/logo/logo.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/{circle-icon/circle-icon.module.css → ui/logo/logo.module.css}

@@ -1,4 +1,4 @@
-.avatarRoot {
+.logoRoot {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -8,24 +8,24 @@
 	width: 45px;
 	height: 45px;
 	border-radius: 100%;
-	background-color: var(--ta-color-block);
+	background-color: var(--ta-color-background);
 }
 
-.avatarImage {
+.logoImage {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 	border-radius: inherit;
 }
 
-.avatarFallback {
+.logoFallback {
 	width: 100%;
 	height: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background-color: white;
-	color: var(--ta-color-block-foreground);
+	background-color: var(--ta-color-background-tertiary);
+	color: var(--ta-color-text);
 	font-size: 15px;
 	line-height: 1;
 	font-weight: 500;

package/dist/esm/components/ui/logo/use-image-loading-status.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useLayoutEffect, useRef, useState } from 'react';
+const resolveLoadingStatus = (image, src) => {
+    if (!image || !src)
+        return 'idle';
+    if (image.src !== src)
+        image.src = src;
+    return image.complete && image.naturalWidth > 0 ? 'loaded' : 'loading';
+};
+export const useImageLoadingStatus = (src) => {
+    const imageRef = useRef(null);
+    const getImage = () => {
+        if (typeof window === 'undefined')
+            return null;
+        if (!imageRef.current)
+            imageRef.current = new window.Image();
+        return imageRef.current;
+    };
+    const [loadingStatus, setLoadingStatus] = useState(() => resolveLoadingStatus(getImage(), src));
+    useLayoutEffect(() => {
+        setLoadingStatus(resolveLoadingStatus(getImage(), src));
+    }, [src]);
+    useLayoutEffect(() => {
+        const image = getImage();
+        if (!image)
+            return;
+        const handleLoad = () => setLoadingStatus('loaded');
+        const handleError = () => setLoadingStatus('error');
+        image.addEventListener('load', handleLoad);
+        image.addEventListener('error', handleError);
+        return () => {
+            image.removeEventListener('load', handleLoad);
+            image.removeEventListener('error', handleError);
+        };
+    }, [src]);
+    return loadingStatus;
+};
+//# sourceMappingURL=use-image-loading-status.js.map

package/dist/esm/components/ui/logo/use-image-loading-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image-loading-status.js","sourceRoot":"","sources":["../../../../../src/components/ui/logo/use-image-loading-status.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI1D,MAAM,oBAAoB,GAAG,CAAC,KAA8B,EAAE,GAAY,EAAsB,EAAE;IAC9F,IAAI,CAAC,KAAK,IAAI,CAAC,GAAG;QAAE,OAAO,MAAM,CAAC;IAClC,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG;QAAE,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;IACvC,OAAO,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,GAAuB,EAAsB,EAAE;IACjF,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG,GAA4B,EAAE;QAC3C,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO,IAAI,CAAC;QAC/C,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,QAAQ,CAAC,OAAO,GAAG,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;QAC7D,OAAO,QAAQ,CAAC,OAAO,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAqB,GAAG,EAAE,CAAC,oBAAoB,CAAC,QAAQ,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC;IAEpH,eAAe,CAAC,GAAG,EAAE;QACjB,gBAAgB,CAAC,oBAAoB,CAAC,QAAQ,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,eAAe,CAAC,GAAG,EAAE;QACjB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QACzB,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACpD,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAC3C,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAE7C,OAAO,GAAG,EAAE;YACR,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;YAC9C,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACpD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,aAAa,CAAC;AACzB,CAAC,CAAC"}

package/dist/esm/components/ui/modal/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export * from './modal';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/ui/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/ui/modal/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,SAAS,CAAC"}

package/dist/esm/components/ui/modal/modal.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Dialog } from '../dialog';
+import { CloseIcon } from '../icons';
+import styles from './modal.module.css';
+export const Modal = ({ open, onOpenChange, title, children, className }) => {
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsx(Dialog.Portal, { children: _jsx(Dialog.Overlay, { className: styles.overlay, onClick: () => onOpenChange?.(false), children: _jsxs(Dialog.Content, { className: clsx(styles.content, className), onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: styles.header, children: [title && _jsx(Dialog.Title, { className: styles.title, children: title }), _jsx(Dialog.Close, { className: styles.close, "aria-label": "Close", children: _jsx(CloseIcon, { size: 12 }) })] }), _jsx("div", { className: styles.body, children: children })] }) }) }) }));
+};
+//# sourceMappingURL=modal.js.map

package/dist/esm/components/ui/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../../src/components/ui/modal/modal.tsx"],"names":[],"mappings":";AASA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAyBxC,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IACxF,OAAO,CACH,KAAC,MAAM,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,YAC/C,KAAC,MAAM,CAAC,MAAM,cACV,KAAC,MAAM,CAAC,OAAO,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,YAC3E,MAAC,MAAM,CAAC,OAAO,IAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,aAC3F,eAAK,SAAS,EAAE,MAAM,CAAC,MAAM,aACxB,KAAK,IAAI,KAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAgB,EACvE,KAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAE,MAAM,CAAC,KAAK,gBAAa,OAAO,YACrD,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,GAAI,GACZ,IACb,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,IAAI,YAAG,QAAQ,GAAO,IAChC,GACJ,GACL,GACN,CACjB,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/ui/modal/modal.module.css

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.content {
+  background-color: var(--ta-color-background);
+  border-radius: var(--ta-border-radius-xl);
+  width: 100%;
+  max-width: 480px;
+  max-height: calc(100vh - 32px);
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  outline: none;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 20px 16px;
+}
+
+.title {
+  composes: title from "../../../styles/typography.module.css";
+  margin: 0;
+  color: var(--ta-color-text);
+}
+
+.close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--ta-border-radius-full);
+  border: none;
+  background-color: var(--ta-color-background-secondary);
+  color: var(--ta-color-text-secondary);
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+  padding: 0;
+}
+
+.close:hover {
+  opacity: 0.8;
+}
+
+.body {
+  composes: bodyRegular from "../../../styles/typography.module.css";
+  padding: 0 20px 24px;
+  overflow-y: auto;
+  color: var(--ta-color-text);
+}