Merge branch 'next' into next-charts-new

huntabyte · Nov 2, 2024 · 916e87d · 916e87d
2 parents 6cfb928 + a6b5d3c
commit 916e87d
Show file tree

Hide file tree

Showing 77 changed files with 146 additions and 138 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/docs/package.json b/sites/docs/package.json
@@ -45,15 +45,15 @@
 		"acorn": "^8.13.0",
 		"acorn-typescript": "^1.4.13",
 		"autoprefixer": "^10.4.19",
-		"bits-ui": "1.0.0-next.30",
+		"bits-ui": "1.0.0-next.31",
 		"clsx": "^2.1.1",
 		"concurrently": "^9.0.1",
 		"d3-scale": "^4.0.2",
 		"d3-shape": "^3.2.0",
 		"embla-carousel-autoplay": "8.1.6",
 		"embla-carousel-svelte": "8.1.6",
 		"estree-walker": "^3.0.3",
-		"formsnap": "2.0.0-next.0",
+		"formsnap": "2.0.0-next.1",
 		"hast-util-to-html": "^9.0.1",
 		"is-reference": "^3.0.2",
 		"layerchart": "^0.54.1",

diff --git a/sites/docs/src/content/components/accordion.md b/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">

diff --git a/sites/docs/src/content/components/alert-dialog.md b/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>

diff --git a/sites/docs/src/content/components/alert.md b/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>

diff --git a/sites/docs/src/content/components/aspect-ratio.md b/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]">

diff --git a/sites/docs/src/content/components/avatar.md b/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>

diff --git a/sites/docs/src/content/components/badge.md b/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>

diff --git a/sites/docs/src/content/components/button.md b/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>

diff --git a/sites/docs/src/content/components/card.md b/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>

diff --git a/sites/docs/src/content/components/checkbox.md b/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>
 ```
 

diff --git a/sites/docs/src/content/components/collapsible.md b/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>

diff --git a/sites/docs/src/content/components/command.md b/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);
@@ -104,3 +104,9 @@ To show the command menu in a dialog, use the `<Command.Dialog />` component ins
   </Command.List>
 </Command.Dialog>
 ```
+
+## Changelog
+
+### 2024-10-30 Classes for icons
+
+- Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `<Command.Item>` component to automatically style the icons inside.
diff --git a/sites/docs/src/content/components/context-menu.md b/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>

diff --git a/sites/docs/src/content/components/data-table.md b/sites/docs/src/content/components/data-table.md
@@ -210,7 +210,7 @@ Next, we'll create a `<DataTable />` component to render our table.
         </Table.Row>
       {:else}
         <Table.Row>
-          <Table.Cell colSpan={columns.length} class="h-24 text-center">
+          <Table.Cell colspan={columns.length} class="h-24 text-center">
             No results.
           </Table.Cell>
         </Table.Row>

diff --git a/sites/docs/src/content/components/date-picker.md b/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",
@@ -44,7 +44,7 @@ See installations instructions for the [Popover](/docs/components/popover#instal
   let value = $state<DateValue>();
 </script>
 
-<Popover.Root openFocus>
+<Popover.Root>
   <Popover.Trigger>
     {#snippet child({ props })}
       <Button
@@ -61,7 +61,7 @@ See installations instructions for the [Popover](/docs/components/popover#instal
     {/snippet}
   </Popover.Trigger>
   <Popover.Content class="w-auto p-0">
-    <Calendar bind:value initialFocus />
+    <Calendar bind:value type="single" initialFocus />
   </Popover.Content>
 </Popover.Root>
 ```

diff --git a/sites/docs/src/content/components/dialog.md b/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>

diff --git a/sites/docs/src/content/components/drawer.md b/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>

diff --git a/sites/docs/src/content/components/dropdown-menu.md b/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>
@@ -75,3 +75,10 @@ Install `bits-ui`:
 <div></div>
 
 </ComponentPreview>
+
+## Changelog
+
+### 2024-10-30 Classes for DropdownMenu.SubTrigger
+
+- Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `<DropdownMenu.SubTrigger>` to automatically style icon inside the dropdown menu sub trigger.
+- Removed `size-4` from the icon inside the `<DropdownMenu.SubTrigger>` since it is now handled by the parent `<DropdownMenu.SubTrigger>`.
diff --git a/sites/docs/src/content/components/form.md b/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,

diff --git a/sites/docs/src/content/components/hover-card.md b/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>

diff --git a/sites/docs/src/content/components/input-otp.md b/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}>

diff --git a/sites/docs/src/content/components/input.md b/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 />

diff --git a/sites/docs/src/content/components/label.md b/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>

diff --git a/sites/docs/src/content/components/menubar.md b/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>

diff --git a/sites/docs/src/content/components/pagination.md b/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}>

diff --git a/sites/docs/src/content/components/popover.md b/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>