storyloco 1.0.2 → 1.2.0

package/README.md

@@ -9,6 +9,11 @@ A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, a
 - **🎬 Mux Video** - Upload, manage, and configure videos with Mux integration
 - **📝 Heading** - Simple heading editor with level selection (H1-H6)
 - **🎨 Theme** - Color theme selector with visual previews
+- **🔗 Link** - Link editor with support for internal, external, email, and asset links
+
+### Vite Plugins
+
+- **📋 Storyblok Schema** - Automatically generate TypeScript types from your Storyblok components
 
 ### Shared Components
 
@@ -33,18 +38,54 @@ bun add storyloco
 // Import specific plugin types
 import type { Video } from 'storyloco/mux'
 import type { Heading } from 'storyloco/heading'
+import type { Link } from 'storyloco/link'
 
 // Or import everything
-import type { Video, Heading } from 'storyloco'
+import type { Video, Heading, Link } from 'storyloco'
 ```
 
 ### Use Shared Components
 
 ```typescript
-import { Input, Label, Switch, Skeleton } from 'storyloco/shared'
+import { Input, Label, Switch, Skeleton, Select, Separator } from 'storyloco/shared'
 import { cn } from 'storyloco/shared/utils'
 ```
 
+### Vite Plugins
+
+#### Storyblok Schema Plugin
+
+Automatically generate TypeScript types from your Storyblok components during development:
+
+```typescript
+// vite.config.ts
+import { storyblok_schema } from 'storyloco/vite'
+
+export default defineConfig({
+	plugins: [
+		storyblok_schema({
+			output_path: 'src/lib/storyblok',
+			interval_ms: 60000 // regenerate every minute
+		})
+	]
+})
+```
+
+**Options:**
+
+- `storyblok_personal_access_token` - Your Storyblok personal access token (defaults to `STORYBLOK_PERSONAL_ACCESS_TOKEN` env var)
+- `storyblok_space_id` - Your Storyblok space ID (defaults to `STORYBLOK_SPACE_ID` env var)
+- `output_path` - Where to output generated files (defaults to `src/lib`)
+- `interval_ms` - How often to regenerate types (defaults to 60000ms)
+
+The plugin will:
+
+- Pull your component schema from Storyblok
+- Generate TypeScript definitions
+- Format the output with Prettier
+- Lock the generated file to prevent manual edits
+- Regenerate automatically when components change
+
 ## 🔧 Development
 
 ### Prerequisites
@@ -74,6 +115,7 @@ storyloco/
 │   ├── mux/          # Video upload & management plugin
 │   ├── heading/      # Heading editor plugin
 │   ├── theme/        # Theme selector plugin
+│   ├── link/         # Link editor plugin
 │   └── shared/       # UI component library
 ├── src/
 │   └── index.ts      # Type exports
@@ -126,6 +168,8 @@ The shared package provides a comprehensive set of UI components:
 - `Input` - Text input with proper styling
 - `Label` - Accessible form labels
 - `Switch` - Toggle switch component
+- `Select` - Select component
+- `Separator` - Separator component
 
 ### Display Components
 

package/package.json

@@ -1,75 +1,81 @@
 {
-	"name": "storyloco",
-	"version": "1.0.2",
-	"description": "A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, and Tailwind CSS",
-	"keywords": [
-		"storyblok",
-		"field-plugin",
-		"svelte",
-		"typescript",
-		"tailwind",
-		"cms",
-		"headless"
-	],
-	"license": "MIT",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/darbymanning/storyloco.git"
-	},
-	"main": "./src/index.ts",
-	"types": "./src/index.ts",
-	"files": [
-		"src",
-		"packages/mux/src/app.svelte",
-		"packages/mux/types.ts",
-		"packages/heading/src/app.svelte",
-		"packages/heading/types.ts",
-		"packages/theme/src/app.svelte",
-		"packages/shared/dist"
-	],
-	"exports": {
-		".": {
-			"types": "./src/index.ts",
-			"import": "./src/index.ts"
-		},
-		"./mux": {
-			"types": "./packages/mux/types.ts",
-			"import": "./packages/mux/src/app.svelte"
-		},
-		"./heading": {
-			"types": "./packages/heading/types.ts",
-			"import": "./packages/heading/src/app.svelte"
-		},
-		"./shared": {
-			"types": "./packages/shared/dist/index.d.ts",
-			"svelte": "./packages/shared/dist/index.js"
-		},
-		"./shared/utils": {
-			"types": "./packages/shared/dist/utils.d.ts",
-			"svelte": "./packages/shared/dist/utils.js"
-		}
-	},
-	"devDependencies": {
-		"@types/node": "24.0.0",
-		"@typescript-eslint/eslint-plugin": "8.34.0",
-		"@typescript-eslint/parser": "8.34.0",
-		"eslint": "9.28.0",
-		"eslint-plugin-prettier": "5.4.1",
-		"kitto": "1.0.0-rc.12",
-		"prettier": "3.5.3",
-		"typescript": "5.8.3",
-		"vite": "6.3.5"
-	},
-	"scripts": {
-		"add-plugin": "npx @storyblok/field-plugin-cli@latest add --dir \"./packages\" --structure monorepo",
-		"lint": "eslint --ext .js .",
-		"format": "prettier . --write"
-	},
-	"type": "module",
-	"workspaces": [
-		"packages/*"
-	],
-	"dependencies": {
-		"color": "5.0.0"
-	}
+  "name": "storyloco",
+  "version": "1.2.0",
+  "description": "A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, and Tailwind CSS",
+  "keywords": [
+    "storyblok",
+    "field-plugin",
+    "svelte",
+    "typescript",
+    "tailwind",
+    "cms",
+    "headless"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/darbymanning/storyloco.git"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src",
+    "packages/mux/src/app.svelte",
+    "packages/mux/types.ts",
+    "packages/heading/src/app.svelte",
+    "packages/heading/types.ts",
+    "packages/theme/src/app.svelte",
+    "packages/shared/dist",
+    "packages/vite/dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./mux": {
+      "types": "./packages/mux/types.ts",
+      "import": "./packages/mux/src/app.svelte"
+    },
+    "./heading": {
+      "types": "./packages/heading/types.ts",
+      "import": "./packages/heading/src/app.svelte"
+    },
+    "./shared": {
+      "types": "./packages/shared/dist/index.d.ts",
+      "svelte": "./packages/shared/dist/index.js"
+    },
+    "./shared/utils": {
+      "types": "./packages/shared/dist/utils.d.ts",
+      "svelte": "./packages/shared/dist/utils.js"
+    },
+    "./vite": {
+      "types": "./packages/vite/dist/index.d.ts",
+      "import": "./packages/vite/dist/index.js"
+    }
+  },
+  "devDependencies": {
+    "@types/node": "24.0.0",
+    "@typescript-eslint/eslint-plugin": "8.34.0",
+    "@typescript-eslint/parser": "8.34.0",
+    "eslint": "9.28.0",
+    "eslint-plugin-prettier": "5.4.1",
+    "kitto": "1.0.0-rc.12",
+    "prettier": "3.5.3",
+    "typescript": "5.8.3",
+    "vite": "6.3.5"
+  },
+  "scripts": {
+    "add-plugin": "npx @storyblok/field-plugin-cli@latest add --dir \"./packages\" --structure monorepo",
+    "build": "cd packages/vite && npm run build && cd ../../packages/shared && npm run build",
+    "lint": "eslint --ext .js .",
+    "format": "prettier . --write"
+  },
+  "type": "module",
+  "workspaces": [
+    "packages/*"
+  ],
+  "dependencies": {
+    "color": "5.0.0"
+  }
 }

package/packages/heading/src/app.svelte

@@ -10,22 +10,22 @@
 	let content: Heading = $state({ text: '', level: 1 })
 
 	onMount(() => {
-		createFieldPlugin({
+		createFieldPlugin<Heading>({
 			enablePortalModal: true,
 			validateContent: (content) => {
 				if (typeof content !== 'object' || content === null) {
-					return { content: { text: '', level: 1 } as Heading }
+					return { content: { text: '', level: 1 } }
 				}
 
 				const validated = content as Heading
+
 				// ensure level is one of the allowed values
 				if (![1, 2, 3, 4, 5, 6].includes(validated.level)) {
 					validated.level = 1
 				}
+
 				// ensure text is a string
-				if (typeof validated.text !== 'string') {
-					validated.text = ''
-				}
+				if (typeof validated.text !== 'string') validated.text = ''
 
 				return { content: validated }
 			},
@@ -46,7 +46,7 @@
 	<fieldset class="flex gap-2">
 		<Input class="flex-1" bind:value={content.text} oninput={update} />
 		<select
-			class="rounded outline-none focus-visible:border-ring border-input bg-white border dark:bg-input/30"
+			class="rounded outline-none focus-visible:border-ring border-input bg-white border dark:bg-input/30 min-h-11.5"
 			bind:value={() => content.level, (v) => (content.level = Number(v) as Heading['level'])}
 			onchange={update}
 		>

package/packages/mux/src/app.svelte

@@ -22,9 +22,7 @@
 
 	type MuxAsset = Mux.Video.Assets.Asset
 	type Plugin = FieldPluginResponse<Video | null>
-</script>
 
-<script lang="ts">
 	let content: Video | null = $state(null)
 	let plugin: Plugin | null = $state(null)
 	let assets: Array<MuxAsset> | null = $state(null)
@@ -40,18 +38,8 @@
 	})
 
 	onMount(() => {
-		createFieldPlugin({
+		createFieldPlugin<Video>({
 			enablePortalModal: true,
-			validateContent: (c) => {
-				if (typeof c !== 'object' || c === null) {
-					return { content: null }
-				}
-
-				// Update local state
-				content = c as Video
-
-				return { content: c }
-			},
 			onUpdateState: (state) => {
 				plugin = state as Plugin
 			},
@@ -184,7 +172,7 @@
 
 	function date(date: string): string {
 		const d = new Date(Number(date) * 1000)
-		return format_elapse(d) || format_date('{MMM} {d}, {YYYY}', d)
+		return format_elapse(d) || format_date('{MMM} {D}, {YYYY}', d)
 	}
 
 	const is_modal_open = $derived.by(() => plugin?.type === 'loaded' && plugin.data.isModalOpen)
@@ -488,7 +476,7 @@
 					<div class="grid gap-2">
 						<Label for="preload">Preload</Label>
 						<select
-							class="bg-background border rounded min-h-10 outline-none focus-visible:border-ring transition-colors w-full"
+							class="bg-background border rounded min-h-11.5 outline-none focus-visible:border-ring transition-colors w-full"
 							bind:value={content.preload}
 							onchange={(event) => {
 								if (!event.target || !(event.target instanceof HTMLSelectElement)) return

package/packages/shared/dist/components/ui/input/input.svelte

@@ -24,7 +24,7 @@
 		bind:this={ref}
 		data-slot="input"
 		class={cn(
-			'selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-11.5 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
 			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
 			classname
@@ -39,7 +39,7 @@
 		bind:this={ref}
 		data-slot="input"
 		class={cn(
-			'border-input bg-white selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'border-input bg-white selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-11.5 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 			'focus-visible:border-ring',
 			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
 			classname

package/packages/shared/dist/components/ui/select/index.d.ts

@@ -0,0 +1,11 @@
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+declare const Root: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "value" | "open">;
+export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, GroupHeading, Root as Select, Group as SelectGroup, Label as SelectLabel, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, GroupHeading as SelectGroupHeading, };

package/packages/shared/dist/components/ui/select/index.js

@@ -0,0 +1,14 @@
+import { Select as SelectPrimitive } from "bits-ui";
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+const Root = SelectPrimitive.Root;
+export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, GroupHeading, 
+//
+Root as Select, Group as SelectGroup, Label as SelectLabel, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, GroupHeading as SelectGroupHeading, };

package/packages/shared/dist/components/ui/select/select-content.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import { cn, type WithoutChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: SelectPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		data-slot="select-content"
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-(--bits-select-anchor-height) min-w-(--bits-select-anchor-width) w-full scroll-my-1 p-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPrimitive.Portal>

package/packages/shared/dist/components/ui/select/select-content.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Select as SelectPrimitive } from "bits-ui";
+import { type WithoutChild } from "../../../utils.js";
+type $$ComponentProps = WithoutChild<SelectPrimitive.ContentProps> & {
+    portalProps?: SelectPrimitive.PortalProps;
+};
+declare const SelectContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SelectContent = ReturnType<typeof SelectContent>;
+export default SelectContent;

package/packages/shared/dist/components/ui/select/select-group-heading.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	data-slot="select-group-heading"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>

package/packages/shared/dist/components/ui/select/select-group-heading.svelte.d.ts

@@ -0,0 +1,10 @@
+declare const SelectGroupHeading: import("svelte").Component<Omit<{}, "child" | "children"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").ComboboxGroupHeadingPropsWithoutHTML>, {}, "ref">;
+type SelectGroupHeading = ReturnType<typeof SelectGroupHeading>;
+export default SelectGroupHeading;

package/packages/shared/dist/components/ui/select/select-group.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group data-slot="select-group" {...restProps} />

package/packages/shared/dist/components/ui/select/select-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectGroup: import("svelte").Component<SelectPrimitive.GroupProps, {}, "ref">;
+type SelectGroup = ReturnType<typeof SelectGroup>;
+export default SelectGroup;

package/packages/shared/dist/components/ui/select/select-item.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>

package/packages/shared/dist/components/ui/select/select-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectItem: import("svelte").Component<Omit<SelectPrimitive.ItemProps, "child">, {}, "ref">;
+type SelectItem = ReturnType<typeof SelectItem>;
+export default SelectItem;

package/packages/shared/dist/components/ui/select/select-label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/packages/shared/dist/components/ui/select/select-label.svelte.d.ts

@@ -0,0 +1,6 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {};
+declare const SelectLabel: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SelectLabel = ReturnType<typeof SelectLabel>;
+export default SelectLabel;

package/packages/shared/dist/components/ui/select/select-scroll-down-button.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>

package/packages/shared/dist/components/ui/select/select-scroll-down-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectScrollDownButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollDownButtonProps, "child">, "children">, {}, "ref">;
+type SelectScrollDownButton = ReturnType<typeof SelectScrollDownButton>;
+export default SelectScrollDownButton;

package/packages/shared/dist/components/ui/select/select-scroll-up-button.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>

package/packages/shared/dist/components/ui/select/select-scroll-up-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectScrollUpButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollUpButtonProps, "child">, "children">, {}, "ref">;
+type SelectScrollUpButton = ReturnType<typeof SelectScrollUpButton>;
+export default SelectScrollUpButton;

package/packages/shared/dist/components/ui/select/select-separator.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from 'bits-ui'
+	import { Separator } from '../separator/index.js'
+	import { cn } from '../../../utils.js'
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props()
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+	{...restProps}
+/>

package/packages/shared/dist/components/ui/select/select-separator.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Separator as SeparatorPrimitive } from 'bits-ui';
+declare const SelectSeparator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
+type SelectSeparator = ReturnType<typeof SelectSeparator>;
+export default SelectSeparator;