initial release

.changeset/empty-panthers-tap.md

@@ -0,0 +1,5 @@
+---
+'cmdk-sv': patch
+---
+
+initial release

README.md

@@ -2,7 +2,7 @@
 <img src="./static/og.png" />
 </p>
 
-# ⌘K-sv [![cmdk-sv minzip package size](https://img.shields.io/bundlephobia/minzip/cmdk-sv)](https://www.npmjs.com/package/cmdk-sv?activeTab=code) [![cmdk package version](https://img.shields.io/npm/v/cmdk.svg?colorB=green)](https://www.npmjs.com/package/cmdk-sv)
+# ⌘K-sv [![cmdk-sv minzip package size](https://img.shields.io/bundlephobia/minzip/cmdk-sv)](https://www.npmjs.com/package/cmdk-sv?activeTab=code) [![cmdk package version](https://img.shields.io/npm/v/cmdk-sv.svg?colorB=green)](https://www.npmjs.com/package/cmdk-sv)
 
 A port of [cmdk](https://cmdk.paco.me), to Svelte.
 
@@ -20,7 +20,7 @@ npm install cmdk-sv
 
 ```svelte
 <script lang="ts">
-	import * as Command from 'cmdk-sv';
+	import { Command } from 'cmdk-sv';
 </script>
 
 <Command.Root label="Command Menu">
@@ -44,7 +44,7 @@ Or in a dialog:
 
 ```svelte
 <script lang="ts">
-	import * as Command from 'cmdk-sv';
+	import { Command } from 'cmdk-sv';
 </script>
 
 <Command.Dialog label="Command Menu">
@@ -74,7 +74,7 @@ Render this to show the command menu inline, or use [Dialog](#dialog-cmdk-dialog
 
 ```svelte
 <script lang="ts">
-	import * as Command from 'cmdk-sv';
+	import { Command } from 'cmdk-sv';
 
 	let value = 'apple';
 </script>
@@ -146,7 +146,7 @@ All props are forwarded to the underlying `input` element. Can be controlled as
 
 ```svelte
 <script lang="ts">
-	import * as Command from 'cmdk-sv';
+	import { Command } from 'cmdk-sv';
 
 	let search = '';
 </script>
@@ -221,7 +221,7 @@ You should conditionally render this with `progress` while loading asynchronous
 
 ```svelte
 <script lang="ts">
-	import * as Command from 'cmdk-sv';
+	import { Command } from 'cmdk-sv';
 
 	let loading = false;
 </script>
@@ -313,7 +313,7 @@ If your items have nested sub-items that you only want to reveal when searching,
 ```svelte
 <!-- SubItem.svelte -->
 <script lang="ts">
-	import * as Command from 'cmdk-sv';
+	import { Command } from 'cmdk-sv';
 
 	type $$Props = Command.ItemProps & {
 		search?: string;
@@ -354,7 +354,7 @@ Using the input value:
 ```svelte
 <!-- CommandMenu.svelte -->
 <script lang="ts">
-	import * as Command from 'cmdk-sv';
+	import { Command } from 'cmdk-sv';
 	import SubItem from './SubItem.svelte';
 	let search: string;
 </script>
@@ -375,7 +375,7 @@ Render the items as they become available. Filtering and sorting will happen aut
 
 ```svelte
 <script lang="ts">
-	import * as Command from 'cmdk-sv';
+	import { Command } from 'cmdk-sv';
 
 	let loading = false;
 	let items: string[] = [];
@@ -416,7 +416,7 @@ Render `Command` inside of the popover content:
 
 ```svelte
 <script lang="ts">
-	import * as Command from 'cmdk-sv';
+	import { Command } from 'cmdk-sv';
 	import { Popover } from 'bits-ui';
 </script>
 

src/docs/code.ts

@@ -1,5 +1,5 @@
 export const code = `<script>
-  import * as Command from 'cmdk-sv';
+  import { Command } from 'cmdk-sv';
   let loading = false
 </script>
 

src/docs/components/cmdk/framer/framer-cmdk.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Command from '$lib';
+	import { Command } from '$lib';
 	import { onMount, type ComponentType, tick } from 'svelte';
 	import {
 		AvatarIcon,

src/docs/components/cmdk/linear/linear-cmdk.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, type ComponentType, tick } from 'svelte';
-	import * as Command from '$lib';
+	import { Command } from '$lib';
 	import {
 		AssignToIcon,
 		AssignToMeIcon,

src/docs/components/cmdk/raycast/item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Command from '$lib';
+	import { Command } from '$lib';
 	import type { ItemProps } from '$lib/cmdk';
 	export let value: string;
 	export let isCommand: boolean = false;

src/docs/components/cmdk/raycast/raycast-cmdk.svelte

@@ -11,7 +11,7 @@
 	} from '$docs/components/icons';
 	import { ClipboardIcon, HammerIcon, RaycastDarkIcon, RaycastLightIcon } from './icons';
 	import Logo from '$docs/components/logo.svelte';
-	import * as Command from '$lib';
+	import { Command } from '$lib';
 	import SubCommand from './sub-command.svelte';
 	import { onMount, tick } from 'svelte';
 

src/docs/components/cmdk/raycast/sub-command.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Command from '$lib';
+	import { Command } from '$lib';
 	import { Popover } from 'bits-ui';
 	import { onMount, tick } from 'svelte';
 	import SubItem from './sub-item.svelte';

src/docs/components/cmdk/raycast/sub-item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Command from '$lib';
+	import { Command } from '$lib';
 	export let shortcut: string;
 </script>
 

src/docs/components/cmdk/vercel/home.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Command from '$lib';
+	import { Command } from '$lib';
 	import { ContactIcon, DocsIcon, FeedbackIcon, PlusIcon, ProjectsIcon, TeamsIcon } from './icons';
 	import Item from './item.svelte';
 	export let searchProjects: () => void;

src/docs/components/cmdk/vercel/item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Command from '$lib';
+	import { Command } from '$lib';
 
 	export let shortcut: string = '';
 	export let onSelect: ((value: string) => void) | undefined = undefined;

src/docs/components/cmdk/vercel/vercel-cmdk.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Command from '$lib';
+	import { Command } from '$lib';
 	import { isHTMLElement, kbd } from '$lib/internal';
 	import Home from './home.svelte';
 	import Projects from './projects.svelte';

src/lib/cmdk/components/CommandDialog.svelte

@@ -2,7 +2,7 @@
 	import type { DialogProps } from '../types.js';
 	import { Dialog as DialogPrimitive } from 'bits-ui';
 	import type { Transition } from '$lib/internal/types.js';
-	import * as Command from '$lib';
+	import { Command } from '$lib';
 
 	type ContentT = $$Generic<Transition>;
 	type ContentIn = $$Generic<Transition>;

src/lib/cmdk/index.ts

@@ -7,8 +7,7 @@ import type {
 	ListProps,
 	InputProps,
 	SeparatorProps,
-	DialogProps,
-	State
+	DialogProps
 } from './types.js';
 
 import Root from './components/Command.svelte';
@@ -20,7 +19,6 @@ import Item from './components/CommandItem.svelte';
 import List from './components/CommandList.svelte';
 import Loading from './components/CommandLoading.svelte';
 import Separator from './components/CommandSeparator.svelte';
-import { createState } from './command.js';
 
 export {
 	// Components
@@ -52,8 +50,5 @@ export {
 	GroupProps,
 	ListProps,
 	InputProps,
-	SeparatorProps,
-	// helpers
-	createState,
-	State
+	SeparatorProps
 };

src/lib/index.ts

@@ -1,2 +1,27 @@
-// Reexport your entry components here
-export * from './cmdk/index.js';
+import { createState } from './cmdk/command.js';
+import {
+	CommandRoot,
+	CommandDialog,
+	CommandEmpty,
+	CommandList,
+	CommandItem,
+	CommandGroup,
+	CommandInput,
+	CommandLoading,
+	CommandSeparator
+} from './cmdk/index.js';
+export * as Command from './cmdk/index.js';
+export * from './types.js';
+export { createState };
+
+export {
+	CommandRoot,
+	CommandDialog,
+	CommandEmpty,
+	CommandList,
+	CommandItem,
+	CommandGroup,
+	CommandInput,
+	CommandLoading,
+	CommandSeparator
+};

src/lib/types.ts

@@ -0,0 +1,25 @@
+import type {
+	LoadingProps,
+	CommandProps,
+	EmptyProps,
+	ItemProps,
+	GroupProps,
+	ListProps,
+	InputProps,
+	SeparatorProps,
+	DialogProps,
+	State
+} from './cmdk/types.js';
+
+export {
+	LoadingProps,
+	CommandProps,
+	EmptyProps,
+	ItemProps,
+	GroupProps,
+	ListProps,
+	InputProps,
+	SeparatorProps,
+	DialogProps,
+	State
+};