docs: consistent component import examples (#1391)

Co-authored-by: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>

sites/docs/src/content/components/accordion.md

@@ -52,7 +52,7 @@ Install `bits-ui`
 
 ```svelte
 <script lang="ts">
-  import * as Accordion from "$lib/components/ui/accordion";
+  import * as Accordion from "$lib/components/ui/accordion/index.js";
 </script>
 
 <Accordion.Root type="single">

sites/docs/src/content/components/alert-dialog.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import * as AlertDialog from "$lib/components/ui/alert-dialog";
+  import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
 </script>
 
 <AlertDialog.Root>

sites/docs/src/content/components/alert.md

@@ -33,7 +33,7 @@ links:
 
 ```svelte
 <script lang="ts">
-  import * as Alert from "$lib/components/ui/alert";
+  import * as Alert from "$lib/components/ui/alert/index.js";
 </script>
 
 <Alert.Root>

sites/docs/src/content/components/aspect-ratio.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import { AspectRatio } from "$lib/components/ui/aspect-ratio";
+  import { AspectRatio } from "$lib/components/ui/aspect-ratio/index.js";
 </script>
 
 <div class="w-[450px]">

sites/docs/src/content/components/avatar.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import * as Avatar from "$lib/components/ui/avatar";
+  import * as Avatar from "$lib/components/ui/avatar/index.js";
 </script>
 
 <Avatar.Root>

sites/docs/src/content/components/badge.md

@@ -33,7 +33,7 @@ links:
 
 ```svelte
 <script lang="ts">
-  import { Badge } from "$lib/components/ui/badge";
+  import { Badge } from "$lib/components/ui/badge/index.js";
 </script>
 ```
 
@@ -47,7 +47,7 @@ You can use the `badgeVariants` helper to create a link that looks like a badge.
 
 ```svelte
 <script lang="ts">
-  import { badgeVariants } from "$lib/components/ui/badge";
+  import { badgeVariants } from "$lib/components/ui/badge/index.js";
 </script>
 
 <a href="/dashboard" class={badgeVariants({ variant: "outline" })}>Badge</a>

sites/docs/src/content/components/button.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import { Button } from "$lib/components/ui/button";
+  import { Button } from "$lib/components/ui/button/index.js";
 </script>
 ```
 
@@ -55,7 +55,7 @@ You can convert the `<button>` into an `<a>` element by simply passing an `href`
 
 ```svelte
 <script lang="ts">
-  import { Button } from "$lib/components/ui/button";
+  import { Button } from "$lib/components/ui/button/index.js";
 </script>
 
 <Button href="/dashboard">Dashboard</Button>

sites/docs/src/content/components/card.md

@@ -33,7 +33,7 @@ links:
 
 ```svelte
 <script lang="ts">
-  import * as Card from "$lib/components/ui/card";
+  import * as Card from "$lib/components/ui/card/index.js";
 </script>
 
 <Card.Root>

sites/docs/src/content/components/checkbox.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import { Checkbox } from "$lib/components/ui/checkbox";
+  import { Checkbox } from "$lib/components/ui/checkbox/index.js";
 </script>
 ```
 

sites/docs/src/content/components/collapsible.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import * as Collapsible from "$lib/components/ui/collapsible";
+  import * as Collapsible from "$lib/components/ui/collapsible/index.js";
 </script>
 
 <Collapsible.Root>

sites/docs/src/content/components/command.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import * as Command from "$lib/components/ui/command";
+  import * as Command from "$lib/components/ui/command/index.js";
 </script>
 
 <Command.Root>
@@ -77,7 +77,7 @@ To show the command menu in a dialog, use the `<Command.Dialog />` component ins
 
 ```svelte
 <script lang="ts">
-  import * as Command from "$lib/components/ui/command";
+  import * as Command from "$lib/components/ui/command/index.js";
   import { onMount } from "svelte";
 
   let open = $state(false);

sites/docs/src/content/components/context-menu.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import * as ContextMenu from "$lib/components/ui/context-menu";
+  import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
 </script>
 
 <ContextMenu.Root>

sites/docs/src/content/components/date-picker.md

@@ -33,9 +33,9 @@ See installations instructions for the [Popover](/docs/components/popover#instal
     getLocalTimeZone,
   } from "@internationalized/date";
   import { cn } from "$lib/utils.js";
-  import { Button } from "$lib/components/ui/button";
-  import { Calendar } from "$lib/components/ui/calendar";
-  import * as Popover from "$lib/components/ui/popover";
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { Calendar } from "$lib/components/ui/calendar/index.js";
+  import * as Popover from "$lib/components/ui/popover/index.js";
 
   const df = new DateFormatter("en-US", {
     dateStyle: "long",

sites/docs/src/content/components/dialog.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import * as Dialog from "$lib/components/ui/dialog";
+  import * as Dialog from "$lib/components/ui/dialog/index.js";
 </script>
 
 <Dialog.Root>

sites/docs/src/content/components/drawer.md

@@ -44,7 +44,7 @@ Install `vaul-svelte`:
 
 ```svelte
 <script lang="ts">
-  import * as Drawer from "$lib/components/ui/drawer";
+  import * as Drawer from "$lib/components/ui/drawer/index.js";
 </script>
 
 <Drawer.Root>

sites/docs/src/content/components/dropdown-menu.md

@@ -40,7 +40,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
 </script>
 
 <DropdownMenu.Root>

sites/docs/src/content/components/form.md

@@ -110,8 +110,8 @@ For this example, we'll be passing the `form` returned from the load function as
 
 ```svelte title="src/routes/settings/settings-form.svelte" showLineNumbers
 <script lang="ts">
-  import * as Form from "$lib/components/ui/form";
-  import { Input } from "$lib/components/ui/input";
+  import * as Form from "$lib/components/ui/form/index.js";
+  import { Input } from "$lib/components/ui/input/index.js";
   import { formSchema, type FormSchema } from "./schema";
   import {
     type SuperValidated,

sites/docs/src/content/components/hover-card.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import * as HoverCard from "$lib/components/ui/hover-card";
+  import * as HoverCard from "$lib/components/ui/hover-card/index.js";
 </script>
 
 <HoverCard.Root>

sites/docs/src/content/components/input-otp.md

@@ -45,7 +45,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import * as InputOTP from "$lib/components/ui/input-otp";
+  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
 </script>
 
 <InputOTP.Root maxlength={6}>
@@ -79,7 +79,7 @@ Use the `pattern` prop to define a custom pattern for the OTP input.
 
 ```svelte showLineNumbers {3,6}
 <script lang="ts">
-  import * as InputOTP from "$lib/components/ui/input-otp";
+  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
   import { REGEXP_ONLY_DIGITS_AND_CHARS } from "bits-ui";
 </script>
 
@@ -100,7 +100,7 @@ You can use the `InputOTP.Separator` component to add a separator between the gr
 
 ```svelte showLineNumbers
 <script lang="ts">
-  import * as InputOTP from "$lib/components/ui/input-otp";
+  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
 </script>
 
 <InputOTP.Root maxlength={4}>

sites/docs/src/content/components/input.md

@@ -35,7 +35,7 @@ links:
 
 ```svelte
 <script lang="ts">
-  import { Input } from "$lib/components/ui/input";
+  import { Input } from "$lib/components/ui/input/index.js";
 </script>
 
 <Input />

sites/docs/src/content/components/label.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import { Label } from "$lib/components/ui/label";
+  import { Label } from "$lib/components/ui/label/index.js";
 </script>
 
 <Label for="email">Your email address</Label>

sites/docs/src/content/components/menubar.md

@@ -39,7 +39,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import * as Menubar from "$lib/components/ui/menubar";
+  import * as Menubar from "$lib/components/ui/menubar/index.js";
 </script>
 
 <Menubar.Root>

sites/docs/src/content/components/pagination.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import * as Pagination from "$lib/components/ui/pagination";
+  import * as Pagination from "$lib/components/ui/pagination/index.js";
 </script>
 
 <Pagination.Root count={100} perPage={10}>

sites/docs/src/content/components/popover.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import * as Popover from "$lib/components/ui/popover";
+  import * as Popover from "$lib/components/ui/popover/index.js";
 </script>
 
 <Popover.Root>

sites/docs/src/content/components/progress.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import { Progress } from "$lib/components/ui/progress";
+  import { Progress } from "$lib/components/ui/progress/index.js";
 </script>
 
 <Progress value={33} />

sites/docs/src/content/components/radio-group.md

@@ -41,8 +41,8 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import { Label } from "$lib/components/ui/label";
-  import * as RadioGroup from "$lib/components/ui/radio-group";
+  import { Label } from "$lib/components/ui/label/index.js";
+  import * as RadioGroup from "$lib/components/ui/radio-group/index.js";
 </script>
 
 <RadioGroup.Root value="option-one">

sites/docs/src/content/components/resizable.md

@@ -44,7 +44,7 @@ Install `paneforge`:
 
 ```svelte
 <script lang="ts">
-  import * as Resizable from "$lib/components/ui/resizable";
+  import * as Resizable from "$lib/components/ui/resizable/index.js";
 </script>
 
 <Resizable.PaneGroup direction="horizontal">
@@ -68,7 +68,7 @@ Use the `direction` prop to set the direction of the resizable panels.
 
 ```svelte showLineNumbers {5}
 <script lang="ts">
-  import * as Resizable from "$lib/components/ui/resizable";
+  import * as Resizable from "$lib/components/ui/resizable/index.js";
 </script>
 
 <Resizable.PaneGroup direction="vertical">
@@ -90,7 +90,7 @@ You can set or hide the handle by using the `withHandle` prop on the `ResizableH
 
 ```svelte showLineNumbers {7}
 <script lang="ts">
-  import * as Resizable from "$lib/components/ui/resizable";
+  import * as Resizable from "$lib/components/ui/resizable/index.js";
 </script>
 
 <Resizable.PaneGroup direction="vertical">

sites/docs/src/content/components/select.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import * as Select from "$lib/components/ui/select";
+  import * as Select from "$lib/components/ui/select/index.js";
 </script>
 
 <Select.Root>

sites/docs/src/content/components/separator.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import { Separator } from "$lib/components/ui/separator";
+  import { Separator } from "$lib/components/ui/separator/index.js";
 </script>
 
 <Separator />

sites/docs/src/content/components/sheet.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import * as Sheet from "$lib/components/ui/sheet";
+  import * as Sheet from "$lib/components/ui/sheet/index.js";
 </script>
 
 <Sheet.Root>

sites/docs/src/content/components/sidebar.md

@@ -148,7 +148,7 @@ A `Sidebar` component is composed of the following parts:
 
 ```svelte showLineNumbers title="src/lib/components/app-sidebar.svelte"
 <script lang="ts">
-  import * as Sidebar from "$lib/components/ui/sidebar";
+  import * as Sidebar from "$lib/components/ui/sidebar/index.js";
 </script>
 
 <Sidebar.Root>

sites/docs/src/content/components/skeleton.md

@@ -33,7 +33,7 @@ links:
 
 ```svelte
 <script lang="ts">
-  import { Skeleton } from "$lib/components/ui/skeleton";
+  import { Skeleton } from "$lib/components/ui/skeleton/index.js";
 </script>
 ```
 

sites/docs/src/content/components/slider.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import { Slider } from "$lib/components/ui/slider";
+  import { Slider } from "$lib/components/ui/slider/index.js";
 </script>
 
 <Slider value={[33]} max={100} step={1} />

sites/docs/src/content/components/sonner.md

@@ -50,7 +50,7 @@ Note: Make sure you are adding the import from the path `"$lib/components/ui/son
 
 ```svelte title="+layout.svelte" {2,5}
 <script lang="ts">
-  import { Toaster } from "$lib/components/ui/sonner";
+  import { Toaster } from "$lib/components/ui/sonner/index.js";
   let { children } = $props();
 </script>
 
@@ -76,7 +76,7 @@ Note: Make sure you are adding the import from the path `"$lib/components/ui/son
 ```svelte
 <script lang="ts">
   import { toast } from "svelte-sonner";
-  import { Button } from "$lib/components/ui/button";
+  import { Button } from "$lib/components/ui/button/index.js";
 </script>
 
 <Button onclick={() => toast("Hello world")}>Show toast</Button>

sites/docs/src/content/components/switch.md

@@ -41,7 +41,7 @@ Install `bits-ui`:
 
 ```svelte
 <script lang="ts">
-  import { Switch } from "$lib/components/ui/switch";
+  import { Switch } from "$lib/components/ui/switch/index.js";
 </script>
 
 <Switch />