@umodeapporg/ui 0.1.0

package/dist/motion/motionPresets.d.ts

@@ -0,0 +1,44 @@
+import { Variants } from 'motion/react';
+/**
+ * The shared vocabulary. A component picks a preset instead of inventing durations, so a
+ * dialog and a drawer opening in the same second read as one system.
+ *
+ * Only `opacity` and `transform` are animated anywhere in here: both run on the compositor,
+ * so none of these can cause a layout pass. The one exception is `collapseVariants`, which
+ * animates height by necessity and is documented at its declaration.
+ */
+/**
+ * The dimmed layer behind a modal surface.
+ *
+ * Its exit is as long as the SLOWEST panel exit in the system, never the standard fast one:
+ * a scrim that clears before the surface it backs leaves the panel travelling over the bare
+ * page for the remaining frames, which is the single thing that makes a close look broken.
+ * Lingering slightly is invisible; leaving early is not.
+ */
+export declare const scrimVariants: Variants;
+/** Centered modal: rises and settles. The scale is 0.98, not 0.9: this is weight, not a pop. */
+export declare const dialogVariants: Variants;
+export type TSlideFrom = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Edge-anchored panel: a drawer. It slides its own width and stays fully opaque while doing
+ * it, which is what makes it read as a solid thing being pulled out rather than a picture
+ * fading in. The scrim behind it carries the fade.
+ *
+ * Entry is slower than exit and decelerates (`ease-enter`), so the panel arrives and settles
+ * instead of snapping into place.
+ */
+export declare const createDrawerVariants: (placement: TSlideFrom) => Variants;
+/**
+ * Anchored floating surface: menu, popover, tooltip, listbox. The surface grows from the
+ * control that opened it, which is what makes the two read as connected.
+ */
+export declare const floatingVariants: Variants;
+/** A tooltip is the lightest surface in the system: it fades, it does not travel. */
+export declare const tooltipVariants: Variants;
+/**
+ * Expand/collapse. This is the ONE preset that animates a layout property, because the
+ * whole point is that surrounding content moves out of the way. Keep it off hot lists.
+ */
+export declare const collapseVariants: Variants;
+/** Content appearing in place (a panel body, an inline result). No travel, no scale. */
+export declare const fadeVariants: Variants;

package/dist/motion/motionPresets.js

@@ -0,0 +1,67 @@
+import { motionEase, motionDuration, exitTransition, MOTION_OFFSET_PX, enterTransition } from "./motionTokens.js";
+const scrimVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: motionDuration.base, ease: motionEase.enter } },
+  exit: { opacity: 0, transition: { duration: motionDuration.base, ease: motionEase.exit } }
+};
+const dialogVariants = {
+  hidden: { opacity: 0, scale: 0.98, y: MOTION_OFFSET_PX },
+  visible: { opacity: 1, scale: 1, y: 0, transition: enterTransition },
+  exit: { opacity: 0, scale: 0.98, y: MOTION_OFFSET_PX, transition: exitTransition }
+};
+const OFF_SCREEN = {
+  left: { x: "-100%" },
+  right: { x: "100%" },
+  top: { y: "-100%" },
+  bottom: { y: "100%" }
+};
+const createDrawerVariants = (placement) => ({
+  hidden: OFF_SCREEN[placement],
+  visible: {
+    x: 0,
+    y: 0,
+    transition: { duration: motionDuration.slow, ease: motionEase.enter }
+  },
+  exit: {
+    ...OFF_SCREEN[placement],
+    transition: { duration: motionDuration.base, ease: motionEase.exit }
+  }
+});
+const floatingVariants = {
+  hidden: { opacity: 0, scale: 0.96, y: -2 },
+  visible: { opacity: 1, scale: 1, y: 0, transition: { duration: motionDuration.fast, ease: motionEase.enter } },
+  exit: { opacity: 0, scale: 0.98, transition: { duration: motionDuration.instant, ease: motionEase.exit } }
+};
+const tooltipVariants = {
+  hidden: { opacity: 0, scale: 0.98 },
+  visible: { opacity: 1, scale: 1, transition: { duration: motionDuration.instant, ease: motionEase.enter } },
+  exit: { opacity: 0, transition: { duration: motionDuration.instant, ease: motionEase.exit } }
+};
+const collapseVariants = {
+  hidden: { height: 0, opacity: 0 },
+  visible: {
+    height: "auto",
+    opacity: 1,
+    transition: { height: { duration: motionDuration.slow, ease: motionEase.enter }, opacity: { duration: 0.15 } }
+  },
+  exit: {
+    height: 0,
+    opacity: 0,
+    transition: { height: { duration: motionDuration.base, ease: motionEase.exit }, opacity: { duration: 0.1 } }
+  }
+};
+const fadeVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: enterTransition },
+  exit: { opacity: 0, transition: exitTransition }
+};
+export {
+  collapseVariants,
+  createDrawerVariants,
+  dialogVariants,
+  fadeVariants,
+  floatingVariants,
+  scrimVariants,
+  tooltipVariants
+};
+//# sourceMappingURL=motionPresets.js.map

