@musecat/uikit 0.1.3 → 0.2.1

package/packages/Components/Title/Title.types.ts

@@ -1,9 +1,9 @@
-import type { IconGroupProps } from "@/packages/Components/Icon/Icon.group.types";
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { PillProps } from "@/packages/Components/Pill/Pill.types";
-import type { TextProps } from "@/packages/Components/Text/Text.types";
-import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
-import type { ViewProps } from "@/packages/Frameworks/View/View.types";
+import type { IconGroupProps } from "../Icon/Icon.group.types";
+import type { IconProps } from "../Icon/Icon.types";
+import type { PillProps } from "../Pill/Pill.types";
+import type { TextProps } from "../Text/Text.types";
+import type { PressableProps } from "../../Frameworks/Pressable/Pressable.types";
+import type { ViewProps } from "../../Frameworks/View/View.types";
 
 interface TitleItemProps {
   "data-color-mode"?: string;

package/packages/Components/Toggle/Toggle.tsx

@@ -8,15 +8,15 @@ import {
   useRef,
   useState,
 } from "react";
-import Spinner from "@/packages/Components/Spinner/Spinner";
-import Text from "@/packages/Components/Text/Text";
-import styles from "@/packages/Components/Toggle/Toggle.module.scss";
-import type { ToggleProps } from "@/packages/Components/Toggle/Toggle.types";
-import { Size, SizePX } from "@/packages/Frameworks/_shared/sizing";
-import { useControllableState } from "@/packages/Frameworks/_shared/useControllableState";
-import { Radius } from "@/packages/Frameworks/Theme/Radius.types";
-import { Border } from "@/packages/Frameworks/Theme/Theme.types";
-import View from "@/packages/Frameworks/View/View";
+import Spinner from "../Spinner/Spinner";
+import Text from "../Text/Text";
+import styles from "./Toggle.module.scss";
+import type { ToggleProps } from "./Toggle.types";
+import { Size, SizePX } from "../../Frameworks/_shared/sizing";
+import { useControllableState } from "../../Frameworks/_shared/useControllableState";
+import { Radius } from "../../Frameworks/Theme/Radius.types";
+import { Border } from "../../Frameworks/Theme/Theme.types";
+import View from "../../Frameworks/View/View";
 
 type ToggleTrackStyle = React.CSSProperties & {
   "--toggle-padding"?: string;

package/packages/Components/Toggle/Toggle.types.ts

@@ -1,6 +1,6 @@
-import type { TextProps } from "@/packages/Components/Text/Text.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { ThemeSystemProps } from "@/packages/Frameworks/Theme/Theme.types";
+import type { TextProps } from "../Text/Text.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { ThemeSystemProps } from "../../Frameworks/Theme/Theme.types";
 
 export interface ToggleProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "color">,

package/packages/Components/Tooltip/Tooltip.tsx

@@ -12,12 +12,12 @@ import {
   useRef,
   useState,
 } from "react";
-import styles from "@/packages/Components/Tooltip/Tooltip.module.scss";
+import styles from "./Tooltip.module.scss";
 import type {
   TooltipPlacement,
   TooltipProps,
-} from "@/packages/Components/Tooltip/Tooltip.types";
-import View from "@/packages/Frameworks/View/View";
+} from "./Tooltip.types";
+import View from "../../Frameworks/View/View";
 
 const TOOLTIP_GAP = 8;
 const TOOLTIP_MARGIN = 4;

package/packages/Components/Tooltip/Tooltip.types.ts

@@ -1,10 +1,10 @@
-import type { RadiusValue } from "@/packages/Frameworks/Theme/Radius.types";
+import type { RadiusValue } from "../../Frameworks/Theme/Radius.types";
 import type {
   BorderProps,
   ThemeBackgroundPaint,
   ThemePaint,
   ThemePreset,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export type TooltipPlacement =
   | "top"

package/packages/Frameworks/Dialog/Dialog.background.tsx

@@ -3,13 +3,13 @@
 import clsx from "clsx";
 import type { MotionValue } from "motion/react";
 import { useEffect, useState } from "react";
-import { motionPresets } from "@/packages/Frameworks/Motion/Motion.presets";
+import { motionPresets } from "../Motion/Motion.presets";
 import type {
   BackgroundBlurValue,
   ThemeBackgroundPaint,
-} from "@/packages/Frameworks/Theme/Theme.types";
-import { BackgroundBlur } from "@/packages/Frameworks/Theme/Theme.types";
-import View from "@/packages/Frameworks/View/View";
+} from "../Theme/Theme.types";
+import { BackgroundBlur } from "../Theme/Theme.types";
+import View from "../View/View";
 
 interface BackgroundWrapperProps {
   open: boolean;

package/packages/Frameworks/Dialog/Dialog.boot.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import Dialog from "@/packages/Frameworks/Dialog/Dialog";
+import Dialog from "./Dialog";
 import {
   type DialogInstance,
   DialogStore,
-} from "@/packages/Frameworks/Dialog/Dialog.store";
+} from "./Dialog.store";
 
 interface DialogBootstrapProps {
   "data-color-mode"?: string;

package/packages/Frameworks/Dialog/Dialog.store.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import type { DialogProps } from "@/packages/Frameworks/Dialog/Dialog.types";
+import type { DialogProps } from "./Dialog.types";
 
 export interface DialogInstance extends Promise<any> {
   id: string;

package/packages/Frameworks/Dialog/Dialog.tsx

@@ -2,15 +2,15 @@
 
 import { buildContext, useViewportMatch } from "@musecat/functionkit";
 import { useMemo } from "react";
-import DialogFunnel from "@/packages/Frameworks/Dialog/contents/Dialog.funnel";
+import DialogFunnel from "./contents/Dialog.funnel";
 import type {
   DialogContextValue,
   DialogMode,
   DialogProps,
-} from "@/packages/Frameworks/Dialog/Dialog.types";
-import RenderModal from "@/packages/Frameworks/Dialog/renderers/renderModal";
-import RenderPopover from "@/packages/Frameworks/Dialog/renderers/renderPopover";
-import RenderSheet from "@/packages/Frameworks/Dialog/renderers/renderSheet";
+} from "./Dialog.types";
+import RenderModal from "./renderers/renderModal";
+import RenderPopover from "./renderers/renderPopover";
+import RenderSheet from "./renderers/renderSheet";
 
 const [DialogProvider, useRawDialogContext] =
   buildContext<DialogContextValue | null>(null);
@@ -84,6 +84,7 @@ export default function Dialog(props: DialogProps) {
       open,
       closeDialog: close,
     }),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: close is intentionally a stable reference
     [id, resolvedMode, open, close],
   );
 

