@musecat/uikit 0.1.3 → 0.2.0

package/i18n/shared.ts

@@ -0,0 +1,54 @@
+import enUIKitMessages from "./messages/en/uikit.json";
+import jpUIKitMessages from "./messages/jp/uikit.json";
+import krUIKitMessages from "./messages/kr/uikit.json";
+
+export type Locale = "en" | "kr" | "jp";
+
+export type UIKitMessages = typeof krUIKitMessages;
+
+const UIKIT_BY_LOCALE: Record<Locale, UIKitMessages> = {
+  en: enUIKitMessages,
+  kr: krUIKitMessages,
+  jp: jpUIKitMessages,
+};
+
+export function normalizeLocale(locale?: string): Locale {
+  const normalized =
+    typeof locale === "string" ? locale.trim().toLowerCase() : "";
+
+  if (normalized === "kr" || normalized === "ko") return "kr";
+  if (normalized === "jp" || normalized === "ja") return "jp";
+  if (normalized === "en") return "en";
+
+  if (typeof document !== "undefined") {
+    const documentLocale = document.documentElement.lang?.trim().toLowerCase();
+    if (documentLocale === "kr" || documentLocale === "ko") return "kr";
+    if (documentLocale === "jp" || documentLocale === "ja") return "jp";
+    if (documentLocale === "en") return "en";
+  }
+
+  return "en";
+}
+
+export function Word(locale?: string): UIKitMessages {
+  return UIKIT_BY_LOCALE[normalizeLocale(locale)];
+}
+
+function interpolate(
+  template: string,
+  params: Record<string, string | number>,
+): string {
+  return template.replace(/\{(\w+)\}/g, (_, key) =>
+    key in params ? String(params[key]) : `{${key}}`,
+  );
+}
+
+export function UIKitT(locale?: string) {
+  const messages = Word(locale);
+  return {
+    ...messages.UIKit.actions,
+    ...messages.UIKit.presets,
+    ...messages.UIKit.ui,
+    interpolate,
+  };
+}

package/index.ts

@@ -1,26 +1,27 @@
+/// <reference path="./global.d.ts" />
 // Frameworks