package/dist/motion/motionPresets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motionPresets.js","sources":["../../src/motion/motionPresets.ts"],"sourcesContent":["import type { Variants } from 'motion/react';\n\nimport { enterTransition, exitTransition, MOTION_OFFSET_PX, motionDuration, motionEase } from './motionTokens';\n\n/**\n * The shared vocabulary. A component picks a preset instead of inventing durations, so a\n * dialog and a drawer opening in the same second read as one system.\n *\n * Only `opacity` and `transform` are animated anywhere in here: both run on the compositor,\n * so none of these can cause a layout pass. The one exception is `collapseVariants`, which\n * animates height by necessity and is documented at its declaration.\n */\n\n/**\n * The dimmed layer behind a modal surface.\n *\n * Its exit is as long as the SLOWEST panel exit in the system, never the standard fast one:\n * a scrim that clears before the surface it backs leaves the panel travelling over the bare\n * page for the remaining frames, which is the single thing that makes a close look broken.\n * Lingering slightly is invisible; leaving early is not.\n */\nexport const scrimVariants: Variants = {\n  hidden: { opacity: 0 },\n  visible: { opacity: 1, transition: { duration: motionDuration.base, ease: motionEase.enter } },\n  exit: { opacity: 0, transition: { duration: motionDuration.base, ease: motionEase.exit } },\n};\n\n/** Centered modal: rises and settles. The scale is 0.98, not 0.9: this is weight, not a pop. */\nexport const dialogVariants: Variants = {\n  hidden: { opacity: 0, scale: 0.98, y: MOTION_OFFSET_PX },\n  visible: { opacity: 1, scale: 1, y: 0, transition: enterTransition },\n  exit: { opacity: 0, scale: 0.98, y: MOTION_OFFSET_PX, transition: exitTransition },\n};\n\nexport type TSlideFrom = 'left' | 'right' | 'top' | 'bottom';\n\nconst OFF_SCREEN: Record<TSlideFrom, { x?: string; y?: string }> = {\n  left: { x: '-100%' },\n  right: { x: '100%' },\n  top: { y: '-100%' },\n  bottom: { y: '100%' },\n};\n\n/**\n * Edge-anchored panel: a drawer. It slides its own width and stays fully opaque while doing\n * it, which is what makes it read as a solid thing being pulled out rather than a picture\n * fading in. The scrim behind it carries the fade.\n *\n * Entry is slower than exit and decelerates (`ease-enter`), so the panel arrives and settles\n * instead of snapping into place.\n */\nexport const createDrawerVariants = (placement: TSlideFrom): Variants => ({\n  hidden: OFF_SCREEN[placement],\n  visible: {\n    x: 0,\n    y: 0,\n    transition: { duration: motionDuration.slow, ease: motionEase.enter },\n  },\n  exit: {\n    ...OFF_SCREEN[placement],\n    transition: { duration: motionDuration.base, ease: motionEase.exit },\n  },\n});\n\n/**\n * Anchored floating surface: menu, popover, tooltip, listbox. The surface grows from the\n * control that opened it, which is what makes the two read as connected.\n */\nexport const floatingVariants: Variants = {\n  hidden: { opacity: 0, scale: 0.96, y: -2 },\n  visible: { opacity: 1, scale: 1, y: 0, transition: { duration: motionDuration.fast, ease: motionEase.enter } },\n  exit: { opacity: 0, scale: 0.98, transition: { duration: motionDuration.instant, ease: motionEase.exit } },\n};\n\n/** A tooltip is the lightest surface in the system: it fades, it does not travel. */\nexport const tooltipVariants: Variants = {\n  hidden: { opacity: 0, scale: 0.98 },\n  visible: { opacity: 1, scale: 1, transition: { duration: motionDuration.instant, ease: motionEase.enter } },\n  exit: { opacity: 0, transition: { duration: motionDuration.instant, ease: motionEase.exit } },\n};\n\n/**\n * Expand/collapse. This is the ONE preset that animates a layout property, because the\n * whole point is that surrounding content moves out of the way. Keep it off hot lists.\n */\nexport const collapseVariants: Variants = {\n  hidden: { height: 0, opacity: 0 },\n  visible: {\n    height: 'auto',\n    opacity: 1,\n    transition: { height: { duration: motionDuration.slow, ease: motionEase.enter }, opacity: { duration: 0.15 } },\n  },\n  exit: {\n    height: 0,\n    opacity: 0,\n    transition: { height: { duration: motionDuration.base, ease: motionEase.exit }, opacity: { duration: 0.1 } },\n  },\n};\n\n/** Content appearing in place (a panel body, an inline result). No travel, no scale. */\nexport const fadeVariants: Variants = {\n  hidden: { opacity: 0 },\n  visible: { opacity: 1, transition: enterTransition },\n  exit: { opacity: 0, transition: exitTransition },\n};\n"],"names":[],"mappings":";AAqBO,MAAM,gBAA0B;AAAA,EACrC,QAAQ,EAAE,SAAS,EAAA;AAAA,EACnB,SAAS,EAAE,SAAS,GAAG,YAAY,EAAE,UAAU,eAAe,MAAM,MAAM,WAAW,MAAA,EAAM;AAAA,EAC3F,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,UAAU,eAAe,MAAM,MAAM,WAAW,KAAA,EAAK;AACzF;AAGO,MAAM,iBAA2B;AAAA,EACtC,QAAQ,EAAE,SAAS,GAAG,OAAO,MAAM,GAAG,iBAAA;AAAA,EACtC,SAAS,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,GAAG,YAAY,gBAAA;AAAA,EACnD,MAAM,EAAE,SAAS,GAAG,OAAO,MAAM,GAAG,kBAAkB,YAAY,eAAA;AACpE;AAIA,MAAM,aAA6D;AAAA,EACjE,MAAM,EAAE,GAAG,QAAA;AAAA,EACX,OAAO,EAAE,GAAG,OAAA;AAAA,EACZ,KAAK,EAAE,GAAG,QAAA;AAAA,EACV,QAAQ,EAAE,GAAG,OAAA;AACf;AAUO,MAAM,uBAAuB,CAAC,eAAqC;AAAA,EACxE,QAAQ,WAAW,SAAS;AAAA,EAC5B,SAAS;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA,IACH,YAAY,EAAE,UAAU,eAAe,MAAM,MAAM,WAAW,MAAA;AAAA,EAAM;AAAA,EAEtE,MAAM;AAAA,IACJ,GAAG,WAAW,SAAS;AAAA,IACvB,YAAY,EAAE,UAAU,eAAe,MAAM,MAAM,WAAW,KAAA;AAAA,EAAK;AAEvE;AAMO,MAAM,mBAA6B;AAAA,EACxC,QAAQ,EAAE,SAAS,GAAG,OAAO,MAAM,GAAG,GAAA;AAAA,EACtC,SAAS,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,GAAG,YAAY,EAAE,UAAU,eAAe,MAAM,MAAM,WAAW,QAAM;AAAA,EAC3G,MAAM,EAAE,SAAS,GAAG,OAAO,MAAM,YAAY,EAAE,UAAU,eAAe,SAAS,MAAM,WAAW,OAAK;AACzG;AAGO,MAAM,kBAA4B;AAAA,EACvC,QAAQ,EAAE,SAAS,GAAG,OAAO,KAAA;AAAA,EAC7B,SAAS,EAAE,SAAS,GAAG,OAAO,GAAG,YAAY,EAAE,UAAU,eAAe,SAAS,MAAM,WAAW,QAAM;AAAA,EACxG,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,UAAU,eAAe,SAAS,MAAM,WAAW,KAAA,EAAK;AAC5F;AAMO,MAAM,mBAA6B;AAAA,EACxC,QAAQ,EAAE,QAAQ,GAAG,SAAS,EAAA;AAAA,EAC9B,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY,EAAE,QAAQ,EAAE,UAAU,eAAe,MAAM,MAAM,WAAW,SAAS,SAAS,EAAE,UAAU,OAAK;AAAA,EAAE;AAAA,EAE/G,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY,EAAE,QAAQ,EAAE,UAAU,eAAe,MAAM,MAAM,WAAW,QAAQ,SAAS,EAAE,UAAU,MAAI;AAAA,EAAE;AAE/G;AAGO,MAAM,eAAyB;AAAA,EACpC,QAAQ,EAAE,SAAS,EAAA;AAAA,EACnB,SAAS,EAAE,SAAS,GAAG,YAAY,gBAAA;AAAA,EACnC,MAAM,EAAE,SAAS,GAAG,YAAY,eAAA;AAClC;"}

