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

package/src/components/ui/info-block/info-block.tsx

@@ -0,0 +1,47 @@
+/**
+ * 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 type { FC, ComponentProps } from 'react';
+import clsx from 'clsx';
+
+import styles from './info-block.module.css';
+import { Skeleton } from '../skeleton';
+import type { SkeletonProps } from '../skeleton';
+
+const Container: FC<ComponentProps<'div'>> = ({ className, ...props }) => {
+    return <div className={clsx(styles.container, className)} {...props} />;
+};
+
+const Row: FC<ComponentProps<'div'>> = ({ className, ...props }) => {
+    return <div className={clsx(styles.row, className)} {...props} />;
+};
+
+const Label: FC<ComponentProps<'span'>> = ({ className, ...props }) => {
+    return <span className={clsx(styles.label, className)} {...props} />;
+};
+
+const Value: FC<ComponentProps<'span'>> = ({ className, ...props }) => {
+    return <span className={clsx(styles.value, className)} {...props} />;
+};
+
+const LabelSkeleton: FC<SkeletonProps> = ({ width = 64, height = '1lh', ...props }) => {
+    return <Skeleton width={width} height={height} {...props} />;
+};
+
+const ValueSkeleton: FC<SkeletonProps> = ({ width = 80, height = '1lh', ...props }) => {
+    return <Skeleton width={width} height={height} {...props} />;
+};
+
+export const InfoBlock = {
+    Container,
+    Row,
+    Label,
+    Value,
+    LabelSkeleton,
+    ValueSkeleton,
+};

package/src/components/ui/input/index.ts

@@ -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';

package/src/components/ui/input/input.tsx

@@ -0,0 +1,194 @@
+/**
+ * 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 type { FC, ReactNode, ComponentProps, ChangeEvent } from 'react';
+import clsx from 'clsx';
+
+import { Skeleton } from '../skeleton';
+import { useInputResize } from './use-input-resize';
+import type { InputSize } from './use-input-resize';
+import styles from './input.module.css';
+
+type InputVariant = 'default' | 'unstyled';
+
+interface InputContextProps {
+    size: InputSize;
+    variant: InputVariant;
+    disabled?: boolean;
+    error?: boolean;
+    loading?: boolean;
+    resizable?: boolean;
+}
+
+const InputContext = createContext<InputContextProps | undefined>(undefined);
+
+const useInputContext = () => {
+    const context = useContext(InputContext);
+    if (!context) {
+        throw new Error('Input components must be used within an Input.Container');
+    }
+    return context;
+};
+
+export interface InputContainerProps extends ComponentProps<'div'> {
+    size?: InputSize;
+    variant?: InputVariant;
+    disabled?: boolean;
+    error?: boolean;
+    loading?: boolean;
+    resizable?: boolean;
+    children: ReactNode;
+}
+
+const Container: FC<InputContainerProps> = ({
+    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 (
+        <InputContext.Provider value={contextValue}>
+            <div
+                className={clsx(
+                    styles.container,
+                    styles[`variant-${variant}`],
+                    disabled && styles.disabled,
+                    error && styles.error,
+                    loading && styles.loading,
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        </InputContext.Provider>
+    );
+};
+
+export interface InputHeaderProps extends ComponentProps<'div'> {
+    children: ReactNode;
+}
+
+const Header: FC<InputHeaderProps> = ({ className, children, ...props }) => (
+    <div className={clsx(styles.header, className)} {...props}>
+        {children}
+    </div>
+);
+
+const Title: FC<ComponentProps<'span'>> = ({ className, children, ...props }) => (
+    <span className={clsx(styles.title, className)} {...props}>
+        {children}
+    </span>
+);
+
+export interface InputFieldProps extends ComponentProps<'div'> {
+    children: ReactNode;
+}
+
+const Field: FC<InputFieldProps> = ({ className, children, ...props }) => (
+    <div className={clsx(styles.field, className)} {...props}>
+        {children}
+    </div>
+);
+
+export interface InputSlotProps extends ComponentProps<'div'> {
+    side?: 'left' | 'right';
+}
+
+const Slot: FC<InputSlotProps> = ({ side, className, children, ...props }) => (
+    <div className={clsx(styles.slot, side === 'right' && styles.right, className)} {...props}>
+        {children}
+    </div>
+);
+
+export type InputControlProps = ComponentProps<'input'>;
+
+const InputControl: FC<InputControlProps> = ({ 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: ChangeEvent<HTMLInputElement>) => {
+        onChange?.(e);
+        adjustSize();
+    };
+
+    const text = String(props.value ?? props.defaultValue ?? '');
+
+    if (loading) {
+        const skeletonClass = styles[`inputSkeleton_${contextSize}`];
+
+        return (
+            <div className={clsx(styles.input, styles.inputSkeleton, skeletonClass, className)}>
+                <Skeleton width={75} height="70%" />
+            </div>
+        );
+    }
+
+    return (
+        <>
+            {resizable && (
+                <>
+                    {/* Measures actual text width at max (contextSize) font — source of truth for scaling */}
+                    <span
+                        ref={measureMaxRef}
+                        className={clsx(styles.inputMeasure, styles[`input_${contextSize}`])}
+                        aria-hidden
+                    >
+                        {text}
+                    </span>
+                    {/* Empty span — only used to read minFontSize from CSS variable via computed style */}
+                    <span ref={measureMinRef} className={clsx(styles.inputMeasure, styles.input_s)} aria-hidden />
+                </>
+            )}
+            <input
+                className={clsx(styles.input, styles[`input_${contextSize}`], className)}
+                style={resizeStyle}
+                disabled={disabled}
+                {...props}
+                ref={inputRef}
+                onChange={handleChange}
+            />
+        </>
+    );
+};
+
+const Caption: FC<ComponentProps<'span'>> = ({ className, children, ...props }) => {
+    const { error } = useInputContext();
+    return (
+        <span className={clsx(styles.caption, error && styles.errorText, className)} {...props}>
+            {children}
+        </span>
+    );
+};
+
+export const Input = Object.assign(Container, {
+    Container,
+    Header,
+    Title,
+    Field,
+    Slot,
+    Input: InputControl,
+    Caption,
+});

