chore: Update import paths to support a wider set of module resolutio…

…n strategies (#352)

* updated routes

* upgrade svelte-package

* use NodeNext

* update utils

* update components

* update api ref

* config

* update tests

* update lib

* changeset

* updated content

* replace lib import string in preview code

.changeset/tender-berries-wave.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: Updated internal import paths to support modern module resolution strategies

content/components/accordion.md

@@ -4,7 +4,7 @@ description: Organizes content into collapsible sections, allowing users to focu
 ---
 
 <script>
-	import { APISection, ComponentPreview, AccordionDemo } from '@/components'
+	import { APISection, ComponentPreview, AccordionDemo } from '@/components/index.js'
 	export let schemas
 </script>
 

content/components/alert-dialog.md

@@ -4,7 +4,7 @@ description: A modal window that alerts users with important information and awa
 ---
 
 <script>
-	import { APISection, ComponentPreview, AlertDialogDemo } from '@/components'
+	import { APISection, ComponentPreview, AlertDialogDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/aspect-ratio.md

@@ -4,7 +4,7 @@ description: Displays content while maintaining a specified aspect ratio, ensuri
 ---
 
 <script>
-	import { APISection, ComponentPreview, AspectRatioDemo } from '@/components'
+	import { APISection, ComponentPreview, AspectRatioDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/avatar.md

@@ -4,7 +4,7 @@ description: Represents a user or entity with a recognizable image or placeholde
 ---
 
 <script>
-	import { APISection, ComponentPreview, AvatarDemo } from '@/components'
+	import { APISection, ComponentPreview, AvatarDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/button.md

@@ -4,7 +4,7 @@ description: A special button component that can receive Melt UI builders for us
 ---
 
 <script>
-	import { APISection, ComponentPreview, ButtonDemo } from '@/components'
+	import { APISection, ComponentPreview, ButtonDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/calendar.md

@@ -4,7 +4,7 @@ description: Displays dates and days of the week, facilitating date-related inte
 ---
 
 <script>
-	import { APISection, ComponentPreview, CalendarDemo } from '@/components'
+	import { APISection, ComponentPreview, CalendarDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/checkbox.md

@@ -4,7 +4,7 @@ description: Allow users to switch between checked, unchecked, and indeterminate
 ---
 
 <script>
-	import { APISection, ComponentPreview, CheckboxDemo } from '@/components'
+	import { APISection, ComponentPreview, CheckboxDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/collapsible.md

@@ -4,7 +4,7 @@ description: Conceals or reveals content sections, enhancing space utilization a
 ---
 
 <script>
-	import { APISection, ComponentPreview, CollapsibleDemo } from '@/components'
+	import { APISection, ComponentPreview, CollapsibleDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/combobox.md

@@ -4,7 +4,7 @@ description: Enables users to pick from a list of options displayed in a dropdow
 ---
 
 <script>
-	import { APISection, ComponentPreview, ComboboxDemo } from '@/components'
+	import { APISection, ComponentPreview, ComboboxDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/context-menu.md

@@ -4,7 +4,7 @@ description: Displays options or actions relevant to a specific context or selec
 ---
 
 <script>
-	import { APISection, ComponentPreview, ContextMenuDemo } from '@/components'
+	import { APISection, ComponentPreview, ContextMenuDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/date-field.md

@@ -4,7 +4,7 @@ description: Enables users to input specific dates within a designated field.
 ---
 
 <script>
-	import { APISection, ComponentPreview, DateFieldDemo } from '@/components'
+	import { APISection, ComponentPreview, DateFieldDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/date-picker.md

@@ -4,7 +4,7 @@ description: Facilitates the selection of dates through an input and calendar-ba
 ---
 
 <script>
-	import { APISection, ComponentPreview, DatePickerDemo } from '@/components'
+	import { APISection, ComponentPreview, DatePickerDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/date-range-field.md

@@ -4,7 +4,7 @@ description: Allows users to input a range of dates within a designated field.
 ---
 
 <script>
-	import { APISection, ComponentPreview, DateRangeFieldDemo } from '@/components'
+	import { APISection, ComponentPreview, DateRangeFieldDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/date-range-picker.md

@@ -4,7 +4,7 @@ description: Facilitates the selection of date ranges through an input and calen
 ---
 
 <script>
-	import { APISection, ComponentPreview, DateRangePickerDemo } from '@/components'
+	import { APISection, ComponentPreview, DateRangePickerDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/dialog.md

@@ -4,7 +4,7 @@ description: A modal window presenting content or seeking user input without nav
 ---
 
 <script>
-	import { APISection, ComponentPreview, DialogDemo } from '@/components'
+	import { APISection, ComponentPreview, DialogDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/dropdown-menu.md

@@ -4,7 +4,7 @@ description: Displays a menu of items that users can select from when triggered.
 ---
 
 <script>
-	import { APISection, ComponentPreview, DropdownMenuDemo } from '@/components'
+	import { APISection, ComponentPreview, DropdownMenuDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/label.md

@@ -4,7 +4,7 @@ description: Identifies or describes associated UI elements.
 ---
 
 <script>
-	import { APISection, ComponentPreview, LabelDemo } from '@/components'
+	import { APISection, ComponentPreview, LabelDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/link-preview.md

@@ -4,7 +4,7 @@ description: Displays a summarized preview of a linked content's details or info
 ---
 
 <script>
-	import { APISection, ComponentPreview, LinkPreviewDemo } from '@/components'
+	import { APISection, ComponentPreview, LinkPreviewDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/menubar.md

@@ -4,7 +4,7 @@ description: Organizes and presents a collection of menu options or actions with
 ---
 
 <script>
-	import { APISection, ComponentPreview, MenubarDemo } from '@/components'
+	import { APISection, ComponentPreview, MenubarDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/pagination.md

@@ -4,7 +4,7 @@ description: Facilitates navigation between pages.
 ---
 
 <script>
-	import { APISection, ComponentPreview, PaginationDemo } from '@/components'
+	import { APISection, ComponentPreview, PaginationDemo } from '@/components/index.js'
 	export let schemas
 </script>
 

content/components/pin-input.md

@@ -4,7 +4,7 @@ description: Allows users to input a sequence of one-character alphanumeric inpu
 ---
 
 <script>
-	import { APISection, ComponentPreview, PinInputDemo } from '@/components'
+	import { APISection, ComponentPreview, PinInputDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/popover.md

@@ -4,7 +4,7 @@ description: Display supplementary content or information when users interact wi
 ---
 
 <script>
-	import { APISection, ComponentPreview, PopoverDemo } from '@/components'
+	import { APISection, ComponentPreview, PopoverDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/progress.md

@@ -4,7 +4,7 @@ description: Visualizes the progress or completion status of a task or process.
 ---
 
 <script>
-	import { APISection, ComponentPreview, ProgressDemo } from '@/components'
+	import { APISection, ComponentPreview, ProgressDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/radio-group.md

@@ -4,7 +4,7 @@ description: Allows users to select a single option from a list of mutually excl
 ---
 
 <script>
-	import { APISection, ComponentPreview, RadioGroupDemo } from '@/components'
+	import { APISection, ComponentPreview, RadioGroupDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/range-calendar.md

@@ -4,7 +4,7 @@ description: Presents a calendar view tailored for selecting date ranges.
 ---
 
 <script>
-	import { APISection, ComponentPreview, RangeCalendarDemo } from '@/components'
+	import { APISection, ComponentPreview, RangeCalendarDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/select.md

@@ -4,7 +4,7 @@ description: Enables users to choose from a list of options presented in a dropd
 ---
 
 <script>
-	import { APISection, ComponentPreview, SelectDemo } from '@/components'
+	import { APISection, ComponentPreview, SelectDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/separator.md

@@ -4,7 +4,7 @@ description: Visually separates content or UI elements for clarity and organizat
 ---
 
 <script>
-	import { APISection, ComponentPreview, SeparatorDemo } from '@/components'
+	import { APISection, ComponentPreview, SeparatorDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/slider.md

@@ -4,7 +4,7 @@ description: Allows users to select a value from a continuous range by sliding a
 ---
 
 <script>
-	import { APISection, ComponentPreview, SliderDemo } from '@/components'
+	import { APISection, ComponentPreview, SliderDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/switch.md

@@ -4,7 +4,7 @@ description: A toggle control enabling users to switch between "on" and "off" st
 ---
 
 <script>
-	import { APISection, ComponentPreview, SwitchDemo } from '@/components'
+	import { APISection, ComponentPreview, SwitchDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/tabs.md

@@ -4,7 +4,7 @@ description: Organizes content into distinct sections, allowing users to switch
 ---
 
 <script>
-	import { APISection, ComponentPreview, TabsDemo } from '@/components'
+	import { APISection, ComponentPreview, TabsDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/toggle-group.md

@@ -4,7 +4,7 @@ description: A control element that switches between two states, providing a bin
 ---
 
 <script>
-	import { APISection, ComponentPreview, ToggleGroupDemo } from '@/components'
+	import { APISection, ComponentPreview, ToggleGroupDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/toggle.md

@@ -4,7 +4,7 @@ description: Groups multiple toggle controls, allowing users to enable one or mu
 ---
 
 <script>
-	import { APISection, ComponentPreview, ToggleDemo } from '@/components'
+	import { APISection, ComponentPreview, ToggleDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/toolbar.md

@@ -4,7 +4,7 @@ description: Displays frequently used actions or tools in a compact, easily acce
 ---
 
 <script>
-	import { APISection, ComponentPreview, ToolbarDemo } from '@/components'
+	import { APISection, ComponentPreview, ToolbarDemo } from '@/components/index.js'
 	export let schemas;
 </script>
 

content/components/tooltip.md

@@ -4,7 +4,7 @@ description: Provides additional information or context when users hover over or
 ---
 
 <script>
-	import { ComponentPreview, TooltipDemo, APISection } from '@/components'
+	import { ComponentPreview, TooltipDemo, APISection } from '@/components/index.js'
 	export let schemas;
 </script>
 

mdsvex.config.js

@@ -142,7 +142,10 @@ function getComponentSourceFileContent(src = "") {
 	// Read the source file.
 	const filePath = path.join(process.cwd(), newSrc);
 
-	const formattedSource = prettier.format(readFileSync(filePath, "utf-8"), codeBlockPrettierConfig);
+	/** @type {string} */
+	let formattedSource = prettier.format(readFileSync(filePath, "utf-8"), codeBlockPrettierConfig);
+
+	formattedSource = formattedSource.replaceAll(`"$lib/index.js";`, `"bits-ui";`);
 
 	return formattedSource;
 }

package.json

@@ -39,7 +39,7 @@
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-vercel": "^5.1.0",
     "@sveltejs/kit": "^2.5.0",
-    "@sveltejs/package": "^2.2.6",
+    "@sveltejs/package": "^2.2.7",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.10",

src/components/api-ref/data-attr-value-content.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Popover } from "$lib";
-	import { flyAndScale } from "@/utils";
-	import { Code } from "@/components";
+	import { Popover } from "$lib/index.js";
+	import { flyAndScale } from "@/utils/index.js";
+	import { Code } from "@/components/index.js";
 	import { Info } from "$icons/index.js";
-	import type { DataAttrSchema } from "@/types";
+	import type { DataAttrSchema } from "@/types/index.js";
 
 	export let attr: DataAttrSchema;
 </script>