package/dist/motion/motionTokens.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The JS half of the motion vocabulary. Every value here MIRRORS a token already declared
+ * in `tailwind.config.js`, so a surface animated by Motion and a surface animated by a
+ * `transition-*` class move on the same clock. Changing a duration means changing it in
+ * BOTH places, on purpose: there is no runtime bridge, and a silent drift between the two
+ * is exactly what makes an interface feel assembled from parts.
+ */
+/** Seconds, because Motion works in seconds while Tailwind works in milliseconds. */
+export declare const motionDuration: {
+    /** 90ms. Immediate feedback: press, toggle. */
+    readonly instant: 0.09;
+    /** 140ms. The default. Hover, focus, colour. */
+    readonly fast: 0.14;
+    /** 200ms. State change, overlay enter. */
+    readonly base: 0.2;
+    /** 280ms. Expand/collapse, drawer travel. */
+    readonly slow: 0.28;
+};
+export declare const motionEase: {
+    /** Decelerating: something entering the screen. */
+    readonly enter: readonly [0.16, 1, 0.3, 1];
+    /** Accelerating: something leaving. */
+    readonly exit: readonly [0.4, 0, 1, 1];
+    /** Symmetric: something moving between two places it already occupied. */
+    readonly standard: readonly [0.4, 0, 0.2, 1];
+};
+/**
+ * Exit is deliberately faster than enter. Waiting for a panel to leave is dead time the
+ * user did not ask for, while an entrance is information being introduced.
+ */
+export declare const enterTransition: {
+    readonly duration: 0.2;
+    readonly ease: readonly [0.16, 1, 0.3, 1];
+};
+export declare const exitTransition: {
+    readonly duration: 0.14;
+    readonly ease: readonly [0.4, 0, 1, 1];
+};
+/** Travel distance for a surface that slides in. Small on purpose: this is a hint, not a journey. */
+export declare const MOTION_OFFSET_PX = 6;

