chore: update sveltekit

Author: segunadebayo

bun.lock

@@ -463,7 +463,7 @@
       "name": "svelte-kit",
       "version": "0.0.1",
       "dependencies": {
-        "@ark-ui/svelte": "workspace:*",
+        "@ark-ui/svelte": "5.3.2",
       },
       "devDependencies": {
         "@sveltejs/adapter-auto": "^6.0.0",

templates/svelte-kit/package.json

@@ -12,7 +12,7 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "dependencies": {
-    "@ark-ui/svelte": "workspace:*"
+    "@ark-ui/svelte": "5.3.2"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^6.0.0",

templates/svelte-kit/src/routes/+layout.svelte

@@ -0,0 +1,12 @@
+<script>
+  let { children } = $props()
+</script>
+
+<nav>
+  <a href="/">Home</a>
+  <a href="/select">Select</a>
+</nav>
+
+<div style="padding: 1rem;">
+  {@render children()}
+</div>

templates/svelte-kit/src/routes/+page.svelte

@@ -1,2 +1,38 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+  import { Portal } from '@ark-ui/svelte/portal'
+  import { Select, createListCollection } from '@ark-ui/svelte/select'
+  import { ChevronDownIcon } from 'lucide-svelte'
+
+  const collection = createListCollection({
+    items: ['Apple', 'Banana', 'Cherry', 'Date'],
+  })
+</script>
+
+<Select.Root {collection}>
+  <Select.Label>Select Fruits</Select.Label>
+  <Select.Control>
+    <Select.Trigger style="display: flex; align-items: center; gap: 0.5rem">
+      <Select.ValueText placeholder="Fruits" />
+      <Select.Indicator>
+        <ChevronDownIcon />
+      </Select.Indicator>
+    </Select.Trigger>
+    <Select.ClearTrigger>Clear</Select.ClearTrigger>
+  </Select.Control>
+  <Portal>
+    <Select.Positioner>
+      <Select.Content>
+        <Select.ItemGroup>
+          <Select.ItemGroupLabel>Fruits</Select.ItemGroupLabel>
+          {#each collection.items as item}
+            <Select.Item {item}>
+              <Select.ItemText>{item}</Select.ItemText>
+              <Select.ItemIndicator>✓</Select.ItemIndicator>
+            </Select.Item>
+          {/each}
+        </Select.ItemGroup>
+      </Select.Content>
+    </Select.Positioner>
+  </Portal>
+  <Select.HiddenSelect />
+</Select.Root>

templates/svelte-kit/src/routes/select/+page.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { Portal } from '@ark-ui/svelte/portal'
+  import { Select, createListCollection } from '@ark-ui/svelte/select'
+  import { ChevronDownIcon } from 'lucide-svelte'
+
+  interface Item {
+    label: string
+    value: string
+    disabled?: boolean
+  }
+
+  let value = $state<string[]>([])
+
+  const collection = createListCollection<Item>({
+    items: [
+      { label: 'React', value: 'react' },
+      { label: 'Solid', value: 'solid' },
+      { label: 'Vue', value: 'vue' },
+      { label: 'Svelte', value: 'svelte', disabled: true },
+    ],
+  })
+
+  let selectedItems = $derived.by<Item[]>(() => {
+    return collection.items.filter((item) => value.includes(item.value))
+  })
+</script>
+
+<Select.Root {collection} bind:value>
+  <Select.Label>Select Framework</Select.Label>
+  <Select.Control>
+    <Select.Trigger style="display: flex; align-items: center; gap: 0.5rem">
+      <Select.ValueText placeholder="Framework" />
+      <Select.Indicator>
+        <ChevronDownIcon />
+      </Select.Indicator>
+    </Select.Trigger>
+    <Select.ClearTrigger>Clear</Select.ClearTrigger>
+  </Select.Control>
+  <Portal>
+    <Select.Positioner>
+      <Select.Content>
+        <Select.ItemGroup>
+          <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
+          {#each collection.items as item (item.value)}
+            <Select.Item {item}>
+              <Select.ItemText>{item.label}</Select.ItemText>
+              <Select.ItemIndicator>✓</Select.ItemIndicator>
+            </Select.Item>
+          {/each}
+        </Select.ItemGroup>
+      </Select.Content>
+    </Select.Positioner>
+  </Portal>
+  <Select.HiddenSelect />
+</Select.Root>
+
+{#if selectedItems.length > 0}
+  <div style="margin-top: 1rem;">
+    <p>Selected: {selectedItems.map((item) => item.label).join(', ')}</p>
+  </div>
+{/if}