-export { default as View } from "@/packages/Frameworks/View/View";
-export { default as Pressable } from "@/packages/Frameworks/Pressable/Pressable";
-export { default as ImageView } from "@/packages/Frameworks/View/ImageView/Image";
-export { default as HScrollView } from "@/packages/Frameworks/View/HScrollView/HScrollView";
-export { default as DNDView } from "@/packages/Frameworks/View/DNDView/DNDView";
-export { default as Dialog, useDialog } from "@/packages/Frameworks/Dialog/Dialog";
-export { dialog, DialogStore } from "@/packages/Frameworks/Dialog/Dialog.store";
-export type { DialogInstance } from "@/packages/Frameworks/Dialog/Dialog.store";
-export { default as DialogBootstrap } from "@/packages/Frameworks/Dialog/Dialog.boot";
-export { default as ToasterBootstrap, toast } from "@/packages/Frameworks/Toaster/Toaster.boot";
-export type { ToasterBootstrapProps } from "@/packages/Frameworks/Toaster/Toaster.types";
-export { default as Squircle } from "@/packages/Frameworks/Squircle/Squircle";
-export { default as EdgeEffect } from "@/packages/Frameworks/EdgeEffect/EdgeEffect";
-export { motionTransitions, motionPresets } from "@/packages/Frameworks/Motion/Motion.presets";
-export { default as StopParentInteraction } from "@/packages/Frameworks/_shared/StopParentInteraction";
-export { useScrollLock } from "@/packages/Frameworks/_shared/bodyScrollLock";
-export { useControllableState } from "@/packages/Frameworks/_shared/useControllableState";
-export { Size, SizePX } from "@/packages/Frameworks/_shared/sizing";
-export { normalizeUIKitImageSrc, normalizeBrandIconClass, normalizeLang } from "@/packages/Frameworks/_shared/normalize";
-export { LAYER_Z_INDEX } from "@/packages/Frameworks/_shared/layer.constants";
-export { default as DialogHeader } from "@/packages/Frameworks/Dialog/contents/Dialog.header";
-export { default as DialogFooter } from "@/packages/Frameworks/Dialog/contents/Dialog.footer";
+export { default as View } from "./packages/Frameworks/View/View";
+export { default as Pressable } from "./packages/Frameworks/Pressable/Pressable";
+export { default as ImageView } from "./packages/Frameworks/View/ImageView/Image";
+export { default as HScrollView } from "./packages/Frameworks/View/HScrollView/HScrollView";
+export { default as DNDView } from "./packages/Frameworks/View/DNDView/DNDView";
+export { default as Dialog, useDialog } from "./packages/Frameworks/Dialog/Dialog";
+export { dialog, DialogStore } from "./packages/Frameworks/Dialog/Dialog.store";
+export type { DialogInstance } from "./packages/Frameworks/Dialog/Dialog.store";
+export { default as DialogBootstrap } from "./packages/Frameworks/Dialog/Dialog.boot";
+export { default as ToasterBootstrap, toast } from "./packages/Frameworks/Toaster/Toaster.boot";
+export type { ToasterBootstrapProps } from "./packages/Frameworks/Toaster/Toaster.types";
+export { default as Squircle } from "./packages/Frameworks/Squircle/Squircle";
+export { default as EdgeEffect } from "./packages/Frameworks/EdgeEffect/EdgeEffect";
+export { motionTransitions, motionPresets } from "./packages/Frameworks/Motion/Motion.presets";
+export { default as StopParentInteraction } from "./packages/Frameworks/_shared/StopParentInteraction";
+export { useScrollLock } from "./packages/Frameworks/_shared/bodyScrollLock";
+export { useControllableState } from "./packages/Frameworks/_shared/useControllableState";
+export { Size, SizePX } from "./packages/Frameworks/_shared/sizing";
+export { normalizeUIKitImageSrc, normalizeBrandIconClass, normalizeLang } from "./packages/Frameworks/_shared/normalize";
+export { LAYER_Z_INDEX } from "./packages/Frameworks/_shared/layer.constants";
+export { default as DialogHeader } from "./packages/Frameworks/Dialog/contents/Dialog.header";
+export { default as DialogFooter } from "./packages/Frameworks/Dialog/contents/Dialog.footer";
 
 // Theme
 export {
@@ -39,40 +40,40 @@ export {
   type ThemeSystemProps,
   type BorderProps,
   type BackgroundBlurValue,
-} from "@/packages/Frameworks/Theme/Theme.types";
-export { Radius } from "@/packages/Frameworks/Theme/Radius.types";
-export type { RadiusProps, RadiusValue, RadiusScale } from "@/packages/Frameworks/Theme/Radius.types";
+} from "./packages/Frameworks/Theme/Theme.types";
+export { Radius } from "./packages/Frameworks/Theme/Radius.types";
+export type { RadiusProps, RadiusValue, RadiusScale } from "./packages/Frameworks/Theme/Radius.types";
 
 // Components