package/dist/motion/motionTokens.js

@@ -0,0 +1,29 @@
+const motionDuration = {
+  /** 90ms. Immediate feedback: press, toggle. */
+  instant: 0.09,
+  /** 140ms. The default. Hover, focus, colour. */
+  fast: 0.14,
+  /** 200ms. State change, overlay enter. */
+  base: 0.2,
+  /** 280ms. Expand/collapse, drawer travel. */
+  slow: 0.28
+};
+const motionEase = {
+  /** Decelerating: something entering the screen. */
+  enter: [0.16, 1, 0.3, 1],
+  /** Accelerating: something leaving. */
+  exit: [0.4, 0, 1, 1],
+  /** Symmetric: something moving between two places it already occupied. */
+  standard: [0.4, 0, 0.2, 1]
+};
+const enterTransition = { duration: motionDuration.base, ease: motionEase.enter };
+const exitTransition = { duration: motionDuration.fast, ease: motionEase.exit };
+const MOTION_OFFSET_PX = 6;
+export {
+  MOTION_OFFSET_PX,
+  enterTransition,
+  exitTransition,
+  motionDuration,
+  motionEase
+};
+//# sourceMappingURL=motionTokens.js.map

package/dist/motion/motionTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motionTokens.js","sources":["../../src/motion/motionTokens.ts"],"sourcesContent":["/**\n * The JS half of the motion vocabulary. Every value here MIRRORS a token already declared\n * in `tailwind.config.js`, so a surface animated by Motion and a surface animated by a\n * `transition-*` class move on the same clock. Changing a duration means changing it in\n * BOTH places, on purpose: there is no runtime bridge, and a silent drift between the two\n * is exactly what makes an interface feel assembled from parts.\n */\n\n/** Seconds, because Motion works in seconds while Tailwind works in milliseconds. */\nexport const motionDuration = {\n  /** 90ms. Immediate feedback: press, toggle. */\n  instant: 0.09,\n  /** 140ms. The default. Hover, focus, colour. */\n  fast: 0.14,\n  /** 200ms. State change, overlay enter. */\n  base: 0.2,\n  /** 280ms. Expand/collapse, drawer travel. */\n  slow: 0.28,\n} as const;\n\nexport const motionEase = {\n  /** Decelerating: something entering the screen. */\n  enter: [0.16, 1, 0.3, 1],\n  /** Accelerating: something leaving. */\n  exit: [0.4, 0, 1, 1],\n  /** Symmetric: something moving between two places it already occupied. */\n  standard: [0.4, 0, 0.2, 1],\n} as const;\n\n/**\n * Exit is deliberately faster than enter. Waiting for a panel to leave is dead time the\n * user did not ask for, while an entrance is information being introduced.\n */\nexport const enterTransition = { duration: motionDuration.base, ease: motionEase.enter } as const;\nexport const exitTransition = { duration: motionDuration.fast, ease: motionEase.exit } as const;\n\n/** Travel distance for a surface that slides in. Small on purpose: this is a hint, not a journey. */\nexport const MOTION_OFFSET_PX = 6;\n"],"names":[],"mappings":"AASO,MAAM,iBAAiB;AAAA;AAAA,EAE5B,SAAS;AAAA;AAAA,EAET,MAAM;AAAA;AAAA,EAEN,MAAM;AAAA;AAAA,EAEN,MAAM;AACR;AAEO,MAAM,aAAa;AAAA;AAAA,EAExB,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC;AAAA;AAAA,EAEvB,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA;AAAA,EAEnB,UAAU,CAAC,KAAK,GAAG,KAAK,CAAC;AAC3B;AAMO,MAAM,kBAAkB,EAAE,UAAU,eAAe,MAAM,MAAM,WAAW,MAAA;AAC1E,MAAM,iBAAiB,EAAE,UAAU,eAAe,MAAM,MAAM,WAAW,KAAA;AAGzE,MAAM,mBAAmB;"}

