storyloco 1.14.2 → 1.14.3

package/README.md

@@ -11,6 +11,7 @@ A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, a
 - **📝 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
+- **🔍 SEO** - SEO metadata editor with support for title, description, OG tags, and Twitter cards
 - **🏗️ Plans** - Floor plan manager with drag-and-drop sorting for types, floors, dimensions, and rooms
 - **📝 Input** - Comprehensive form input field with support for all HTML input types, checkboxes, radio buttons, selects, and textareas
 - **⏰ Time** - Simple time input field with step control
@@ -51,9 +52,10 @@ import type { Heading } from 'storyloco/heading'
 import type { Link } from 'storyloco/link'
 import type { Input } from 'storyloco/input'
 import type { Asset } from 'storyloco/asset'
+import type { SEO } from 'storyloco/seo'
 
 // Or import everything
-import type { Video, Heading, Link, Input, Asset } from 'storyloco'
+import type { Video, Heading, Link, Input, Asset, SEO } from 'storyloco'
 ```
 
 ### Use Storyblok Client
@@ -279,6 +281,7 @@ storyloco/
 │   ├── heading/      # Heading editor plugin
 │   ├── theme/        # Theme selector plugin
 │   ├── link/         # Link editor plugin
+│   ├── seo/          # SEO metadata editor plugin
 │   ├── input/        # Form input field plugin
 │   └── shared/       # UI component library
 ├── src/

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "storyloco",
-   "version": "1.14.2",
+   "version": "1.14.3",
    "description": "A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, and Tailwind CSS",
    "keywords": [
       "storyblok",
@@ -30,7 +30,8 @@
       "packages/vite/dist",
       "packages/ticketsource/types.ts",
       "packages/input/types.ts",
-      "packages/time/types.ts"
+      "packages/time/types.ts",
+      "packages/seo/types.ts"
    ],
    "exports": {
       ".": {
@@ -79,18 +80,21 @@
       "./time": {
          "types": "./packages/time/types.ts",
          "svelte": "./packages/time/src/app.svelte.ts"
+      },
+      "./seo": {
+         "types": "./packages/seo/types.ts"
       }
    },
    "devDependencies": {
-      "@types/node": "24.7.0",
-      "@typescript-eslint/eslint-plugin": "8.46.0",
-      "@typescript-eslint/parser": "8.46.0",
-      "eslint": "9.37.0",
+      "@types/node": "24.10.0",
+      "@typescript-eslint/eslint-plugin": "8.46.3",
+      "@typescript-eslint/parser": "8.46.3",
+      "eslint": "9.39.1",
       "eslint-plugin-prettier": "5.5.4",
       "kitto": "1.0.0-rc.17",
       "prettier": "3.6.2",
       "typescript": "5.9.3",
-      "vite": "7.1.9"
+      "vite": "7.2.0"
    },
    "peerDependencies": {
       "@storyblok/svelte": "^5.2.4",
@@ -109,7 +113,6 @@
    ],
    "dependencies": {
       "chalk": "5.6.2",
-      "ora": "9.0.0",
-      "storyblok-generate-ts": "^2.2.0"
+      "ora": "9.0.0"
    }
 }

package/packages/asset/types.ts

@@ -69,3 +69,58 @@ export interface Asset extends Omit<StoryblokAsset, 'id'> {
 	/* The name of the asset ('Description' in Storyblok UI) */
 	name?: string
 }
+
+interface BaseLink {
+	url?: string
+	text?: string
+}
+
+export const link_types = ['asset', 'external', 'email', 'internal'] as const
+export const target_options = ['_self', '_blank', '_parent', '_top', '_new'] as const
+export const rel_options = [
+	'noopener',
+	'noreferrer',
+	'nofollow',
+	'noopener noreferrer',
+	'noopener noreferrer nofollow',
+] as const
+
+export type LinkType = (typeof link_types)[number]
+export type Target = (typeof target_options)[number]
+export type Rel = (typeof rel_options)[number]
+
+export interface AssetLink extends BaseLink {
+	type: 'asset'
+	asset?: Asset
+	target?: Target
+}
+
+export interface ExternalLink extends BaseLink {
+	type: 'external'
+	target?: Target
+	rel?: Rel
+}
+
+export interface EmailLink extends BaseLink {
+	type: 'email'
+	target?: Target
+	email?: string
+	subject?: string
+	body?: string
+	cc?: string
+	bcc?: string
+}
+
+export interface StoryLink extends BaseLink {
+	type: 'internal'
+	target?: Target
+	suffix?: string
+	story?: {
+		id: number
+		uuid: string
+		name: string
+		published_at: string | null
+	}
+}
+
+export type Link = AssetLink | ExternalLink | EmailLink | StoryLink

package/packages/link/types.ts

@@ -1,4 +1,4 @@
-import type { Asset } from '@storyblok/field-plugin'
+import type { Asset } from '../asset/types'
 
 interface BaseLink {
 	url?: string

package/packages/seo/types.ts

@@ -0,0 +1,10 @@
+export type SEO = Partial<{
+	title?: string
+	og_image?: string
+	og_title?: string
+	description?: string
+	twitter_image?: string
+	twitter_title: string
+	og_description: string
+	twitter_description: string
+}>

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

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from 'bits-ui'
-	import { cn, type WithoutChild } from '../../../utils.js'
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
 		...restProps
-	}: WithoutChild<AccordionPrimitive.ContentProps> = $props()
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
 </script>
 
 <AccordionPrimitive.Content
@@ -16,7 +16,7 @@
 	class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
 	{...restProps}
 >
-	<div class={cn('pb-4 pt-0', className)}>
+	<div class={cn("pb-4 pt-0", className)}>
 		{@render children?.()}
 	</div>
 </AccordionPrimitive.Content>

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

@@ -1,4 +1,4 @@
-import { Accordion as AccordionPrimitive } from 'bits-ui';
+import { Accordion as AccordionPrimitive } from "bits-ui";
 declare const AccordionContent: import("svelte").Component<Omit<AccordionPrimitive.ContentProps, "child">, {}, "ref">;
 type AccordionContent = ReturnType<typeof AccordionContent>;
 export default AccordionContent;

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

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from 'bits-ui'
-	import { cn } from '../../../utils.js'
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		...restProps
-	}: AccordionPrimitive.ItemProps = $props()
+	}: AccordionPrimitive.ItemProps = $props();
 </script>
 
 <AccordionPrimitive.Item
 	bind:ref
 	data-slot="accordion-item"
-	class={cn('border-b last:border-b-0', className)}
+	class={cn("border-b last:border-b-0", className)}
 	{...restProps}
 />

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

@@ -1,4 +1,4 @@
-import { Accordion as AccordionPrimitive } from 'bits-ui';
+import { Accordion as AccordionPrimitive } from "bits-ui";
 declare const AccordionItem: import("svelte").Component<AccordionPrimitive.ItemProps, {}, "ref">;
 type AccordionItem = ReturnType<typeof AccordionItem>;
 export default AccordionItem;

package/packages/shared/dist/components/ui/accordion/accordion-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from 'bits-ui'
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
-	import { cn, type WithoutChild } from '../../../utils.js'
+	import { cn } from '../../../utils.js'
 
 	let {
 		ref = $bindable(null),
@@ -9,7 +9,7 @@
 		level = 3,
 		children,
 		...restProps
-	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+	}: AccordionPrimitive.TriggerProps & {
 		level?: AccordionPrimitive.HeaderProps['level']
 	} = $props()
 </script>
@@ -19,14 +19,14 @@
 		data-slot="accordion-trigger"
 		bind:ref
 		class={cn(
-			'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+			'flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
 		<ChevronDownIcon
-			class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+			class="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200"
 		/>
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>

package/packages/shared/dist/components/ui/accordion/accordion-trigger.svelte.d.ts

@@ -1,6 +1,5 @@
 import { Accordion as AccordionPrimitive } from 'bits-ui';
-import { type WithoutChild } from '../../../utils.js';
-type $$ComponentProps = WithoutChild<AccordionPrimitive.TriggerProps> & {
+type $$ComponentProps = AccordionPrimitive.TriggerProps & {
     level?: AccordionPrimitive.HeaderProps['level'];
 };
 declare const AccordionTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;

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

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive } from 'bits-ui'
+	import { Accordion as AccordionPrimitive } from "bits-ui";
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
 		...restProps
-	}: AccordionPrimitive.RootProps = $props()
+	}: AccordionPrimitive.RootProps = $props();
 </script>
 
 <AccordionPrimitive.Root

package/packages/shared/dist/components/ui/accordion/accordion.svelte.d.ts

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

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

@@ -1,5 +1,5 @@
-import Root from './accordion.svelte';
-import Content from './accordion-content.svelte';
-import Item from './accordion-item.svelte';
-import Trigger from './accordion-trigger.svelte';
+import Root from "./accordion.svelte";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
 export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

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

@@ -1,7 +1,7 @@
-import Root from './accordion.svelte';
-import Content from './accordion-content.svelte';
-import Item from './accordion-item.svelte';
-import Trigger from './accordion-trigger.svelte';
+import Root from "./accordion.svelte";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
 export { Root, Content, Item, Trigger, 
 //
 Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

package/packages/shared/dist/components/ui/dialog/dialog-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />

package/packages/shared/dist/components/ui/dialog/dialog-close.svelte.d.ts

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

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: DialogPrimitive.PortalProps;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<Dialog.Portal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"bg-background 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 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute end-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+			>
+				<XIcon />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</Dialog.Portal>

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

@@ -0,0 +1,11 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+import type { Snippet } from "svelte";
+import { type WithoutChildrenOrChild } from "shared/dist/utils.js";
+type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+    portalProps?: DialogPrimitive.PortalProps;
+    children: Snippet;
+    showCloseButton?: boolean;
+};
+declare const DialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;

package/packages/shared/dist/components/ui/dialog/dialog-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

package/packages/shared/dist/components/ui/dialog/dialog-description.svelte.d.ts

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

package/packages/shared/dist/components/ui/dialog/dialog-footer.svelte

@@ -0,0 +1,23 @@
+<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="dialog-footer"
+	class={cn(
+		'-m-6 mt-0 flex flex-col-reverse gap-2 border-t bg-accent p-4 px-6 sm:flex-row sm:justify-end',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/packages/shared/dist/components/ui/dialog/dialog-footer.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from 'shared/dist/utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const DialogFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type DialogFooter = ReturnType<typeof DialogFooter>;
+export default DialogFooter;

package/packages/shared/dist/components/ui/dialog/dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/packages/shared/dist/components/ui/dialog/dialog-header.svelte.d.ts

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

package/packages/shared/dist/components/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+		className
+	)}
+	{...restProps}
+/>

package/packages/shared/dist/components/ui/dialog/dialog-overlay.svelte.d.ts

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

package/packages/shared/dist/components/ui/dialog/dialog-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-lg font-semibold leading-none", className)}
+	{...restProps}
+/>

package/packages/shared/dist/components/ui/dialog/dialog-title.svelte.d.ts

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

package/packages/shared/dist/components/ui/dialog/dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />

package/packages/shared/dist/components/ui/dialog/dialog-trigger.svelte.d.ts

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

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

@@ -0,0 +1,11 @@
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+export { Root, Title, Portal, Footer, Header, Trigger, Overlay, Content, Description, Close, Root as Dialog, Title as DialogTitle, Portal as DialogPortal, Footer as DialogFooter, Header as DialogHeader, Trigger as DialogTrigger, Overlay as DialogOverlay, Content as DialogContent, Description as DialogDescription, Close as DialogClose, };

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

@@ -0,0 +1,14 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+const Root = DialogPrimitive.Root;
+const Portal = DialogPrimitive.Portal;
+export { Root, Title, Portal, Footer, Header, Trigger, Overlay, Content, Description, Close, 
+//
+Root as Dialog, Title as DialogTitle, Portal as DialogPortal, Footer as DialogFooter, Header as DialogHeader, Trigger as DialogTrigger, Overlay as DialogOverlay, Content as DialogContent, Description as DialogDescription, Close as DialogClose, };

package/packages/shared/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import MinusIcon from "@lucide/svelte/icons/minus";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 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({ checked, indeterminate })}
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			{#if indeterminate}
+				<MinusIcon class="size-4" />
+			{:else}
+				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>

package/packages/shared/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { type WithoutChildrenOrChild } from "../../../utils.js";
+import type { Snippet } from "svelte";
+type $$ComponentProps = WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+    children?: Snippet;
+};
+declare const DropdownMenuCheckboxItem: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked" | "indeterminate">;
+type DropdownMenuCheckboxItem = ReturnType<typeof DropdownMenuCheckboxItem>;
+export default DropdownMenuCheckboxItem;