@musecat/uikit 0.1.3 → 0.2.1

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);
@@ -357,6 +357,7 @@ export default function ContextMenu(props: ContextMenuProps): ReactElement {
             ) : (
               contents.map((item, index) => (
                 <ContextMenuOption
+                  // biome-ignore lint/suspicious/noArrayIndexKey: items have stable order
                   key={`${item.value}-${index}`}
                   item={item}
                   index={index}

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";

package/packages/Components/ContributionGraph/ContributionGraph.tsx

@@ -6,19 +6,18 @@ import {
   getUtcWeekdayIndex,
   parseUtcDateInput,
 } from "@musecat/functionkit";
-import clsx from "clsx";
 import {
   type PointerEvent as ReactPointerEvent,
   useMemo,
   useRef,
   useState,
 } from "react";
-import { Word } from "@/i18n/shared";
-import Box from "@/packages/Components/Box/Box";
-import styles from "@/packages/Components/ContributionGraph/ContributionGraph.module.scss";
-import type { ContributionGraphProps } from "@/packages/Components/ContributionGraph/ContributionGraph.types";
-import Text from "@/packages/Components/Text/Text";
-import View from "@/packages/Frameworks/View/View";
+import { Word } from "../../../i18n/shared";
+import Box from "../Box/Box";
+import styles from "./ContributionGraph.module.scss";
+import type { ContributionGraphProps } from "./ContributionGraph.types";
+import Text from "../Text/Text";
+import View from "../../Frameworks/View/View";
 
 const DAY_LABEL_KEYS = [
   "sun",
@@ -95,7 +94,13 @@ function GraphCell({
       className={styles.Cell}
       data-level={level}
       data-in-range={inRange ? "true" : "false"}
-      title={buildCellTitle({ date, total_count, changelog_count, flag_count, legacy_ticket_count })}
+      title={buildCellTitle({
+        date,
+        total_count,
+        changelog_count,
+        flag_count,
+        legacy_ticket_count,
+      })}
       style={{
         gridColumn: `${weekIndex + 1}`,
         gridRow: `${dayIndex + 1}`,
@@ -387,7 +392,11 @@ export default function ContributionGraph({
               style={{ position: "relative", marginLeft: "3.6rem" }}
             >
               {graphData.months.map((m) => (
-                <MonthLabel key={`${m.title}-${m.colIndex}`} title={m.title} colIndex={m.colIndex} />
+                <MonthLabel
+                  key={`${m.title}-${m.colIndex}`}
+                  title={m.title}
+                  colIndex={m.colIndex}
+                />
               ))}
             </View>
 

package/packages/Components/ContributionGraph/ContributionGraph.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 ContributionActivity {
   date: string | Date;

package/packages/Components/DatePicker/DatePicker.calendar.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import styles from "@/packages/Components/DatePicker/DatePicker.module.scss";
+import styles from "./DatePicker.module.scss";
 import {
   isDateDisabled,
   isSameDay,
   toYMD,
-} from "@/packages/Components/DatePicker/DatePicker.utils";
-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";
+} from "./DatePicker.utils";
+import Icon from "../Icon/Icon";
+import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 function NavBtn({
   onClick,

package/packages/Components/DatePicker/DatePicker.core.tsx

@@ -9,8 +9,8 @@ import {
   useMemo,
   useRef,
 } from "react";
-import styles from "@/packages/Components/DatePicker/DatePicker.module.scss";
-import Text from "@/packages/Components/Text/Text";
+import styles from "./DatePicker.module.scss";
+import Text from "../Text/Text";
 
 type SingleSegment = "year" | "month" | "day";
 type RangeSegment =

package/packages/Components/DatePicker/DatePicker.tsx

@@ -7,24 +7,28 @@ import {
   useRef,
   useState,
 } from "react";
-import { normalizeLocale } from "@/i18n/shared";
-import { Calendar } from "@/packages/Components/DatePicker/DatePicker.calendar";
-import DatePickerCore from "@/packages/Components/DatePicker/DatePicker.core";
-import { useCalendar } from "@/packages/Components/DatePicker/hooks/useCalendar";
-import { useSelection } from "@/packages/Components/DatePicker/hooks/useSelection";
-import styles from "@/packages/Components/DatePicker/DatePicker.module.scss";
-import type { DatePickerProps } from "@/packages/Components/DatePicker/DatePicker.types";
+import { normalizeLocale } from "../../../i18n/shared";
+import { Calendar } from "./DatePicker.calendar";
+import DatePickerCore, {
+  type DatePickerCoreRef,
+} from "./DatePicker.core";
+import styles from "./DatePicker.module.scss";
+import type { DatePickerProps } from "./DatePicker.types";
 import {
   isBefore,
   parseDate,
   toYMD,
-} from "@/packages/Components/DatePicker/DatePicker.utils";
-import Icon from "@/packages/Components/Icon/Icon";
-import Label from "@/packages/Components/Label/Label";
-import Text from "@/packages/Components/Text/Text";
-import TimePickerCore from "@/packages/Components/TimePicker/TimePicker.core";
-import Dialog from "@/packages/Frameworks/Dialog/Dialog";
-import View from "@/packages/Frameworks/View/View";
+} from "./DatePicker.utils";
+import { useCalendar } from "./hooks/useCalendar";
+import { useSelection } from "./hooks/useSelection";
+import Icon from "../Icon/Icon";
+import Label from "../Label/Label";
+import Text from "../Text/Text";
+import TimePickerCore, {
+  type TimePickerCoreRef,
+} from "../TimePicker/TimePicker.core";
+import Dialog from "../../Frameworks/Dialog/Dialog";
+import View from "../../Frameworks/View/View";
 
 function isValidDate(y: number, m: number, d: number): boolean {
   if (y < 1000 || y > 9999) return false;
@@ -333,9 +337,18 @@ export default function DatePicker({
         isValidDate(ey, em, ed) &&
         (!showTime || (eh !== null && emin !== null));
 
-      if (isStartValid && isEndValid) {
-        let start = new Date(sy!, sm! - 1, sd!, sh ?? 0, smin ?? 0);
-        let end = new Date(ey!, em! - 1, ed!, eh ?? 0, emin ?? 0);
+      if (
+        isStartValid &&
+        isEndValid &&
+        sy !== null &&
+        sm !== null &&
+        sd !== null &&
+        ey !== null &&
+        em !== null &&
+        ed !== null
+      ) {
+        let start = new Date(sy, sm - 1, sd, sh ?? 0, smin ?? 0);
+        let end = new Date(ey, em - 1, ed, eh ?? 0, emin ?? 0);
         if (isBefore(end, start)) {
           [start, end] = [end, start];
         }
@@ -344,8 +357,16 @@ export default function DatePicker({
           setRangeEnd(end);
         }
         onRangeChange?.(toYMD(start, showTime), toYMD(end, showTime));
-      } else if (isStartValid && ey === null && em === null && ed === null) {
-        const start = new Date(sy!, sm! - 1, sd!, sh ?? 0, smin ?? 0);
+      } else if (
+        isStartValid &&
+        sy !== null &&
+        sm !== null &&
+        sd !== null &&
+        ey === null &&
+        em === null &&
+        ed === null
+      ) {
+        const start = new Date(sy, sm - 1, sd, sh ?? 0, smin ?? 0);
         if (!isControlled) {
           setRangeStart(start);
           setRangeEnd(null);
@@ -357,7 +378,7 @@ export default function DatePicker({
   );
 
   const handleDateChange = useCallback(
-    (seg: any, val: number | null) => {
+    (seg: string, val: number | null) => {
       const setter = (() => {
         switch (seg) {
           case "year":
@@ -382,7 +403,7 @@ export default function DatePicker({
             return null;
         }
       })();
-      if (setter) setter(val as any);
+      if (setter) setter(val);
 
       if (mode === "single") {
         emitSingle(
@@ -507,12 +528,12 @@ export default function DatePicker({
     ],
   );
 
-  const singleDateRef = useRef<any>(null);
-  const singleTimeRef = useRef<any>(null);
-  const startDateRef = useRef<any>(null);
-  const startTimeRef = useRef<any>(null);
-  const endDateRef = useRef<any>(null);
-  const endTimeRef = useRef<any>(null);
+  const singleDateRef = useRef<DatePickerCoreRef | null>(null);
+  const singleTimeRef = useRef<TimePickerCoreRef | null>(null);
+  const startDateRef = useRef<DatePickerCoreRef | null>(null);
+  const startTimeRef = useRef<TimePickerCoreRef | null>(null);
+  const endDateRef = useRef<DatePickerCoreRef | null>(null);
+  const endTimeRef = useRef<TimePickerCoreRef | null>(null);
 
   useEffect(() => {
     if (!isControlled) return;

package/packages/Components/DatePicker/DatePicker.types.ts

@@ -1,4 +1,4 @@
-import type { LabelProps } from "@/packages/Components/Label/Label.types";
+import type { LabelProps } from "../Label/Label.types";
 
 export type DatePickerMode = "single" | "range";
 

package/packages/Components/DatePicker/hooks/useCalendar.ts

@@ -1,6 +1,6 @@
 "use client";
 import { useCallback, useMemo, useState } from "react";
-import { getCalendarDays } from "@/packages/Components/DatePicker/DatePicker.utils";
+import { getCalendarDays } from "../DatePicker.utils";
 
 interface UseCalendarOptions {
   initialYear: number;

package/packages/Components/DatePicker/hooks/useSelection.ts

@@ -1,6 +1,6 @@
 "use client";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import type { DatePickerMode } from "@/packages/Components/DatePicker/DatePicker.types";
+import type { DatePickerMode } from "../DatePicker.types";
 import {
   formatDisplay,
   formatRangeDisplay,
@@ -9,7 +9,7 @@ import {
   isSameDay,
   parseDate,
   toYMD,
-} from "@/packages/Components/DatePicker/DatePicker.utils";
+} from "../DatePicker.utils";
 
 interface UseSelectionOptions {
   mode: DatePickerMode;

package/packages/Components/Divider/Divider.tsx

@@ -1,5 +1,5 @@
-import type { DividerProps } from "@/packages/Components/Divider/Divider.types";
-import { Size } from "@/packages/Frameworks/_shared/sizing";
+import type { DividerProps } from "./Divider.types";
+import { Size } from "../../Frameworks/_shared/sizing";
 
 export default function Divider({
   vertical = false,

package/packages/Components/Divider/Divider.types.ts

@@ -1,4 +1,4 @@
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
 
 export interface DividerProps {
   "data-color-mode"?: string;

package/packages/Components/Header/Header.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
-import styles from "@/packages/Components/Header/Header.module.scss";
-import type { HeaderProps } from "@/packages/Components/Header/Header.types";
-import EdgeEffect from "@/packages/Frameworks/EdgeEffect/EdgeEffect";
-import View from "@/packages/Frameworks/View/View";
+import styles from "./Header.module.scss";
+import type { HeaderProps } from "./Header.types";
+import EdgeEffect from "../../Frameworks/EdgeEffect/EdgeEffect";
+import View from "../../Frameworks/View/View";
 
 export default function Header({
   "data-color-mode": dataTheme,

package/packages/Components/Icon/Icon.group.tsx

@@ -1,12 +1,12 @@
 import { Children } from "react";
-import type { IconGroupProps } from "@/packages/Components/Icon/Icon.group.types";
-import Icon from "@/packages/Components/Icon/Icon";
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import Icon from "./Icon";
+import type { IconGroupProps } from "./Icon.group.types";
+import type { IconProps } from "./Icon.types";
 import {
   Size,
   type UIKitSizeValue,
-} from "@/packages/Frameworks/_shared/sizing";
-import View from "@/packages/Frameworks/View/View";
+} from "../../Frameworks/_shared/sizing";
+import View from "../../Frameworks/View/View";
 
 const GROUP_PADDING = 2;
 const ICON_PADDING = 6;

package/packages/Components/Icon/Icon.group.types.ts

@@ -1,10 +1,10 @@
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { IconProps } from "./Icon.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 IconGroupProps extends BorderProps, RadiusProps {
   children?: React.ReactNode;

package/packages/Components/Icon/Icon.tsx

@@ -1,16 +1,16 @@
 import clsx from "clsx";
 import Image from "next/image";
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import SVGData from "@/packages/Components/Icon/SVG/data";
-import Spinner from "@/packages/Components/Spinner/Spinner";
-import Text from "@/packages/Components/Text/Text";
+import type { IconProps } from "./Icon.types";
+import SVGData from "./SVG/data";
+import Spinner from "../Spinner/Spinner";
+import Text from "../Text/Text";
 import {
   normalizeBrandIconClass as _normalizeBrandIconClass,
   normalizeUIKitImageSrc as _normalizeUIKitImageSrc,
-} from "@/packages/Frameworks/_shared/normalize";
-import { Size, SizePX } from "@/packages/Frameworks/_shared/sizing";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+} from "../../Frameworks/_shared/normalize";
+import { Size, SizePX } from "../../Frameworks/_shared/sizing";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 const normalizeUIKitImageSrc = _normalizeUIKitImageSrc;
 const normalizeBrandIconClass = _normalizeBrandIconClass;

package/packages/Components/Icon/Icon.types.ts

@@ -1,14 +1,14 @@
-import type { SpinnerProps } from "@/packages/Components/Spinner/Spinner.types";
-import type { TextProps } from "@/packages/Components/Text/Text.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 { SpinnerProps } from "../Spinner/Spinner.types";
+import type { TextProps } from "../Text/Text.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,
   ThemePaint,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 type SVGPathPaint = React.SVGProps<SVGPathElement>["fill"];
 type SVGPathStrokeWidth = React.SVGProps<SVGPathElement>["strokeWidth"];

package/packages/Components/Input/Input.tsx

@@ -2,11 +2,11 @@
 
 import clsx from "clsx";
 import { useId } from "react";
-import styles from "@/packages/Components/Input/Input.module.scss";
-import type { InputProps } from "@/packages/Components/Input/Input.types";
-import Label from "@/packages/Components/Label/Label";
-import Text from "@/packages/Components/Text/Text";
-import View from "@/packages/Frameworks/View/View";
+import styles from "./Input.module.scss";
+import type { InputProps } from "./Input.types";
+import Label from "../Label/Label";
+import Text from "../Text/Text";
+import View from "../../Frameworks/View/View";
 
 export default function Input({
   type,

package/packages/Components/Input/Input.types.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { LabelSharedProps } from "@/packages/Components/Label/Label.types";
+import type { LabelSharedProps } from "../Label/Label.types";
 
 export interface InputProps
   extends Omit<

package/packages/Components/Label/Label.tsx

@@ -1,11 +1,11 @@
 import clsx from "clsx";
-import { Word } from "@/i18n/shared";
-import Icon from "@/packages/Components/Icon/Icon";
-import styles from "@/packages/Components/Label/Label.module.scss";
-import type { LabelProps } from "@/packages/Components/Label/Label.types";
-import Text from "@/packages/Components/Text/Text";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+import { Word } from "../../../i18n/shared";
+import Icon from "../Icon/Icon";
+import styles from "./Label.module.scss";
+import type { LabelProps } from "./Label.types";
+import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 export default function Label({
   children,

package/packages/Components/Label/Label.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 LabelProps extends ThemeSystemProps, BorderProps, RadiusProps {
   "data-color-mode"?: string;

package/packages/Components/Layout/Layout.docs.tsx

@@ -1,11 +1,11 @@
 import clsx from "clsx";
 import Image from "next/image";
-import Icon from "@/packages/Components/Icon/Icon";
-import styles from "@/packages/Components/Layout/Layout.docs.module.scss";
-import type { DocsLayoutProps } from "@/packages/Components/Layout/Layout.docs.types";
-import Profile from "@/packages/Components/Profile/Profile";
-import Text from "@/packages/Components/Text/Text";
-import View from "@/packages/Frameworks/View/View";
+import Icon from "../Icon/Icon";
+import styles from "./Layout.docs.module.scss";
+import type { DocsLayoutProps } from "./Layout.docs.types";
+import Profile from "../Profile/Profile";
+import Text from "../Text/Text";
+import View from "../../Frameworks/View/View";
 export default function DocsLayout({
   children,
   image,

package/packages/Components/Layout/Layout.docs.types.ts

@@ -1,5 +1,5 @@
-import type { ProfileProps } from "@/packages/Components/Profile/Profile.types";
-import type { TextProps } from "@/packages/Components/Text/Text.types";
+import type { ProfileProps } from "../Profile/Profile.types";
+import type { TextProps } from "../Text/Text.types";
 
 export interface DocsLayoutProps {
   children?: React.ReactNode;

package/packages/Components/Layout/Layout.tsx

@@ -1,21 +1,21 @@
 import clsx from "clsx";
 import Image from "next/image";
 import { Children, isValidElement } from "react";
-import styles from "@/packages/Components/Layout/Layout.module.scss";
+import styles from "./Layout.module.scss";
 import type {
   BackgroundImageValue,
   LayoutGridViewProps,
   LayoutProps,
   LayoutSectionProps,
-} from "@/packages/Components/Layout/Layout.types";
-import Title from "@/packages/Components/Title/Title";
-import type { TitleProps } from "@/packages/Components/Title/Title.types";
-import { normalizeUIKitImageSrc } from "@/packages/Frameworks/_shared/normalize";
+} from "./Layout.types";
+import Title from "../Title/Title";
+import type { TitleProps } from "../Title/Title.types";
+import { normalizeUIKitImageSrc } from "../../Frameworks/_shared/normalize";
 import {
   Size,
   type UIKitSizeValue,
-} from "@/packages/Frameworks/_shared/sizing";
-import View from "@/packages/Frameworks/View/View";
+} from "../../Frameworks/_shared/sizing";
+import View from "../../Frameworks/View/View";
 
 function resolveBgMargin(
   margin: NonNullable<BackgroundImageValue["margin"]>,

package/packages/Components/Layout/Layout.types.ts

@@ -1,8 +1,8 @@
 import type { CSSProperties } from "react";
-import type { TextProps } from "@/packages/Components/Text/Text.types";
-import type { TitleProps } from "@/packages/Components/Title/Title.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { ViewProps } from "@/packages/Frameworks/View/View.types";
+import type { TextProps } from "../Text/Text.types";
+import type { TitleProps } from "../Title/Title.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { ViewProps } from "../../Frameworks/View/View.types";
 
 type BackgroundMarginUnitValue = UIKitSizeValue;
 

package/packages/Components/Maps/OSM/MapOSM.tsx

@@ -2,10 +2,10 @@
 
 import clsx from "clsx";
 import maplibregl from "maplibre-gl";
-import styles from "@/packages/Components/Maps/OSM/MapOSM.module.scss";
-import { resolveSafeMapStyle } from "@/packages/Components/Maps/OSM/MapOSM.shared";
-import type { MapOSMProps } from "@/packages/Components/Maps/OSM/MapOSM.types";
-import View from "@/packages/Frameworks/View/View";
+import styles from "./MapOSM.module.scss";
+import { resolveSafeMapStyle } from "./MapOSM.shared";
+import type { MapOSMProps } from "./MapOSM.types";
+import View from "../../../Frameworks/View/View";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { useCallback, useEffect, useRef } from "react";
 

package/packages/Components/Nav/Nav.tsx

@@ -5,14 +5,14 @@ import clsx from "clsx";
 import { useRouter } from "next/navigation";
 import type React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import Icon from "@/packages/Components/Icon/Icon";
-import { useNavDrag } from "@/packages/Components/Nav/hooks/useNavDrag";
-import { useNavIndicator } from "@/packages/Components/Nav/hooks/useNavIndicator";
-import styles from "@/packages/Components/Nav/Nav.module.scss";
-import type { NavProps } from "@/packages/Components/Nav/Nav.types";
-import Text from "@/packages/Components/Text/Text";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+import Icon from "../Icon/Icon";
+import { useNavDrag } from "./hooks/useNavDrag";
+import { useNavIndicator } from "./hooks/useNavIndicator";
+import styles from "./Nav.module.scss";
+import type { NavProps } from "./Nav.types";
+import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 export default function Nav({
   name,

package/packages/Components/Nav/Nav.types.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from "react";
-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";
 
 export interface NavOption extends Omit<PressableProps, "title"> {
   checked?: boolean;