npm - @tomo-inc/tomo-ui - Versions diffs - 0.0.3 - Mend

@tomo-inc/tomo-ui 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/index.html +12 -0
package/package.json +45 -0
package/postcss.config.cjs +6 -0
package/project.json +7 -0
package/src/App.tsx +23 -0
package/src/components/button/index.tsx +2 -0
package/src/components/card/index.tsx +2 -0
package/src/components/chip/index.tsx +2 -0
package/src/components/image/index.ts +2 -0
package/src/components/index.ts +14 -0
package/src/components/input/index.tsx +37 -0
package/src/components/link/index.ts +2 -0
package/src/components/mfaTypeChoose/index.tsx +114 -0
package/src/components/modal/index.tsx +13 -0
package/src/components/modal/modal-body.tsx +10 -0
package/src/components/modal/modal-content.tsx +17 -0
package/src/components/modal/modal-context.tsx +12 -0
package/src/components/modal/modal-footer.tsx +12 -0
package/src/components/modal/modal-header.tsx +28 -0
package/src/components/modal/modal.tsx +152 -0
package/src/components/modal/use-disclosure.ts +46 -0
package/src/components/qr/index.tsx +94 -0
package/src/components/select/index.tsx +2 -0
package/src/components/skeleton/index.tsx +2 -0
package/src/components/spinner/index.tsx +2 -0
package/src/components/tabs/index.tsx +2 -0
package/src/components/toast/index.ts +2 -0
package/src/icons/back-icon.tsx +12 -0
package/src/icons/close-icon.tsx +23 -0
package/src/icons/copy-icon.tsx +22 -0
package/src/icons/down-icon.tsx +15 -0
package/src/icons/index.ts +13 -0
package/src/icons/more-icon.tsx +12 -0
package/src/icons/mydoge-icon.tsx +44 -0
package/src/icons/ok-icon.tsx +20 -0
package/src/icons/power-icon.tsx +15 -0
package/src/icons/right-arrow-icon.tsx +15 -0
package/src/icons/search-icon.tsx +19 -0
package/src/icons/search-outlined-icon.tsx +12 -0
package/src/icons/tomo-icon.tsx +30 -0
package/src/icons/twitter-icon.tsx +12 -0
package/src/index.ts +4 -0
package/src/main.tsx +9 -0
package/src/style.css +4 -0
package/src/tailwind/plugin.ts +177 -0
package/src/tailwind/tailwind.css +5 -0
package/src/theme-provider.tsx +19 -0
package/tsconfig.json +43 -0
package/vite.config.ts +10 -0

package/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tomo UI</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./src/main.tsx"></script>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,45 @@
+{
+  "name": "@tomo-inc/tomo-ui",
+  "version": "0.0.3",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./tailwind/tailwind.css": "./src/tailwind/tailwind.css"
+  },
+  "private": false,
+  "dependencies": {
+    "@heroui/react": "2.8.5",
+    "@heroui/toast": "^2.0.17",
+    "framer-motion": "^11.5.6",
+    "next-themes": "^0.4.6",
+    "qr-code-styling": "^1.9.2"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.13",
+    "@tailwindcss/postcss": "^4.1.13",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.17",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vite": "^7.2.4"
+  },
+  "scripts": {
+    "dev": "vite"
+  }
+}

package/postcss.config.cjs ADDED Viewed

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+    autoprefixer: {},
+  },
+};

package/project.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "name": "tomo-ui",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "uikits/tomo-ui/src",
+  "projectType": "library",
+  "tags": ["scope:uikit", "type:tomo-uikit"]
+}

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import { QRCodeComponent } from "./components";
+import { Button } from "./components/button";
+import { Input, NumberInput } from "./components/input";
+import "./style.css";
+import { TomoUIProvider } from "./theme-provider";
+function App() {
+  return (
+    <TomoUIProvider defaultTheme="doge_light" forcedTheme="doge_light">
+      123123
+      <Input label="Email" type="email" />
+      <NumberInput label="Number" placeholder="Enter your number" type="number" />
+      <Button color="primary">Click me</Button>
+      <QRCodeComponent
+        content="https://tomo.inc"
+        size={280}
+        logo="https://faucet.testnet.dogeos.com/images/h4.avif"
+        logoBackground="#1C1917"
+      />
+    </TomoUIProvider>
+  );
+}
+export default App;