-export { default as Box } from "@/packages/Components/Box/Box";
-export { default as Button } from "@/packages/Components/Button/Button";
-export { default as Card } from "@/packages/Components/Card/Card";
-export { default as CardDefault } from "@/packages/Components/Card/Card.default";
-export { default as CardFoldable } from "@/packages/Components/Card/Card.foldable";
-export { default as Checkbox } from "@/packages/Components/Checkbox/Checkbox";
-export { default as CodeBox } from "@/packages/Components/CodeBox/CodeBox";
-export { default as ContextMenu } from "@/packages/Components/ContextMenu/ContextMenu";
-export { default as ContributionGraph } from "@/packages/Components/ContributionGraph/ContributionGraph";
-export { default as DatePicker } from "@/packages/Components/DatePicker/DatePicker";
-export { default as Divider } from "@/packages/Components/Divider/Divider";
-export { default as Header } from "@/packages/Components/Header/Header";
-export { default as Icon } from "@/packages/Components/Icon/Icon";
-export { default as Input } from "@/packages/Components/Input/Input";
-export { default as Label } from "@/packages/Components/Label/Label";
-export { default as Layout, LayoutGrid, LayoutSection } from "@/packages/Components/Layout/Layout";
-export { default as MapOSM } from "@/packages/Components/Maps/OSM/MapOSM";
-export { default as Nav } from "@/packages/Components/Nav/Nav";
-export { default as Pagination } from "@/packages/Components/Pagination/Pagination";
-export { default as Pill } from "@/packages/Components/Pill/Pill";
-export { default as Profile } from "@/packages/Components/Profile/Profile";
-export { default as Progress } from "@/packages/Components/Progress/Progress";
-export { default as Radio } from "@/packages/Components/Radio/Radio";
-export { default as Select } from "@/packages/Components/Select/Select";
-export { default as Skeleton } from "@/packages/Components/Skeleton/Skeleton";
-export { default as Spinner } from "@/packages/Components/Spinner/Spinner";
-export { default as Text } from "@/packages/Components/Text/Text";
-export { default as TimePicker } from "@/packages/Components/TimePicker/TimePicker";
-export { default as Timeline } from "@/packages/Components/Timeline/Timeline";
-export { default as Title } from "@/packages/Components/Title/Title";
-export { default as Toggle } from "@/packages/Components/Toggle/Toggle";
-export { default as Tooltip } from "@/packages/Components/Tooltip/Tooltip";
+export { default as Box } from "./packages/Components/Box/Box";
+export { default as Button } from "./packages/Components/Button/Button";
+export { default as Card } from "./packages/Components/Card/Card";
+export { default as CardDefault } from "./packages/Components/Card/Card.default";
+export { default as CardFoldable } from "./packages/Components/Card/Card.foldable";
+export { default as Checkbox } from "./packages/Components/Checkbox/Checkbox";
+export { default as CodeBox } from "./packages/Components/CodeBox/CodeBox";
+export { default as ContextMenu } from "./packages/Components/ContextMenu/ContextMenu";
+export { default as ContributionGraph } from "./packages/Components/ContributionGraph/ContributionGraph";
+export { default as DatePicker } from "./packages/Components/DatePicker/DatePicker";
+export { default as Divider } from "./packages/Components/Divider/Divider";
+export { default as Header } from "./packages/Components/Header/Header";
+export { default as Icon } from "./packages/Components/Icon/Icon";
+export { default as Input } from "./packages/Components/Input/Input";
+export { default as Label } from "./packages/Components/Label/Label";
+export { default as Layout, LayoutGrid, LayoutSection } from "./packages/Components/Layout/Layout";
+export { default as MapOSM } from "./packages/Components/Maps/OSM/MapOSM";
+export { default as Nav } from "./packages/Components/Nav/Nav";
+export { default as Pagination } from "./packages/Components/Pagination/Pagination";
+export { default as Pill } from "./packages/Components/Pill/Pill";
+export { default as Profile } from "./packages/Components/Profile/Profile";
+export { default as Progress } from "./packages/Components/Progress/Progress";
+export { default as Radio } from "./packages/Components/Radio/Radio";
+export { default as Select } from "./packages/Components/Select/Select";
+export { default as Skeleton } from "./packages/Components/Skeleton/Skeleton";
+export { default as Spinner } from "./packages/Components/Spinner/Spinner";
+export { default as Text } from "./packages/Components/Text/Text";
+export { default as TimePicker } from "./packages/Components/TimePicker/TimePicker";
+export { default as Timeline } from "./packages/Components/Timeline/Timeline";
+export { default as Title } from "./packages/Components/Title/Title";
+export { default as Toggle } from "./packages/Components/Toggle/Toggle";
+export { default as Tooltip } from "./packages/Components/Tooltip/Tooltip";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@musecat/uikit",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "private": false,
   "type": "module",
   "description": "High-performance Next.js React UI component library with Squircle shapes, theme tokens, and gesture-driven overlays",
@@ -33,7 +33,9 @@
   },
   "files": [
     "index.ts",
-    "packages/",
+    "packages",
+    "i18n",
+    "global.d.ts",
     ".agents/",
     "AGENTS.md",
     "CLAUDE.md",
@@ -41,6 +43,7 @@
     "LICENSE"
   ],
   "sideEffects": [
+    "**/*.css",
     "**/*.scss"
   ],
   "overrides": {
@@ -64,7 +67,6 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@musecat/functionkit": "^1.0.1",
     "@use-funnel/browser": "^0.0.17",
     "clsx": "^2.1.1",
     "embla-carousel": "^8.6.0",
@@ -72,17 +74,26 @@
     "embla-carousel-wheel-gestures": "^8.1.0",
     "figma-squircle": "1.1.0",
     "maplibre-gl": "^5.24.0",
-    "motion": "^12.42.2",
-    "next": "16.2.10",
     "next-intl": "^4.13.1",
     "prismjs": "^1.30.0",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
-    "sharp": "^0.35.3",
     "sonner": "^2.0.7"
   },