package/src/components/ui/input/use-input-resize.ts

@@ -0,0 +1,96 @@
+/**
+ * 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';
+import type { CSSProperties, RefObject } from 'react';
+
+export type InputSize = 's' | 'm' | 'l';
+
+export interface ResizeMetrics {
+    maxFontSize: number;
+    minFontSize: number;
+    lineHeightRatio: number;
+    parentFontSize: number;
+}
+
+export const readResizeMetrics = (
+    maxSpan: HTMLSpanElement,
+    minSpan: HTMLSpanElement,
+    input: HTMLInputElement,
+): ResizeMetrics => {
+    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),
+    };
+};
+
+interface UseInputResizeOptions {
+    resizable?: boolean;
+    contextSize: InputSize;
+    value?: string | number | readonly string[];
+}
+
+interface UseInputResizeResult {
+    inputRef: RefObject<HTMLInputElement | null>;
+    measureMaxRef: RefObject<HTMLSpanElement | null>;
+    measureMinRef: RefObject<HTMLSpanElement | null>;
+    resizeStyle: CSSProperties | undefined;
+    adjustSize: () => void;
+}
+
+export const useInputResize = ({ resizable, contextSize, value }: UseInputResizeOptions): UseInputResizeResult => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const measureMaxRef = useRef<HTMLSpanElement>(null);
+    const measureMinRef = useRef<HTMLSpanElement>(null);
+    const [fontSizeEm, setFontSizeEm] = useState<number | undefined>(undefined);
+    const lineHeightRatioRef = useRef<number>(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: CSSProperties | undefined =
+        resizable && fontSizeEm !== undefined
+            ? { fontSize: `${fontSizeEm}em`, lineHeight: lineHeightRatioRef.current }
+            : undefined;
+
+    return { inputRef, measureMaxRef, measureMinRef, resizeStyle, adjustSize };
+};

package/src/components/ui/logo/index.ts

@@ -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';

package/src/components/ui/logo/logo.tsx

@@ -0,0 +1,106 @@
+/**
+ * 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 type { ComponentPropsWithoutRef, ComponentRef } from 'react';
+import clsx from 'clsx';
+
+import { useImageLoadingStatus } from './use-image-loading-status';
+import type { ImageLoadingStatus } from './use-image-loading-status';
+import styles from './logo.module.css';
+
+interface LogoContextValue {
+    imageLoadingStatus: ImageLoadingStatus;
+    onImageLoadingStatusChange: (status: ImageLoadingStatus) => void;
+}
+
+const LogoContext = createContext<LogoContextValue | null>(null);
+
+const useLogoContext = (): LogoContextValue => {
+    const ctx = useContext(LogoContext);
+    if (!ctx) throw new Error('Logo compound components must be used within Logo.Root');
+    return ctx;
+};
+
+const LogoRoot = forwardRef<ComponentRef<'span'>, ComponentPropsWithoutRef<'span'>>(({ className, ...props }, ref) => {
+    const [imageLoadingStatus, setImageLoadingStatus] = useState<ImageLoadingStatus>('idle');
+
+    return (
+        <LogoContext.Provider value={{ imageLoadingStatus, onImageLoadingStatusChange: setImageLoadingStatus }}>
+            <span className={clsx(styles.logoRoot, className)} {...props} ref={ref} />
+        </LogoContext.Provider>
+    );
+});
+
+LogoRoot.displayName = 'LogoRoot';
+
+interface LogoImageProps extends ComponentPropsWithoutRef<'img'> {
+    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+}
+
+const LogoImage = forwardRef<ComponentRef<'img'>, LogoImageProps>(
+    ({ 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' ? (
+            <img className={clsx(styles.logoImage, className)} {...props} ref={ref} src={src} />
+        ) : null;
+    },
+);
+
+LogoImage.displayName = 'LogoImage';
+
+interface LogoFallbackProps extends ComponentPropsWithoutRef<'span'> {
+    delayMs?: number;
+}
+
+const LogoFallback = forwardRef<ComponentRef<'span'>, LogoFallbackProps>(({ 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' ? (
+        <span className={clsx(styles.logoFallback, className)} {...props} ref={ref} />
+    ) : null;
+});
+
+LogoFallback.displayName = 'LogoFallback';
+
+export interface LogoProps extends ComponentPropsWithoutRef<'span'> {
+    size?: number;
+    src?: string;
+    alt?: string;
+    fallback?: string;
+}
+
+export const Logo = forwardRef<ComponentRef<'span'>, LogoProps>(({ size = 30, src, alt, fallback, ...props }, ref) => {
+    return (
+        <LogoRoot ref={ref} style={{ width: size, height: size }} {...props}>
+            <LogoImage src={src} alt={alt} />
+
+            {(fallback || alt) && <LogoFallback delayMs={600}>{fallback ? fallback : alt?.[0]}</LogoFallback>}
+        </LogoRoot>
+    );
+});
+
+Logo.displayName = 'Logo';

package/src/components/ui/logo/use-image-loading-status.ts

@@ -0,0 +1,50 @@
+/**
+ * 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';
+
+export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+
+const resolveLoadingStatus = (image: HTMLImageElement | null, src?: string): ImageLoadingStatus => {
+    if (!image || !src) return 'idle';
+    if (image.src !== src) image.src = src;
+    return image.complete && image.naturalWidth > 0 ? 'loaded' : 'loading';
+};
+
+export const useImageLoadingStatus = (src: string | undefined): ImageLoadingStatus => {
+    const imageRef = useRef<HTMLImageElement | null>(null);
+
+    const getImage = (): HTMLImageElement | null => {
+        if (typeof window === 'undefined') return null;
+        if (!imageRef.current) imageRef.current = new window.Image();
+        return imageRef.current;
+    };
+
+    const [loadingStatus, setLoadingStatus] = useState<ImageLoadingStatus>(() => 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;
+};

package/src/components/ui/modal/index.ts

@@ -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';

package/src/components/ui/modal/modal.tsx

@@ -0,0 +1,57 @@
+/**
+ * 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 type { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+
+import { Dialog } from '../dialog';
+import { CloseIcon } from '../icons';
+import styles from './modal.module.css';
+
+export interface ModalProps {
+    /**
+     * Controlled open state.
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Modal title.
+     */
+    title?: string;
+    /**
+     * Modal content.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class name for the content container.
+     */
+    className?: string;
+}
+
+export const Modal: FC<ModalProps> = ({ open, onOpenChange, title, children, className }) => {
+    return (
+        <Dialog.Root open={open} onOpenChange={onOpenChange}>
+            <Dialog.Portal>
+                <Dialog.Overlay className={styles.overlay} onClick={() => onOpenChange?.(false)}>
+                    <Dialog.Content className={clsx(styles.content, className)} onClick={(e) => e.stopPropagation()}>
+                        <div className={styles.header}>
+                            {title && <Dialog.Title className={styles.title}>{title}</Dialog.Title>}
+                            <Dialog.Close className={styles.close} aria-label="Close">
+                                <CloseIcon size={12} />
+                            </Dialog.Close>
+                        </div>
+                        <div className={styles.body}>{children}</div>
+                    </Dialog.Content>
+                </Dialog.Overlay>
+            </Dialog.Portal>
+        </Dialog.Root>
+    );
+};

package/src/components/ui/select/index.ts

@@ -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 './select';