package/src/components/button/index.tsx ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Button, ButtonGroup } from "@heroui/react";
2	+ export type { ButtonGroupProps, ButtonProps } from "@heroui/react";

package/src/components/card/index.tsx ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Card, CardBody, CardFooter, CardHeader } from "@heroui/react";
2	+ export type { CardProps } from "@heroui/react";

package/src/components/chip/index.tsx ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Chip } from "@heroui/react";
2	+ export type { ChipProps } from "@heroui/react";

package/src/components/image/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Image } from "@heroui/react";
2	+ export type { ImageProps } from "@heroui/react";

package/src/components/index.ts ADDED Viewed

@@ -0,0 +1,14 @@
+export * from "./button";
+export * from "./card";
+export * from "./chip";
+export * from "./image";
+export * from "./input";
+export * from "./link";
+export * from "./mfaTypeChoose";
+export * from "./modal";
+export * from "./qr";
+export * from "./select";
+export * from "./skeleton";
+export * from "./spinner";
+export * from "./tabs";
+export * from "./toast";

package/src/components/input/index.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  DateInput,
+  type DateInputProps,
+  Input,
+  InputOtp,
+  type InputOtpProps,
+  type InputProps,
+  NumberInput,
+  type NumberInputProps,
+  Textarea,
+  type TextAreaProps,
+  TimeInput,
+  type TimeInputProps,
+} from "@heroui/react";
+Input.displayName = "Input";
+NumberInput.displayName = "NumberInput";
+(DateInput as any).displayName = "DateInput";
+Textarea.displayName = "Textarea";
+(TimeInput as any).displayName = "TimeInput";
+InputOtp.displayName = "InputOtp";
+export {
+  DateInput,
+  Input,
+  InputOtp,
+  NumberInput,
+  Textarea,
+  TimeInput,
+  type DateInputProps,
+  type InputOtpProps,
+  type InputProps,
+  type NumberInputProps,
+  type TextAreaProps,
+  type TimeInputProps,
+};

package/src/components/link/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { Link } from "@heroui/react";
2	+ export type { LinkProps } from "@heroui/react";

package/src/components/mfaTypeChoose/index.tsx ADDED Viewed

