Fix. Images under toggle displayed even when closed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@notionpresso/react",
-  "version": "0.0.1",
+  "version": "0.0.7",
   "description": "this is a react library for notionpresso",
   "main": "index.js",
   "scripts": {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@notionpresso/react",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "private": false,
   "homepage": "https://notionpresso.com",
   "description": "This is wellmade React components for Notion Opensource",

packages/core/src/lib/components/image/constants/image-size.ts

@@ -0,0 +1,20 @@
+export const BREAKPOINTS = {
+  MOBILE: 768,
+  TABLET: 1024,
+  DESKTOP: 1440,
+} as const;
+
+export const PORTRAIT_RATIOS = {
+  DESKTOP: 0.45,
+  TABLET: 0.598,
+  MOBILE: 0.86,
+} as const;
+
+export const LANDSCAPE_RATIOS = {
+  DESKTOP: 0.9,
+  TABLET: 0.9375,
+  MOBILE: 1.0,
+} as const;
+
+export const MAX_HEIGHT_RATIO = 0.9;
+export const PRECISION = 1000;

packages/core/src/lib/components/image/constants/index.ts

@@ -0,0 +1,4 @@
+export * from "./motion";
+export * from "./image-size";
+export * from "./viewer-tools";
+export * from "./motion";

packages/core/src/lib/components/image/constants/motion.ts

@@ -0,0 +1,5 @@
+export const MOTION_STYLES = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+};

packages/core/src/lib/components/image/constants/viewer-tools.ts

@@ -0,0 +1,41 @@
+export const TOOLS_ACTIONS = {
+  BACK: "Back",
+  NEXT: "Next",
+  ZOOM_OUT: "Zoom out",
+  ZOOM_IN: "Zoom in",
+  DOWNLOAD: "Download",
+  CLOSE: "Close",
+} as const;
+
+export const TOOLS_ARIA_LABELS = {
+  BACK: "Previous image",
+  NEXT: "Next image",
+  ZOOM_OUT: "Zoom out",
+  ZOOM_IN: "Zoom in",
+  DOWNLOAD: "Download image",
+  CLOSE: "Close viewer",
+  SCALER_INPUT: "Scale percentage",
+  SCALER_INPUT_BUTTON: "Edit scale",
+} as const;
+
+export const TOOLS_ARIA_DESCRIBEDBY = {
+  BACK: "previous-image-desc",
+  NEXT: "next-image-desc",
+  ZOOM_OUT: "zoom-out-desc",
+  ZOOM_IN: "zoom-in-desc",
+  DOWNLOAD: "download-image-desc",
+  CLOSE: "close-viewer-desc",
+  SCALER_INPUT: "scale-percentage-desc",
+  SCALER_INPUT_BUTTON: "edit-scale-desc",
+} as const;
+
+export const TOOLS_ARIA_HINTS = {
+  BACK: "Go to previous image (Left Arrow)",
+  NEXT: "Go to next image (Right Arrow)",
+  ZOOM_OUT: "Zoom out (Minus -)",
+  ZOOM_IN: "Zoom in (Plus +)",
+  DOWNLOAD: "Download the current image",
+  CLOSE: "Close the viewer (Esc)",
+  SCALER_INPUT_BUTTON: "Opens scale input. Click to edit",
+  SCALER_INPUT: "Enter a scale percentage and press Enter to apply",
+} as const;