@musecat/uikit 0.1.3 → 0.2.0

package/packages/Frameworks/Dialog/hooks/useDialogPosition.ts

@@ -1,7 +1,7 @@
 import { useViewportHeight } from "@musecat/functionkit";
 import { useCallback, useLayoutEffect, useState } from "react";
-import { SizePX } from "@/packages/Frameworks/_shared/sizing";
-import type { OffsetConfig } from "@/packages/Frameworks/Dialog/Dialog.types";
+import { SizePX } from "../../_shared/sizing";
+import type { OffsetConfig } from "../Dialog.types";
 
 export type PopoverPlacement =
   | "top"

package/packages/Frameworks/Dialog/hooks/useSheetDrag.ts

@@ -2,8 +2,8 @@
 
 import { animate, type MotionValue, useDragControls } from "motion/react";
 import { useCallback, useRef } from "react";
-import { toPx } from "@/packages/Frameworks/Dialog/hooks/useSheetGeometry";
-import { motionTransitions } from "@/packages/Frameworks/Motion/Motion.presets";
+import { toPx } from "./useSheetGeometry";
+import { motionTransitions } from "../../Motion/Motion.presets";
 
 const CLOSE_VELOCITY = 900;
 const CLOSE_DISTANCE_RATIO = 0.34;