+  "optionalDependencies": {
+    "sharp": "^0.35.3"
+  },
+  "peerDependencies": {
+    "@musecat/functionkit": "^1.2.0",
+    "motion": "^12.0.0",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
   "devDependencies": {
     "@biomejs/biome": "2.5.2",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@musecat/functionkit": "^1.2.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -90,17 +101,29 @@
     "@types/prismjs": "^1.26.6",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@use-funnel/browser": "^0.0.17",
+    "@vitest/coverage-v8": "^4.1.10",
     "babel-plugin-react-compiler": "1.0.0",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "embla-carousel-wheel-gestures": "^8.1.0",
     "jsdom": "^29.1.1",
+    "maplibre-gl": "^5.24.0",
+    "motion": "^12.42.2",
+    "next": "16.2.10",
+    "next-intl": "^4.13.1",
     "prettier": "^3.9.5",
+    "prismjs": "^1.30.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
     "sass": "^1.101.0",
+    "sonner": "^2.0.7",
     "stylelint": "^17.14.0",
     "stylelint-config-standard-scss": "^17.0.0",
     "stylelint-declaration-strict-value": "^1.11.1",
     "stylelint-scss": "^7.2.0",
     "ts-morph": "^28.0.0",
     "typescript": "^6",
-    "vitest": "^4.1.10",
-    "@vitest/coverage-v8": "^4.1.10"
+    "vitest": "^4.1.10"
   }
 }

package/packages/Components/Box/Box.tsx

@@ -3,13 +3,13 @@ import type {
   BoxContentProps,
   BoxFooterProps,
   BoxProps,
-} from "@/packages/Components/Box/Box.types";
-import Divider from "@/packages/Components/Divider/Divider";
-import Icon from "@/packages/Components/Icon/Icon";
-import Spinner from "@/packages/Components/Spinner/Spinner";
-import Text from "@/packages/Components/Text/Text";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+} from "./Box.types";
+import Divider from "../Divider/Divider";
+import Icon from "../Icon/Icon";
+import Spinner from "../Spinner/Spinner";
+import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 const BoxContentContext = createContext(false);
 

package/packages/Components/Box/Box.types.ts