package/packages/Frameworks/Dialog/Dialog.types.ts

@@ -1,13 +1,13 @@
 import type { ReactNode, RefObject } from "react";
-import type { ButtonProps } from "@/packages/Components/Button/Button.types";
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { ButtonProps } from "../../Components/Button/Button.types";
+import type { IconProps } from "../../Components/Icon/Icon.types";
+import type { RadiusProps } from "../Theme/Radius.types";
 import type {
   BackgroundBlurValue,
   BorderProps,
   ThemeBackgroundPaint,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../Theme/Theme.types";
 
 export type DialogMode = "popover" | "modal" | "sheet";
 export type DialogMobileMode = "modal" | "sheet";

package/packages/Frameworks/Dialog/contents/Dialog.footer.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import type { ReactNode } from "react";
-import Button from "@/packages/Components/Button/Button";
-import type { DialogFooterConfig } from "@/packages/Frameworks/Dialog/Dialog.types";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+import Button from "../../../Components/Button/Button";
+import type { DialogFooterConfig } from "../Dialog.types";
+import Pressable from "../../Pressable/Pressable";
+import View from "../../View/View";
 
 interface DialogFooterProps {
   config?: DialogFooterConfig;

package/packages/Frameworks/Dialog/contents/Dialog.funnel.tsx

@@ -1,16 +1,16 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import Button from "@/packages/Components/Button/Button";
-import Icon from "@/packages/Components/Icon/Icon";
-import Text from "@/packages/Components/Text/Text";
+import Button from "../../../Components/Button/Button";
+import Icon from "../../../Components/Icon/Icon";
+import Text from "../../../Components/Text/Text";
 import type {
   FunnelConfig,
   FunnelHistory,
   FunnelStepConfig,
-} from "@/packages/Frameworks/Dialog/Dialog.types";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+} from "../Dialog.types";
+import Pressable from "../../Pressable/Pressable";
+import View from "../../View/View";
 
 interface DialogFunnelProps {
   config: FunnelConfig;

package/packages/Frameworks/Dialog/contents/Dialog.header.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import type { ReactNode } from "react";
-import Icon from "@/packages/Components/Icon/Icon";
-import Text from "@/packages/Components/Text/Text";
-import { useDialog } from "@/packages/Frameworks/Dialog/Dialog";
-import type { DialogHeaderConfig } from "@/packages/Frameworks/Dialog/Dialog.types";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+import Icon from "../../../Components/Icon/Icon";
+import Text from "../../../Components/Text/Text";
+import { useDialog } from "../Dialog";
+import type { DialogHeaderConfig } from "../Dialog.types";
+import Pressable from "../../Pressable/Pressable";
+import View from "../../View/View";
 
 interface DialogHeaderProps {
   config?: DialogHeaderConfig & {

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;
@@ -76,6 +76,8 @@ export function useSheetDrag({
   onSnapIndexChange,
   onDragStateChange,
 }: UseSheetDragInput): DragHandlers {
+  void maxPx;
+  void getGapHiddenY;
   const _dragControls = useDragControls();
   const contentDraggingRef = useRef(false);
   const contentPointerActiveRef = useRef(false);

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,
@@ -145,8 +145,10 @@ export function useSheetGeometry({
   const _snapPointsStr = JSON.stringify(config?.snapPoints);
   const normalizedSnapPoints = useMemo(
     () =>
-      config?.snapPoints?.length ? normalizeSnapPoints(config.snapPoints) : [1],
-    [config?.snapPoints?.length, config.snapPoints],
+      config?.snapPoints?.length
+        ? normalizeSnapPoints(config?.snapPoints)
+        : [1],
+    [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;
@@ -45,7 +45,7 @@ export function useSheetProgressive({
   hasExplicitSnapPoints,
 }: UseSheetProgressiveInput): UseSheetProgressiveOutput {
   const firstSnap = normalizedSnapPoints[0];
-  const lastSnap = normalizedSnapPoints.at(-1)!;
+  const lastSnap = normalizedSnapPoints.at(-1) ?? 0;
   const hasProgression =
     hasExplicitSnapPoints && normalizedSnapPoints.length > 1 && !isFreeDrag;
 

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,29 @@ 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,
+  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;
@@ -567,5 +569,3 @@ export default function RenderSheet({
   if (!mounted) return null;
   return <DialogPortal>{sheetNode}</DialogPortal>;
 }
-
-

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<{
@@ -505,8 +505,8 @@ const Pressable = forwardRef<HTMLElement, PressableProps>((props, ref) => {
               themeInteractive,
               selected: resolvedControlSelected,
               disabled,
-            readOnly,
-            isInteractive: true,
+              readOnly,
+              isInteractive: true,
             }),
             Border(border),
             className,

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

@@ -1,17 +1,26 @@
 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>,
-      "title" | "onClick" | "onChange" | "value" | "checked" | "type" | "disabled" | "tabIndex" | "popover" | "color"
+      | "title"
+      | "onClick"
+      | "onChange"
+      | "value"
+      | "checked"
+      | "type"
+      | "disabled"
+      | "tabIndex"
+      | "popover"
+      | "color"
     >,
     ThemeSystemProps,
     BorderProps,

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,14 +1,14 @@
 "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 clsx from "clsx";
 import { Toaster, toast } from "sonner";
+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";
 
-export { toast };
 export type { ToasterBootstrapProps };
+export { toast };
 
 const getToastIcon = (color: IconProps["color"]) => (
   <Icon icon="iCircle" iconFill size={10} color={color} />

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

@@ -1,5 +1,7 @@
 import type { ToasterProps } from "sonner";
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import type { IconProps } from "../../Components/Icon/Icon.types";
+
+export type { ToasterProps };
 
 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,