package/packages/Frameworks/Dialog/hooks/useSheetGeometry.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import type { SheetConfig } from "@/packages/Frameworks/Dialog/Dialog.types";
+import type { SheetConfig } from "../Dialog.types";
 
 function toPx(
   value: number | string | undefined,
@@ -146,7 +146,7 @@ export function useSheetGeometry({
   const normalizedSnapPoints = useMemo(
     () =>
       config?.snapPoints?.length ? normalizeSnapPoints(config.snapPoints) : [1],
-    [config?.snapPoints?.length, config.snapPoints],
+    [config?.snapPoints?.length, config?.snapPoints],
   );
 
   const maxSnap = useMemo(

package/packages/Frameworks/Dialog/hooks/useSheetProgressive.ts

@@ -2,7 +2,7 @@
 
 import type { MotionValue } from "motion/react";
 import { useEffect, useMemo, useState } from "react";
-import type { RadiusValue } from "@/packages/Frameworks/Theme/Radius.types";
+import type { RadiusValue } from "../../Theme/Radius.types";
 
 const EDGE_INSET_MAX_PX = 8;
 const BOTTOM_GAP_PX = 8;

package/packages/Frameworks/Dialog/renderers/renderModal.tsx

@@ -3,21 +3,21 @@
 import { AnimatePresence } from "motion/react";
 import type { ReactNode } from "react";
 import { useCallback, useEffect, useRef } from "react";
-import { useScrollLock } from "@/packages/Frameworks/_shared/bodyScrollLock";
-import { LAYER_Z_INDEX } from "@/packages/Frameworks/_shared/layer.constants";
-import DialogFooter from "@/packages/Frameworks/Dialog/contents/Dialog.footer";
-import DialogHeader from "@/packages/Frameworks/Dialog/contents/Dialog.header";
-import BackgroundWrapper from "@/packages/Frameworks/Dialog/Dialog.background";
+import { useScrollLock } from "../../_shared/bodyScrollLock";
+import { LAYER_Z_INDEX } from "../../_shared/layer.constants";
+import DialogFooter from "../contents/Dialog.footer";
+import DialogHeader from "../contents/Dialog.header";
+import BackgroundWrapper from "../Dialog.background";
 import type {
   DialogOutsideOptions,
   ModalConfig,
-} from "@/packages/Frameworks/Dialog/Dialog.types";
+} from "../Dialog.types";
 import {
   DialogPortal,
   useEscapeClose,
-} from "@/packages/Frameworks/Dialog/Dialog.utils";
-import { motionPresets } from "@/packages/Frameworks/Motion/Motion.presets";
-import View from "@/packages/Frameworks/View/View";
+} from "../Dialog.utils";
+import { motionPresets } from "../../Motion/Motion.presets";
+import View from "../../View/View";
 
 interface RenderModalProps {
   open: boolean;

package/packages/Frameworks/Dialog/renderers/renderPopover.tsx

@@ -3,23 +3,23 @@
 import { getFloatingTransformOrigin } from "@musecat/functionkit";
 import { AnimatePresence } from "motion/react";
 import { type ReactNode, useCallback, useEffect, useRef } from "react";
-import { useScrollLock } from "@/packages/Frameworks/_shared/bodyScrollLock";
-import { LAYER_Z_INDEX } from "@/packages/Frameworks/_shared/layer.constants";
-import { Size } from "@/packages/Frameworks/_shared/sizing";
-import DialogFooter from "@/packages/Frameworks/Dialog/contents/Dialog.footer";
-import DialogHeader from "@/packages/Frameworks/Dialog/contents/Dialog.header";
-import BackgroundWrapper from "@/packages/Frameworks/Dialog/Dialog.background";
+import { useScrollLock } from "../../_shared/bodyScrollLock";
+import { LAYER_Z_INDEX } from "../../_shared/layer.constants";
+import { Size } from "../../_shared/sizing";
+import DialogFooter from "../contents/Dialog.footer";
+import DialogHeader from "../contents/Dialog.header";
+import BackgroundWrapper from "../Dialog.background";
 import type {
   DialogOutsideOptions,
   PopoverConfig,
-} from "@/packages/Frameworks/Dialog/Dialog.types";
+} from "../Dialog.types";
 import {
   DialogPortal,
   useEscapeClose,
-} from "@/packages/Frameworks/Dialog/Dialog.utils";
-import { useDialogPosition } from "@/packages/Frameworks/Dialog/hooks/useDialogPosition";
-import { motionPresets } from "@/packages/Frameworks/Motion/Motion.presets";
-import View from "@/packages/Frameworks/View/View";
+} from "../Dialog.utils";
+import { useDialogPosition } from "../hooks/useDialogPosition";
+import { motionPresets } from "../../Motion/Motion.presets";
+import View from "../../View/View";
 
 interface RenderPopoverProps {
   open: boolean;

package/packages/Frameworks/Dialog/renderers/renderSheet.tsx

@@ -13,27 +13,27 @@ import {
   useRef,
   useState,
 } from "react";
-import { useScrollLock } from "@/packages/Frameworks/_shared/bodyScrollLock";
-import { LAYER_Z_INDEX } from "@/packages/Frameworks/_shared/layer.constants";
-import { Size } from "@/packages/Frameworks/_shared/sizing";
-import DialogFooter from "@/packages/Frameworks/Dialog/contents/Dialog.footer";
-import DialogHeader from "@/packages/Frameworks/Dialog/contents/Dialog.header";
-import BackgroundWrapper from "@/packages/Frameworks/Dialog/Dialog.background";
+import { useScrollLock } from "../../_shared/bodyScrollLock";
+import { LAYER_Z_INDEX } from "../../_shared/layer.constants";
+import { Size } from "../../_shared/sizing";
+import DialogFooter from "../contents/Dialog.footer";
+import DialogHeader from "../contents/Dialog.header";
+import BackgroundWrapper from "../Dialog.background";
 import type {
   DialogOutsideOptions,
   SheetConfig,
-} from "@/packages/Frameworks/Dialog/Dialog.types";
+} from "../Dialog.types";
 import {
   DialogPortal,
   useEscapeClose,
-} from "@/packages/Frameworks/Dialog/Dialog.utils";
-import { useSheetDrag } from "@/packages/Frameworks/Dialog/hooks/useSheetDrag";
-import { resolveInitialSnapIndex } from "@/packages/Frameworks/Dialog/hooks/useSheetGeometry";
-import { useSheetGeometry } from "@/packages/Frameworks/Dialog/hooks/useSheetGeometry";
-import { useSheetProgressive } from "@/packages/Frameworks/Dialog/hooks/useSheetProgressive";
-import { motionTransitions } from "@/packages/Frameworks/Motion/Motion.presets";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+} from "../Dialog.utils";
+import { useSheetDrag } from "../hooks/useSheetDrag";
+import { resolveInitialSnapIndex } from "../hooks/useSheetGeometry";
+import { useSheetGeometry } from "../hooks/useSheetGeometry";
+import { useSheetProgressive } from "../hooks/useSheetProgressive";
+import { motionTransitions } from "../../Motion/Motion.presets";
+import Pressable from "../../Pressable/Pressable";
+import View from "../../View/View";
 
 interface RenderSheetProps {
   open: boolean;

package/packages/Frameworks/EdgeEffect/EdgeEffect.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { memo, useMemo } from "react";
-import type { EdgeEffectProps } from "@/packages/Frameworks/EdgeEffect/EdgeEffect.types";
-import View from "@/packages/Frameworks/View/View";
+import type { EdgeEffectProps } from "./EdgeEffect.types";
+import View from "../View/View";
 
 const OPPOSITE_SIDE: Record<
   "left" | "right" | "top" | "bottom",

package/packages/Frameworks/EdgeEffect/EdgeEffect.types.ts

@@ -1,4 +1,4 @@
-import type { ViewProps } from "@/packages/Frameworks/View/View.types";
+import type { ViewProps } from "../View/View.types";
 
 export interface EdgeEffectProps extends Omit<ViewProps, "children"> {
   side?: "left" | "right" | "top" | "bottom";

package/packages/Frameworks/Pressable/Pressable.tsx

@@ -15,21 +15,21 @@ import {
   useRef,
   useState,
 } from "react";
-import { resolvePadding } from "@/packages/Frameworks/_shared/Padding.types";
-import { Size } from "@/packages/Frameworks/_shared/sizing";
-import Dialog from "@/packages/Frameworks/Dialog/Dialog";
-import styles from "@/packages/Frameworks/Pressable/Pressable.module.scss";
-import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
-import Squircle from "@/packages/Frameworks/Squircle/Squircle";
-import { Radius } from "@/packages/Frameworks/Theme/Radius.types";
+import { resolvePadding } from "../_shared/Padding.types";
+import { Size } from "../_shared/sizing";
+import Dialog from "../Dialog/Dialog";
+import styles from "./Pressable.module.scss";
+import type { PressableProps } from "./Pressable.types";
+import Squircle from "../Squircle/Squircle";
+import { Radius } from "../Theme/Radius.types";
 import {
   BackgroundBlur,
   Border,
   resolveThemeClasses,
   resolveThemeHasBorder,
   Shadow,
-} from "@/packages/Frameworks/Theme/Theme.types";
-import View from "@/packages/Frameworks/View/View";
+} from "../Theme/Theme.types";
+import View from "../View/View";
 
 export const ButtonNestingContext = createContext(false);
 export const PopoverContext = createContext<{

package/packages/Frameworks/Pressable/Pressable.types.ts

@@ -1,13 +1,13 @@
 import type { MotionProps } from "motion/react";
 import type { LinkProps } from "next/link";
-import type { PaddingProps } from "@/packages/Frameworks/_shared/Padding.types";
-import type { WindProps } from "@/packages/Frameworks/_shared/Wind.types";
-import type { PopoverConfig } from "@/packages/Frameworks/Dialog/Dialog.types";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { PaddingProps } from "../_shared/Padding.types";
+import type { WindProps } from "../_shared/Wind.types";
+import type { PopoverConfig } from "../Dialog/Dialog.types";
+import type { RadiusProps } from "../Theme/Radius.types";
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../Theme/Theme.types";
 export interface PressableProps
   extends Omit<
       React.HTMLAttributes<HTMLElement>,

package/packages/Frameworks/Squircle/Squircle.tsx

@@ -14,9 +14,9 @@ import {
 import {
   getComputedPixelValue,
   SizePX,
-} from "@/packages/Frameworks/_shared/sizing";
-import type { SquircleProps } from "@/packages/Frameworks/Squircle/Squircle.types";
-import { Radius as resolveRadius } from "@/packages/Frameworks/Theme/Radius.types";
+} from "../_shared/sizing";
+import type { SquircleProps } from "./Squircle.types";
+import { Radius as resolveRadius } from "../Theme/Radius.types";
 
 function resolveCornerRadius(
   radius: SquircleProps["radius"],

package/packages/Frameworks/Squircle/Squircle.types.ts

@@ -1,6 +1,6 @@
 import type { MotionProps } from "motion/react";
 import type { ElementType, HTMLAttributes } from "react";
-import type { RadiusValue } from "@/packages/Frameworks/Theme/Radius.types";
+import type { RadiusValue } from "../Theme/Radius.types";
 
 export interface SquircleProps
   extends Omit<HTMLAttributes<HTMLElement>, "color"> {

package/packages/Frameworks/Theme/Radius.types.ts

@@ -1,9 +1,9 @@
 import {
   Size,
   type UIKitSizeValue,
-} from "@/packages/Frameworks/_shared/sizing";
+} from "../_shared/sizing";
 
-type RadiusScale =
+export type RadiusScale =
   | "None"
   | "ExtraLight"
   | "Light"

package/packages/Frameworks/Toaster/Toaster.boot.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import Icon from "@/packages/Components/Icon/Icon";
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import styles from "@/packages/Frameworks/Toaster/Toaster.module.scss";
-import type { ToasterBootstrapProps } from "@/packages/Frameworks/Toaster/Toaster.types";
+import Icon from "../../Components/Icon/Icon";
+import type { IconProps } from "../../Components/Icon/Icon.types";
+import styles from "./Toaster.module.scss";
+import type { ToasterBootstrapProps } from "./Toaster.types";
 import clsx from "clsx";
 import { Toaster, toast } from "sonner";
 

package/packages/Frameworks/Toaster/Toaster.types.ts

@@ -1,5 +1,5 @@
 import type { ToasterProps } from "sonner";
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import type { IconProps } from "../../Components/Icon/Icon.types";
 
 export interface ToasterBootstrapProps extends ToasterProps {
   "data-color-mode"?: string;

package/packages/Frameworks/View/DNDView/DNDView.tsx

@@ -33,15 +33,15 @@ import {
   useRef,
   useState,
 } from "react";
-import Icon from "@/packages/Components/Icon/Icon";
-import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
-import styles from "@/packages/Frameworks/View/DNDView/DNDView.module.scss";
+import Icon from "../../../Components/Icon/Icon";
+import type { PressableProps } from "../../Pressable/Pressable.types";
+import styles from "./DNDView.module.scss";
 import type {
   DNDViewItemState,
   DNDViewProps,
   DNDViewStrategy,
-} from "@/packages/Frameworks/View/DNDView/DNDView.types";
-import View from "@/packages/Frameworks/View/View";
+} from "./DNDView.types";
+import View from "../View";
 
 const SORTING_STRATEGY: Record<DNDViewStrategy, typeof rectSortingStrategy> = {
   horizontal: horizontalListSortingStrategy,

package/packages/Frameworks/View/DNDView/DNDView.types.ts

@@ -1,7 +1,7 @@
 import type { UniqueIdentifier } from "@dnd-kit/core";
 import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { ViewProps } from "@/packages/Frameworks/View/View.types";
+import type { UIKitSizeValue } from "../../_shared/sizing";
+import type { ViewProps } from "../View.types";
 
 export type DNDViewItemState<T> = {
   item: T;

package/packages/Frameworks/View/HScrollView/HScrollView.tsx

@@ -14,21 +14,21 @@ import {
   useRef,
   useState,
 } from "react";
-import { Size } from "@/packages/Frameworks/_shared/sizing";
-import EdgeEffect from "@/packages/Frameworks/EdgeEffect/EdgeEffect";
-import { Radius } from "@/packages/Frameworks/Theme/Radius.types";
+import { Size } from "../../_shared/sizing";
+import EdgeEffect from "../../EdgeEffect/EdgeEffect";
+import { Radius } from "../../Theme/Radius.types";
 import {
   BackgroundBlur,
   Border,
   resolveThemeClasses,
-} from "@/packages/Frameworks/Theme/Theme.types";
-import styles from "@/packages/Frameworks/View/HScrollView/HScrollView.module.scss";
+} from "../../Theme/Theme.types";
+import styles from "./HScrollView.module.scss";
 import type {
   HScrollViewProps,
   HScrollViewViewport,
-} from "@/packages/Frameworks/View/HScrollView/HScrollView.types";
-import View from "@/packages/Frameworks/View/View";
-import viewStyles from "@/packages/Frameworks/View/View.module.scss";
+} from "./HScrollView.types";
+import View from "../View";
+import viewStyles from "../View.module.scss";
 
 type HScrollViewStyle = CSSProperties & {
   "--view-default-gap"?: string | number;

package/packages/Frameworks/View/HScrollView/HScrollView.types.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { ViewProps } from "@/packages/Frameworks/View/View.types";
+import type { UIKitSizeValue } from "../../_shared/sizing";
+import type { ViewProps } from "../View.types";
 
 export type HScrollViewViewport = "w1" | "w2" | "w3" | "w4";
 export type HScrollViewActive = boolean | HScrollViewViewport;

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.counter.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import Text from "@/packages/Components/Text/Text";
-import View from "@/packages/Frameworks/View/View";
+import Text from "../../../../Components/Text/Text";
+import View from "../../View";
 
 export function DialogImageCounter({
   selectedIndex,

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.footer.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import type { MutableRefObject } from "react";
-import { DialogImageCounter } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.counter";
-import { DialogImageList } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.list";
+import { DialogImageCounter } from "./ImageDialog.counter";
+import { DialogImageList } from "./ImageDialog.list";
 import type {
   ImageItem,
   ImageProps,
-} from "@/packages/Frameworks/View/ImageView/Image.types";
-import View from "@/packages/Frameworks/View/View";
+} from "../Image.types";
+import View from "../../View";
 
 export interface DialogImageFooterProps {
   dialog: NonNullable<ImageProps["dialog"]>;

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.header.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import Icon from "@/packages/Components/Icon/Icon";
-import type { ImageProps } from "@/packages/Frameworks/View/ImageView/Image.types";
-import View from "@/packages/Frameworks/View/View";
+import Icon from "../../../../Components/Icon/Icon";
+import type { ImageProps } from "../Image.types";
+import View from "../../View";
 
 export interface DialogImageHeaderProps {
   config?: NonNullable<ImageProps["dialog"]>["header"];

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.list.tsx

@@ -2,14 +2,14 @@
 
 import NextImage from "next/image";
 import type { MutableRefObject } from "react";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import styles from "@/packages/Frameworks/View/ImageView/Image.module.scss";
-import type { ImageItem } from "@/packages/Frameworks/View/ImageView/Image.types";
+import Pressable from "../../../Pressable/Pressable";
+import styles from "../Image.module.scss";
+import type { ImageItem } from "../Image.types";
 import {
   resolveBlurDataURL,
   resolveImageSrc,
-} from "@/packages/Frameworks/View/ImageView/Image.utils";
-import View from "@/packages/Frameworks/View/View";
+} from "../Image.utils";
+import View from "../../View";
 
 export interface DialogImageListProps {
   items: ImageItem[];

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.slide.tsx

@@ -4,12 +4,12 @@ import NextImage from "next/image";
 import type {
   ImageItem,
   ImageOverlay,
-} from "@/packages/Frameworks/View/ImageView/Image.types";
+} from "../Image.types";
 import {
   resolveImageSrc,
   resolveOverlay,
-} from "@/packages/Frameworks/View/ImageView/Image.utils";
-import View from "@/packages/Frameworks/View/View";
+} from "../Image.utils";
+import View from "../../View";
 
 export interface DialogImageSlideProps {
   item: ImageItem;

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.tsx

@@ -1,19 +1,19 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import { DialogImageFooter } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.footer";
-import { DialogImageHeader } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.header";
-import { DialogImageSlide } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.slide";
+import { DialogImageFooter } from "./ImageDialog.footer";
+import { DialogImageHeader } from "./ImageDialog.header";
+import { DialogImageSlide } from "./ImageDialog.slide";
 import {
   ImageLeftControl,
   ImageRightControl,
-} from "@/packages/Frameworks/View/ImageView/Image.controls";
-import { useImageDialog } from "@/packages/Frameworks/View/ImageView/Image.hooks";
+} from "../Image.controls";
+import { useImageDialog } from "../Image.hooks";
 import type {
   ImageItem,
   ImageProps,
-} from "@/packages/Frameworks/View/ImageView/Image.types";
-import View from "@/packages/Frameworks/View/View";
+} from "../Image.types";
+import View from "../../View";
 
 export type ImageDialogProps = {
   items: ImageItem[];

package/packages/Frameworks/View/ImageView/Image.controls.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties } from "react";
-import Icon from "@/packages/Components/Icon/Icon";
+import Icon from "../../../Components/Icon/Icon";
 
 export type ImageControlProps = {
   onClick: () => void;

package/packages/Frameworks/View/ImageView/Image.tsx

@@ -2,24 +2,25 @@
 
 import NextImage from "next/image";
 import { useCallback, useMemo, useState } from "react";
-import Dialog from "@/packages/Frameworks/Dialog/Dialog";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import HScrollView from "@/packages/Frameworks/View/HScrollView/HScrollView";
-import ImageDialog from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog";
+import Dialog from "../../Dialog/Dialog";
+import Pressable from "../../Pressable/Pressable";
+import HScrollView from "../HScrollView/HScrollView";
+import ImageDialog from "./Dialog/ImageDialog";
 import {
   ImageLeftControl,
   ImageRightControl,
-} from "@/packages/Frameworks/View/ImageView/Image.controls";
-import type { ImageOverlay, ImageProps } from "@/packages/Frameworks/View/ImageView/Image.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+} from "./Image.controls";
+import type { ImageOverlay, ImageProps } from "./Image.types";
+import type { RadiusValue } from "../../Theme/Radius.types";
+import type { UIKitSizeValue } from "../../_shared/sizing";
 import {
   resolveAtIndex,
   resolveBlurDataURL,
   resolveImageSrc,
   resolveItems,
   resolveOverlay,
-} from "@/packages/Frameworks/View/ImageView/Image.utils";
-import View from "@/packages/Frameworks/View/View";
+} from "./Image.utils";
+import View from "../View";
 
 const DEFAULT_GROUP_WIDTH = "auto";
 const DEFAULT_GROUP_HEIGHT = "29rem";
@@ -46,7 +47,7 @@ function ImageGroupItem({
   index: number;
   dialog?: ImageProps["dialog"];
   className?: string;
-  radius?: string;
+  radius?: RadiusValue;
   width?: UIKitSizeValue | UIKitSizeValue[];
   height?: UIKitSizeValue | UIKitSizeValue[];
   overlay?: ImageOverlay;

package/packages/Frameworks/View/ImageView/Image.types.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from "react";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { UIKitSizeValue } from "../../_shared/sizing";
+import type { RadiusProps } from "../../Theme/Radius.types";
 
 export type ImageItem = {
   id: number;

package/packages/Frameworks/View/ImageView/Image.utils.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import type {
   ImageItem,
   ImageOverlay,
-} from "@/packages/Frameworks/View/ImageView/Image.types";
+} from "./Image.types";
 
 export type ImageMode = "inline" | "dialog";
 

package/packages/Frameworks/View/View.tsx

@@ -1,20 +1,20 @@
 import clsx from "clsx";
 import { motion } from "motion/react";
 import { type CSSProperties, forwardRef } from "react";
-import { resolvePadding } from "@/packages/Frameworks/_shared/Padding.types";
-import { Size } from "@/packages/Frameworks/_shared/sizing";
-import Squircle from "@/packages/Frameworks/Squircle/Squircle";
-import { Radius } from "@/packages/Frameworks/Theme/Radius.types";
+import { resolvePadding } from "../_shared/Padding.types";
+import { Size } from "../_shared/sizing";
+import Squircle from "../Squircle/Squircle";
+import { Radius } from "../Theme/Radius.types";
 import {
   BackgroundBlur,
   Border,
   resolveThemeClasses,
   resolveThemeHasBorder,
   Shadow,
-} from "@/packages/Frameworks/Theme/Theme.types";
-import DNDView from "@/packages/Frameworks/View/DNDView/DNDView";
-import styles from "@/packages/Frameworks/View/View.module.scss";
-import type { ViewProps } from "@/packages/Frameworks/View/View.types";
+} from "../Theme/Theme.types";
+import DNDView from "./DNDView/DNDView";
+import styles from "./View.module.scss";
+import type { ViewProps } from "./View.types";
 
 type ViewStyle = CSSProperties & {
   "--view-default-gap"?: string | number;

package/packages/Frameworks/View/View.types.ts

@@ -1,13 +1,13 @@
 import type { MotionProps } from "motion/react";
 import type { CSSProperties, HTMLAttributes } from "react";
-import type { PaddingProps } from "@/packages/Frameworks/_shared/Padding.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { WindProps } from "@/packages/Frameworks/_shared/Wind.types";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { PaddingProps } from "../_shared/Padding.types";
+import type { UIKitSizeValue } from "../_shared/sizing";
+import type { WindProps } from "../_shared/Wind.types";
+import type { RadiusProps } from "../Theme/Radius.types";
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../Theme/Theme.types";
 
 export interface ViewProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "color">,

package/packages/Frameworks/_shared/Padding.types.ts

@@ -1,7 +1,7 @@
 import {
   Size,
   type UIKitSizeValue,
-} from "@/packages/Frameworks/_shared/sizing";
+} from "./sizing";
 
 type PaddingUnitValue = UIKitSizeValue;