@@ -1,13 +1,13 @@
-import type { DividerProps } from "@/packages/Components/Divider/Divider.types";
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { TitleProps } from "@/packages/Components/Title/Title.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { DividerProps } from "../Divider/Divider.types";
+import type { IconProps } from "../Icon/Icon.types";
+import type { TitleProps } from "../Title/Title.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { PressableProps } from "../../Frameworks/Pressable/Pressable.types";
+import type { RadiusProps } from "../../Frameworks/Theme/Radius.types";
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export interface BoxProps extends ThemeSystemProps, RadiusProps, BorderProps {
   "data-color-mode"?: string;

package/packages/Components/Button/Button.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import clsx from "clsx";
-import type { ButtonProps } from "@/packages/Components/Button/Button.types";
-import Divider from "@/packages/Components/Divider/Divider";
-import Icon from "@/packages/Components/Icon/Icon";
-import Text from "@/packages/Components/Text/Text";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+import type { ButtonProps } from "./Button.types";
+import Divider from "../Divider/Divider";
+import Icon from "../Icon/Icon";
+import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 function resolveButtonEndIcon(iconEnd: ButtonProps["iconEnd"]) {
   if (!iconEnd?.pressable?.popover) {

package/packages/Components/Button/Button.types.ts

@@ -1,12 +1,12 @@
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { TextProps } from "@/packages/Components/Text/Text.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { IconProps } from "../Icon/Icon.types";
+import type { TextProps } from "../Text/Text.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { PressableProps } from "../../Frameworks/Pressable/Pressable.types";
+import type { RadiusProps } from "../../Frameworks/Theme/Radius.types";
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export type ButtonIconEndProps = Pick<
   IconProps,

package/packages/Components/Card/Card.default.tsx

@@ -1,15 +1,15 @@
 import clsx from "clsx";
-import { useInBoxContent } from "@/packages/Components/Box/Box";
-import styles from "@/packages/Components/Card/Card.module.scss";
-import type { CardDefaultProps } from "@/packages/Components/Card/Card.types";
-import { buildRenderKeys } from "@/packages/Components/Card/Card.utils";
-import Icon from "@/packages/Components/Icon/Icon";
-import Pill from "@/packages/Components/Pill/Pill";
-import Text from "@/packages/Components/Text/Text";
-import { normalizeCardIcon } from "@/packages/Components/Card/Card.utils";
-import StopParentInteraction from "@/packages/Frameworks/_shared/StopParentInteraction";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+import { useInBoxContent } from "../Box/Box";
+import styles from "./Card.module.scss";
+import type { CardDefaultProps } from "./Card.types";
+import { buildRenderKeys } from "./Card.utils";
+import Icon from "../Icon/Icon";
+import Pill from "../Pill/Pill";
+import Text from "../Text/Text";
+import { normalizeCardIcon } from "./Card.utils";
+import StopParentInteraction from "../../Frameworks/_shared/StopParentInteraction";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 export default function CardDefault({
   themePreset,

package/packages/Components/Card/Card.foldable.tsx

@@ -3,24 +3,24 @@
 import clsx from "clsx";
 import { animate, useMotionValue } from "motion/react";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { useInBoxContent } from "@/packages/Components/Box/Box";
-import styles from "@/packages/Components/Card/Card.module.scss";
-import type { CardFoldableProps } from "@/packages/Components/Card/Card.types";
-import { resolveState } from "@/packages/Components/Card/Card.types";
-import { buildRenderKeys } from "@/packages/Components/Card/Card.utils";
-import Icon from "@/packages/Components/Icon/Icon";
-import Pill from "@/packages/Components/Pill/Pill";
-import Text from "@/packages/Components/Text/Text";
-import { normalizeCardIcon } from "@/packages/Components/Card/Card.utils";
-import StopParentInteraction from "@/packages/Frameworks/_shared/StopParentInteraction";
+import { useInBoxContent } from "../Box/Box";
+import styles from "./Card.module.scss";
+import type { CardFoldableProps } from "./Card.types";
+import { resolveState } from "./Card.types";
+import { buildRenderKeys } from "./Card.utils";
+import Icon from "../Icon/Icon";
+import Pill from "../Pill/Pill";
+import Text from "../Text/Text";
+import { normalizeCardIcon } from "./Card.utils";
+import StopParentInteraction from "../../Frameworks/_shared/StopParentInteraction";
 import {
   getComputedPixelValue,
   SizePX,
   type UIKitSizeValue,
-} from "@/packages/Frameworks/_shared/sizing";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import type { RadiusValue } from "@/packages/Frameworks/Theme/Radius.types";
-import View from "@/packages/Frameworks/View/View";
+} from "../../Frameworks/_shared/sizing";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import type { RadiusValue } from "../../Frameworks/Theme/Radius.types";
+import View from "../../Frameworks/View/View";
 
 function useFoldProgress(
   activated: boolean,

package/packages/Components/Card/Card.tsx

@@ -1,6 +1,6 @@
-import type { CardProps } from "@/packages/Components/Card/Card.types";
-import CardDefault from "@/packages/Components/Card/Card.default";
-import CardFoldable from "@/packages/Components/Card/Card.foldable";
+import type { CardProps } from "./Card.types";
+import CardDefault from "./Card.default";
+import CardFoldable from "./Card.foldable";
 
 export default function Card(props: CardProps) {
   if (props.accordion) return <CardFoldable {...props} />;

package/packages/Components/Card/Card.types.ts

@@ -1,14 +1,14 @@
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { PillProps } from "@/packages/Components/Pill/Pill.types";
-import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { IconProps } from "../Icon/Icon.types";
+import type { PillProps } from "../Pill/Pill.types";
+import type { PressableProps } from "../../Frameworks/Pressable/Pressable.types";
+import type { RadiusProps } from "../../Frameworks/Theme/Radius.types";
 import type {
   BorderProps,
   ThemeBackgroundPaint,
   ThemePaint,
   ThemePreset,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export type Stateful<T> = T | { normal?: T; activated?: T };
 

package/packages/Components/Card/Card.utils.ts

@@ -1,4 +1,4 @@
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import type { IconProps } from "../Icon/Icon.types";
 
 const DEFAULT_CARD_BOX_ICON_OUTER_SIZE = 40;
 

package/packages/Components/Checkbox/Checkbox.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import styles from "@/packages/Components/Checkbox/Checkbox.module.scss";
-import type { CheckboxProps } from "@/packages/Components/Checkbox/Checkbox.types";
-import Icon from "@/packages/Components/Icon/Icon";
-import Text from "@/packages/Components/Text/Text";
-import { Size } from "@/packages/Frameworks/_shared/sizing";
-import View from "@/packages/Frameworks/View/View";
+import styles from "./Checkbox.module.scss";
+import type { CheckboxProps } from "./Checkbox.types";
+import Icon from "../Icon/Icon";
+import Text from "../Text/Text";
+import { Size } from "../../Frameworks/_shared/sizing";
+import View from "../../Frameworks/View/View";
 
 export default function Checkbox({
   title,

package/packages/Components/Checkbox/Checkbox.types.ts

@@ -1,10 +1,10 @@
-import type { TextProps } from "@/packages/Components/Text/Text.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { TextProps } from "../Text/Text.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { RadiusProps } from "../../Frameworks/Theme/Radius.types";
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export interface CheckboxProps
   extends Omit<

package/packages/Components/CodeBox/CodeBox.copy.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { NavigatorClipboard } from "@musecat/functionkit";
-import Icon from "@/packages/Components/Icon/Icon";
-import Text from "@/packages/Components/Text/Text";
-import View from "@/packages/Frameworks/View/View";
+import Icon from "../Icon/Icon";
+import Text from "../Text/Text";
+import View from "../../Frameworks/View/View";
 
 export default function CodeBox_Copy({
   language,

package/packages/Components/CodeBox/CodeBox.tsx

@@ -1,9 +1,9 @@
 import Prism from "prismjs";
-import CodeBox_Copy from "@/packages/Components/CodeBox/CodeBox.copy";
-import styles from "@/packages/Components/CodeBox/CodeBox.module.scss";
-import type { CodeBoxProps } from "@/packages/Components/CodeBox/CodeBox.types";
-import { normalizeLang } from "@/packages/Frameworks/_shared/normalize";
-import View from "@/packages/Frameworks/View/View";
+import CodeBox_Copy from "./CodeBox.copy";
+import styles from "./CodeBox.module.scss";
+import type { CodeBoxProps } from "./CodeBox.types";
+import { normalizeLang } from "../../Frameworks/_shared/normalize";
+import View from "../../Frameworks/View/View";
 import "prismjs/components/prism-bash";
 import "prismjs/components/prism-css";
 import "prismjs/components/prism-javascript";

package/packages/Components/CodeBox/CodeBox.types.ts

@@ -1,8 +1,8 @@
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { RadiusProps } from "../../Frameworks/Theme/Radius.types";
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export interface CodeBoxProps
   extends ThemeSystemProps,

package/packages/Components/ContextMenu/ContextMenu.options.tsx

@@ -6,12 +6,12 @@ import {
   memo,
   type ReactElement,
 } from "react";
-import styles from "@/packages/Components/ContextMenu/ContextMenu.module.scss";
-import type { ContentItem } from "@/packages/Components/ContextMenu/ContextMenu.types";
-import Icon from "@/packages/Components/Icon/Icon";
-import Text from "@/packages/Components/Text/Text";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+import styles from "./ContextMenu.module.scss";
+import type { ContentItem } from "./ContextMenu.types";
+import Icon from "../Icon/Icon";
+import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 export interface ContextMenuOptionProps {
   item: ContentItem;

package/packages/Components/ContextMenu/ContextMenu.tsx

@@ -9,19 +9,19 @@ import {
   useRef,
   useState,
 } from "react";
-import { Word } from "@/i18n/shared";
-import ContextMenuOption from "@/packages/Components/ContextMenu/ContextMenu.options";
+import { Word } from "../../../i18n/shared";
+import ContextMenuOption from "./ContextMenu.options";
 import type {
   ContentItem,
   ContextMenuProps,
-} from "@/packages/Components/ContextMenu/ContextMenu.types";
+} from "./ContextMenu.types";
 import {
   handleEndKey,
   handleHomeKey,
-} from "@/packages/Components/Select/Select.keyboard";
-import Text from "@/packages/Components/Text/Text";
-import Dialog from "@/packages/Frameworks/Dialog/Dialog";
-import View from "@/packages/Frameworks/View/View";
+} from "../Select/Select.keyboard";
+import Text from "../Text/Text";
+import Dialog from "../../Frameworks/Dialog/Dialog";
+import View from "../../Frameworks/View/View";
 
 const clampScrollTop = (element: HTMLElement, nextScrollTop: number) => {
   const maxScrollTop = Math.max(0, element.scrollHeight - element.clientHeight);

package/packages/Components/ContextMenu/ContextMenu.types.ts

@@ -4,7 +4,7 @@ import type {
   ExitConfig,
   PopoverConfig,
   SheetConfig,
-} from "@/packages/Frameworks/Dialog/Dialog.types";
+} from "../../Frameworks/Dialog/Dialog.types";
 
 export interface ContentItem {
   type: "option";