package/package.json

@@ -0,0 +1,174 @@
+{
+  "name": "@umodeapporg/ui",
+  "version": "0.1.0",
+  "license": "UNLICENSED",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src/assets/styles/theme.css",
+    "tailwind.preset.js",
+    "tailwind-plugins"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/assets/umode-ui.css",
+    "./theme.css": "./src/assets/styles/theme.css",
+    "./tailwind-preset": "./tailwind.preset.js",
+    "./locales": {
+      "types": "./dist/locales/index.d.ts",
+      "import": "./dist/locales/index.js"
+    },
+    "./package.json": "./package.json",
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite --config playground/vite.config.ts",
+    "typecheck": "tsc -p tsconfig.json",
+    "build": "npm run typecheck && vite build",
+    "lint": "eslint \"src/**/*.{ts,tsx}\" --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write .",
+    "lint:fix": "npm run format && npm run lint -- --fix",
+    "audit:theme": "node scripts/theme-audit.mjs",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "npm run build && changeset publish"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.8.0",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.19",
+    "classnames": "^2.5.1",
+    "dompurify": "^3.4.13",
+    "tailwind-merge": "^3.4.0",
+    "zustand": "^5.0.13"
+  },
+  "peerDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tanstack/react-table": "^8.21.3",
+    "apexcharts": ">=3.52.0 <4",
+    "date-fns": "^4.0.0",
+    "i18next": ">=23",
+    "konva": "^9.3.22",
+    "motion": "^13.1.0",
+    "react": "^18.3.1",
+    "react-apexcharts": ">=1.4.1 <2",
+    "react-day-picker": "^9.3.0",
+    "react-dom": "^18.3.1",
+    "react-i18next": ">=14",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-konva": "^18.2.16",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^6.25.1",
+    "react-toastify": "^10.0.6",
+    "react-window": "^1.8.11",
+    "remark-gfm": "^4.0.0",
+    "tailwindcss": "^3.4.7"
+  },
+  "peerDependenciesMeta": {
+    "@dnd-kit/core": {
+      "optional": true
+    },
+    "@dnd-kit/sortable": {
+      "optional": true
+    },
+    "@dnd-kit/utilities": {
+      "optional": true
+    },
+    "@tanstack/react-table": {
+      "optional": true
+    },
+    "apexcharts": {
+      "optional": true
+    },
+    "date-fns": {
+      "optional": true
+    },
+    "konva": {
+      "optional": true
+    },
+    "react-apexcharts": {
+      "optional": true
+    },
+    "react-day-picker": {
+      "optional": true
+    },
+    "react-infinite-scroll-component": {
+      "optional": true
+    },
+    "react-konva": {
+      "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
+    "react-toastify": {
+      "optional": true
+    },
+    "react-window": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.9",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@eslint/js": "^9.34.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-window": "^1.8.8",
+    "@typescript-eslint/eslint-plugin": "^8.42.0",
+    "@typescript-eslint/parser": "^8.42.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "apexcharts": "3.52.0",
+    "autoprefixer": "^10.4.19",
+    "date-fns": "^4.0.0",
+    "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "fast-glob": "^3.3.2",
+    "i18next": "^26.1.0",
+    "konva": "^9.3.22",
+    "motion": "^13.1.0",
+    "postcss": "^8.4.40",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "react": "^18.3.1",
+    "react-apexcharts": "1.4.1",
+    "react-day-picker": "^9.3.0",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^17.0.7",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-konva": "^18.2.16",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^6.25.1",
+    "react-toastify": "^10.0.6",
+    "react-window": "^1.8.11",
+    "remark-gfm": "^4.0.0",
+    "tailwindcss": "^3.4.7",
+    "typescript": "^5.2.2",
+    "vite": "^6.3.2",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}