@@ -0,0 +1,114 @@
+import { cn, RadioGroup, RadioProps, useRadio, VisuallyHidden } from "@heroui/react";
+import { useEffect, useState } from "react";
+interface CustomRadioProps extends RadioProps {
+  countdown?: number;
+}
+const CustomRadio = ({ countdown, ...props }: CustomRadioProps) => {
+  const {
+    Component,
+    children,
+    isDisabled,
+    getBaseProps,
+    getWrapperProps,
+    getInputProps,
+    getLabelProps,
+    getLabelWrapperProps,
+    getControlProps,
+  } = useRadio(props);
+  return (
+    <Component
+      {...getBaseProps()}
+      className={cn(
+        "group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent",
+        "max-w-full cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
+        "data-[selected=true]:border-primary",
+        isDisabled && "opacity-50 cursor-not-allowed",
+      )}
+    >
+      <VisuallyHidden>
+        <input {...getInputProps()} />
+      </VisuallyHidden>
+      <span {...getWrapperProps()}>
+        <span {...getControlProps()} />
+      </span>
+      <div {...getLabelWrapperProps()} className="flex items-center justify-between w-full">
+        <span {...getLabelProps()} className="text-default-600 text-base font-medium">
+          {children}
+        </span>
+        {countdown !== undefined && countdown > 0 && <CountdownTimer seconds={countdown} />}
+      </div>
+    </Component>
+  );
+};
+export interface MfaTypeOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  countdown?: number;
+}
+export interface MfaTypeChooseProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  options?: MfaTypeOption[];
+}
+const defaultOptions: MfaTypeOption[] = [
+  { value: "fido", label: "Passkey" },
+  { value: "totp", label: "Authenticator" },
+  { value: "emailOtp", label: "OTP Email" },
+];
+const CountdownTimer = ({ seconds }: { seconds: number }) => {
+  const [timeLeft, setTimeLeft] = useState(seconds);
+  useEffect(() => {
+    setTimeLeft(seconds);
+  }, [seconds]);
+  useEffect(() => {
+    if (timeLeft <= 0) return;
+    const timer = setInterval(() => {
+      setTimeLeft((prev) => {
+        if (prev <= 1) return 0;
+        return prev - 1;
+      });
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [timeLeft]);
+  const formatTime = (totalSeconds: number) => {
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const secs = totalSeconds % 60;
+    return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  };
+  return <span className="text-sm font-medium text-default-500">{formatTime(timeLeft)}</span>;
+};
+export function MfaTypeChoose({ value, onValueChange, options = defaultOptions }: MfaTypeChooseProps) {
+  return (
+    <RadioGroup value={value} onValueChange={onValueChange} className="w-full">
+      {options.map((option) => (
+        <CustomRadio
+          key={option.value}
+          value={option.value}
+          description={option.description}
+          isDisabled={option.disabled}
+          countdown={option.countdown}
+        >
+          {option.label}
+        </CustomRadio>
+      ))}
+    </RadioGroup>
+  );
+}
+export default MfaTypeChoose;

package/src/components/modal/index.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+export { Modal } from "./modal";
+export { ModalBody } from "./modal-body";
+export { ModalContent } from "./modal-content";
+export { ModalFooter } from "./modal-footer";
+export { ModalHeader } from "./modal-header";
+export { useDisclosure } from "./use-disclosure";
+export type { ModalProps } from "./modal";
+export type { ModalBodyProps } from "./modal-body";
+export type { ModalContentProps } from "./modal-content";
+export type { ModalFooterProps } from "./modal-footer";
+export type { ModalHeaderProps } from "./modal-header";
+export type { UseDisclosureProps } from "./use-disclosure";

package/src/components/modal/modal-body.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export interface ModalBodyProps {
+  children: ReactNode;
+  className?: string;
+}
+export function ModalBody({ children, className = "" }: ModalBodyProps) {
+  return <div className={`p-4 overflow-y-auto flex-1 ${className}`}>{children}</div>;
+}

package/src/components/modal/modal-content.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import { useModalContext } from "./modal-context";
+export interface ModalContentProps {
+  children: ReactNode | ((onClose: () => void) => ReactNode);
+  className?: string;
+  onClose?: () => void;
+}
+export function ModalContent({ children, className = "", onClose }: ModalContentProps) {
+  const context = useModalContext();
+  const handleClose = onClose || context.onClose || (() => {});
+  const content = typeof children === "function" ? children(handleClose) : children;
+  return <div className={`flex flex-col ${className}`}>{content}</div>;
+}

package/src/components/modal/modal-context.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+export interface ModalContextValue {
+  onClose?: () => void;
+  hideCloseButton?: boolean;
+}
+export const ModalContext = createContext<ModalContextValue>({});
+export function useModalContext() {
+  return useContext(ModalContext);
+}

package/src/components/modal/modal-footer.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export interface ModalFooterProps {
+  children: ReactNode;
+  className?: string;
+}
+export function ModalFooter({ children, className = "" }: ModalFooterProps) {
+  return (
+    <div className={`flex items-center justify-end gap-2 p-4 border-t border-default-200 ${className}`}>{children}</div>
+  );
+}

package/src/components/modal/modal-header.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { CloseIcon } from "../../icons";
+import { Button } from "../button";
+import { useModalContext } from "./modal-context";
+export interface ModalHeaderProps {
+  children: ReactNode;
+  className?: string;
+  onClose?: () => void;
+  hideCloseButton?: boolean;
+}
+export function ModalHeader({ children, className = "", onClose, hideCloseButton }: ModalHeaderProps) {
+  const context = useModalContext();
+  const handleClose = onClose || context.onClose;
+  const shouldHideCloseButton = hideCloseButton ?? context.hideCloseButton ?? false;
+  return (
+    <div className={`flex items-center justify-between p-4 border-b border-default-200 ${className}`}>
+      <div className="flex-1">{children}</div>
+      {!shouldHideCloseButton && handleClose && (
+        <Button isIconOnly size="sm" variant="light" onPress={handleClose} className="ml-2" aria-label="Close">
+          <CloseIcon />
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/modal/modal.tsx ADDED Viewed

@@ -0,0 +1,152 @@
+import type { ReactNode } from "react";
+import { cloneElement, isValidElement, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { ModalBody } from "./modal-body";
+import { ModalContent } from "./modal-content";
+import { ModalContext } from "./modal-context";
+import { ModalFooter } from "./modal-footer";
+import { ModalHeader } from "./modal-header";
+export type ModalSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
+export type ModalRadius = "none" | "sm" | "md" | "lg" | "full";
+export type ScrollBehavior = "inside" | "outside";
+export interface ModalProps {
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  children: ReactNode;
+  size?: ModalSize;
+  radius?: ModalRadius;
+  isDismissable?: boolean;
+  isKeyboardDismissDisabled?: boolean;
+  hideCloseButton?: boolean;
+  scrollBehavior?: ScrollBehavior;
+  className?: string;
+  classNames?: {
+    base?: string;
+    backdrop?: string;
+    wrapper?: string;
+  };
+}
+const sizeClasses: Record<ModalSize, string> = {
+  xs: "max-w-xs",
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  full: "max-w-full",
+};
+const radiusClasses: Record<ModalRadius, string> = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full",
+};
+export function Modal({
+  isOpen = false,
+  onOpenChange,
+  children,
+  size = "md",
+  radius = "md",
+  isDismissable = true,
+  isKeyboardDismissDisabled = false,
+  hideCloseButton = false,
+  scrollBehavior = "outside",
+  className = "",
+  classNames = {},
+}: ModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && !isKeyboardDismissDisabled && isDismissable) {
+        onOpenChange?.(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, isKeyboardDismissDisabled, isDismissable, onOpenChange]);
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (isDismissable && e.target === e.currentTarget) {
+      onOpenChange?.(false);
+    }
+  };
+  if (!isOpen) return null;
+  const sizeClass = sizeClasses[size];
+  const radiusClass = radiusClasses[radius];
+  const handleClose = () => {
+    onOpenChange?.(false);
+  };
+  const contextValue = {
+    onClose: handleClose,
+    hideCloseButton,
+  };
+  // Clone children to pass onClose prop
+  const childrenWithProps = isValidElement(children)
+    ? cloneElement(children, { onClose: handleClose } as any)
+    : children;
+  const modalContent = (
+    <ModalContext.Provider value={contextValue}>
+      <div
+        className={`fixed inset-0 z-50 flex items-center justify-center ${classNames.wrapper || ""}`}
+        onClick={handleBackdropClick}
+      >
+        {/* Backdrop */}
+        <div className={`fixed inset-0 bg-black/50 backdrop-blur-sm ${classNames.backdrop || ""}`} aria-hidden="true" />
+        {/* Modal Content */}
+        <div
+          ref={modalRef}
+          className={`
+            relative z-10 bg-background shadow-lg
+            ${sizeClass}
+            ${radiusClass}
+            ${scrollBehavior === "inside" ? "max-h-[90vh] overflow-hidden flex flex-col" : ""}
+            ${className}
+            ${classNames.base || ""}
+          `}
+          onClick={(e) => e.stopPropagation()}
+          role="dialog"
+          aria-modal="true"
+        >
+          {childrenWithProps}
+        </div>
+      </div>
+    </ModalContext.Provider>
+  );
+  return createPortal(modalContent, document.body);
+}
+// Export sub-components
+Modal.Content = ModalContent;
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+export { ModalBody, ModalContent, ModalFooter, ModalHeader };

package/src/components/modal/use-disclosure.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { useCallback, useState } from "react";
+export interface UseDisclosureProps {
+  defaultOpen?: boolean;
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+}
+export function useDisclosure(props: UseDisclosureProps = {}) {
+  const { defaultOpen = false, isOpen: controlledIsOpen, onOpenChange } = props;
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultOpen);
+  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : uncontrolledIsOpen;
+  const onOpen = useCallback(() => {
+    if (controlledIsOpen === undefined) {
+      setUncontrolledIsOpen(true);
+    }
+    onOpenChange?.(true);
+  }, [controlledIsOpen, onOpenChange]);
+  const onClose = useCallback(() => {
+    if (controlledIsOpen === undefined) {
+      setUncontrolledIsOpen(false);
+    }
+    onOpenChange?.(false);
+  }, [controlledIsOpen, onOpenChange]);
+  const onOpenChangeHandler = useCallback(
+    (newIsOpen: boolean) => {
+      if (controlledIsOpen === undefined) {
+        setUncontrolledIsOpen(newIsOpen);
+      }
+      onOpenChange?.(newIsOpen);
+    },
+    [controlledIsOpen, onOpenChange],
+  );
+  return {
+    isOpen,
+    onOpen,
+    onClose,
+    onOpenChange: onOpenChangeHandler,
+  };
+}

package/src/components/qr/index.tsx ADDED Viewed

@@ -0,0 +1,94 @@
+import QRCodeStyling, { type Options } from "qr-code-styling";
+import { useEffect, useRef } from "react";
+import { Skeleton } from "../skeleton";
+type QRCodeProps = {
+  content: string;
+  size?: number;
+  logo?: string;
+  logoBackground?: string;
+};
+/**
+ * QR Code Component
+ * Generates a QR code with optional logo embedded directly in the QR code
+ * Uses qr-code-styling library which handles logo embedding properly
+ */
+export const QRCodeComponent = ({ content, size = 168, logo, logoBackground }: QRCodeProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const qrCodeInstanceRef = useRef<QRCodeStyling | null>(null);
+  useEffect(() => {
+    if (!content || !containerRef.current) {
+      return;
+    }
+    const container = containerRef.current;
+    const qrCodeOptions: Partial<Options> = {
+      width: size,
+      height: size,
+      data: content,
+      margin: 0,
+      dotsOptions: {
+        color: "#000000",
+        type: "square",
+      },
+      backgroundOptions: {
+        color: "#ffffff",
+        round: 8,
+      },
+      cornersSquareOptions: {
+        color: "#000000",
+        type: "extra-rounded",
+      },
+      cornersDotOptions: {
+        color: "#000000",
+        type: "square",
+      },
+    };
+    if (logo) {
+      qrCodeOptions.image = logo;
+      qrCodeOptions.imageOptions = {
+        crossOrigin: "anonymous",
+        margin: 10,
+        imageSize: 0.4, // 40% of QR code size
+        hideBackgroundDots: true,
+        ...(logoBackground && {
+          backgroundOptions: {
+            color: logoBackground,
+          },
+        }),
+      };
+    }
+    // Reuse existing instance and update it, or create new one
+    if (qrCodeInstanceRef.current) {
+      // Update existing instance instead of creating new one
+      qrCodeInstanceRef.current.update(qrCodeOptions);
+    } else {
+      // Create new instance only on first render
+      const qrCode = new QRCodeStyling(qrCodeOptions);
+      qrCodeInstanceRef.current = qrCode;
+      container.innerHTML = "";
+      qrCode.append(container);
+    }
+    // Cleanup on unmount
+    const cleanupContainer = container;
+    return () => {
+      if (cleanupContainer && qrCodeInstanceRef.current) {
+        cleanupContainer.innerHTML = "";
+        qrCodeInstanceRef.current = null;
+      }
+    };
+  }, [content, size, logo, logoBackground]);
+  return (
+    <Skeleton isLoaded={!!content} style={{ width: size, height: size }} className="rounded-lg">
+      <div className="flex items-center justify-center p-2 rounded-lg">
+        <div ref={containerRef} />
+      </div>
+    </Skeleton>
+  );
+};