svelte-incant 0.1.0 → 0.2.0

package/README.md

@@ -4,9 +4,42 @@ A keyboard shortcut management library for Svelte 5.
 
 ## Installation
 
-```sh
-bun install svelte-incant
-```
+### Prerequisites
+
+This package requires **Tailwind CSS 4** and **shadcn-svelte** to be installed and configured in your project.
+
+### Setup
+
+1. **Install and configure Tailwind CSS** (if not already):
+
+   ```bash
+   bunx sv add tailwind
+   ```
+
+2. **Initialize shadcn-svelte** (if not already):
+
+   ```bash
+   bunx shadcn-svelte@latest init
+   ```
+
+   Follow the official [shadcn-svelte installation guide](https://shadcn-svelte.com/docs/installation) for detailed instructions.
+
+3. **Install the package** (peer dependencies are installed automatically):
+
+   ```bash
+   bun add svelte-incant
+   ```
+
+4. **Add @source directive** to your CSS file where Tailwind is configured (e.g., `src/app.css` or similar):
+
+   ```css
+   @import 'tailwindcss';
+
+   /* Add this line to include svelte-incant utility classes */
+   @source '../../node_modules/svelte-incant/**/*.{svelte,js,ts}';
+
+   /* rest of your styles here */
+   ```
 
 ## Usage
 
@@ -14,7 +47,7 @@ Add `Palette` component to your root layout to enable the shortcut overlay:
 
 ```svelte
 <script>
-	import { Palette } from 'svelte-incant';
+ import { Palette } from 'svelte-incant';
 </script>
 
 <Palette />
@@ -26,13 +59,13 @@ Register keyboard shortcuts with the `Shortcut` component:
 
 ```svelte
 <script>
-	import { Shortcut } from 'svelte-incant';
+ import { Shortcut } from 'svelte-incant';
 </script>
 
 <Shortcut
-	keys={['control', 's']}
-	description="Save document"
-	action={() => console.log('Save document')}
+ keys={['control', 's']}
+ description="Save document"
+ action={() => console.log('Save document')}
 />
 ```
 
@@ -40,11 +73,11 @@ For focusing elements (like inputs), use the `Focus` component:
 
 ```svelte
 <script>
-	import { Focus } from 'svelte-incant';
+ import { Focus } from 'svelte-incant';
 </script>
 
 <Focus keys={['control', 'e']} description="Focus search input">
-	<input type="text" placeholder="Search..." />
+ <input type="text" placeholder="Search..." />
 </Focus>
 ```
 
@@ -52,20 +85,20 @@ Or attach shortcuts directly to an element using the `@attach` directive:
 
 ```svelte
 <script>
-	import { shortcut } from 'svelte-incant';
+ import { shortcut } from 'svelte-incant';
 </script>
 
 <input
-	type="text"
-	placeholder="Type something..."
-	{@attach shortcut({
-		keys: ['meta', 'i'],
-		description: 'Focus text input'
-	})}
+ type="text"
+ placeholder="Type something..."
+ {@attach shortcut({
+  keys: ['meta', 'i'],
+  description: 'Focus text input'
+ })}
 />
 ```
 
-The `@attach` directive focuses the element it attaches to directly, as opposed to the `Focus` component, which wraps the children in a `div` and focuses that.
+The `@attach` directive focuses the element it attaches to directly, as opposed to the `Focus` component, which wraps children in a `div` and focuses that.
 
 ## Features
 
@@ -73,3 +106,32 @@ The `@attach` directive focuses the element it attaches to directly, as opposed
 - **Route-specific Shortcuts**: Shortcuts only run when their component is mounted, allowing different shortcuts in different routes
 - **Focus Management**: Easily manage focus states with keyboard shortcuts
 - **Component-based**: Use components or directives to register shortcuts
+- **Shadcn-svelte Integration**: Full styling integration with shadcn-svelte components
+
+## Troubleshooting
+
+### Styles are missing or components look unstyled
+
+1. **Check @source directive**: Make sure you added the `@source` directive to your CSS file as shown in the installation steps.
+
+2. **Verify Tailwind 4**: Ensure you're using Tailwind CSS v4, as the `@source` directive is a v4 feature:
+
+   ```bash
+   bun list tailwindcss
+   ```
+
+3. **Check shadcn-svelte setup**: Make sure shadcn-svelte is properly initialized with all required CSS variables and theme configuration.
+
+4. **Build your project**: Sometimes you need to restart your development server or rebuild your project for changes to take effect.
+
+### Peer dependency errors
+
+If you see errors about missing peer dependencies, ensure you have the required packages installed:
+
+```bash
+# Check if peer dependencies are installed
+bun list | grep -E "(bits-ui|runed|@lucide/svelte)"
+
+# If missing, install them manually
+bun add bits-ui runed @lucide/svelte
+```

package/dist/components/kbds.svelte

@@ -3,11 +3,9 @@
 	import { keyToSymbol } from '../utils.js';
 
 	let {
-		keys,
-		separator = 'or'
+		keys
 	}: {
 		keys: string | string[] | string[][];
-		separator?: string;
 	} = $props();
 
 	type KeyCombination = string[];
@@ -19,13 +17,26 @@
 				? [keys as string[]]
 				: (keys as KeyCombination[])
 	);
+
+	const formatter: Intl.ListFormat = $derived(
+		new Intl.ListFormat(undefined, {
+			style: 'long',
+			type: 'disjunction'
+		})
+	);
+
+	const formattedParts = $derived.by(() => {
+		const combos = keyGroups.map((group) => group.map(keyToSymbol).join(' '));
+		return formatter.formatToParts(combos);
+	});
 </script>
 
 <Kbd.Group class="text-xs">
-	{#each keyGroups as group, index (index)}
-		{#if index > 0}
-			<span class="mx-1 text-muted-foreground">{separator}</span>
+	{#each formattedParts as part (part)}
+		{#if part.type === 'element'}
+			<Kbd.Root>{part.value}</Kbd.Root>
+		{:else}
+			<span class="mx-1 text-muted-foreground">{part.value}</span>
 		{/if}
-		<Kbd.Root>{group.map(keyToSymbol).join(' ')}</Kbd.Root>
 	{/each}
 </Kbd.Group>

package/dist/components/kbds.svelte.d.ts

@@ -1,6 +1,5 @@
 type $$ComponentProps = {
     keys: string | string[] | string[][];
-    separator?: string;
 };
 declare const Kbds: import("svelte").Component<$$ComponentProps, {}, "">;
 type Kbds = ReturnType<typeof Kbds>;

package/dist/components/ui/input/index.d.ts

@@ -1,2 +1,2 @@
-import Root from "./input.svelte";
-export { Root, Root as Input, };
+import Root from './input.svelte';
+export { Root, Root as Input };

package/dist/components/ui/input/index.js

@@ -1,4 +1,4 @@
-import Root from "./input.svelte";
+import Root from './input.svelte';
 export { Root, 
 //
-Root as Input, };
+Root as Input };

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

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
 
-	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
 
 	type Props = WithElementRef<
-		Omit<HTMLInputAttributes, "type"> &
-			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+		Omit<HTMLInputAttributes, 'type'> &
+			({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
 	>;
 
 	let {
@@ -15,19 +15,19 @@
 		type,
 		files = $bindable(),
 		class: className,
-		"data-slot": dataSlot = "input",
+		'data-slot': dataSlot = 'input',
 		...restProps
 	}: Props = $props();
 </script>
 
-{#if type === "file"}
+{#if type === 'file'}
 	<input
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50",
-			"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",
+			'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
+			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 			className
 		)}
 		type="file"
@@ -40,9 +40,9 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none 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",
+			'flex h-9 w-full min-w-0 rounded-md border border-input bg-background px-3 py-1 text-base shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
+			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 			className
 		)}
 		{type}

package/dist/components/ui/input/input.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-import { type WithElementRef } from "../../../utils.js";
-type InputType = Exclude<HTMLInputTypeAttribute, "file">;
-type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
-    type: "file";
+import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+type Props = WithElementRef<Omit<HTMLInputAttributes, 'type'> & ({
+    type: 'file';
     files?: FileList;
 } | {
     type?: InputType;

package/dist/components/ui/tabs/index.d.ts

@@ -1,5 +1,5 @@
-import Root from "./tabs.svelte";
-import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
-import Trigger from "./tabs-trigger.svelte";
-export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger };

package/dist/components/ui/tabs/index.js

@@ -1,7 +1,7 @@
-import Root from "./tabs.svelte";
-import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
-import Trigger from "./tabs-trigger.svelte";
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
 export { Root, Content, List, Trigger, 
 //
-Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };
+Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger };

package/dist/components/ui/tabs/tabs-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <TabsPrimitive.Content
 	bind:ref
 	data-slot="tabs-content"
-	class={cn("flex-1 outline-none", className)}
+	class={cn('flex-1 outline-none', className)}
 	{...restProps}
 />

package/dist/components/ui/tabs/tabs-content.svelte.d.ts

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

package/dist/components/ui/tabs/tabs-list.svelte

@@ -1,19 +1,15 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: TabsPrimitive.ListProps = $props();
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
 </script>
 
 <TabsPrimitive.List
 	bind:ref
 	data-slot="tabs-list"
 	class={cn(
-		"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+		'inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground',
 		className
 	)}
 	{...restProps}

package/dist/components/ui/tabs/tabs-list.svelte.d.ts

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

package/dist/components/ui/tabs/tabs-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="tabs-trigger"
 	class={cn(
-		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/tabs/tabs-trigger.svelte.d.ts

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

package/dist/components/ui/tabs/tabs.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
 
 	let {
 		ref = $bindable(null),
-		value = $bindable(""),
+		value = $bindable(''),
 		class: className,
 		...restProps
 	}: TabsPrimitive.RootProps = $props();
@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="tabs"
-	class={cn("flex flex-col gap-2", className)}
+	class={cn('flex flex-col gap-2', className)}
 	{...restProps}
 />

package/dist/components/ui/tabs/tabs.svelte.d.ts

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

package/package.json

@@ -1,7 +1,11 @@
 {
 	"name": "svelte-incant",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"license": "MIT",
+	"repository": "https://github.com/mastermakrela/svelte-incant",
+	"bugs": "https://github.com/mastermakrela/svelte-incant/issues",
+	"homepage": "https://svelte-incant.mastermakrela.com/",
+	"author": "mastermakrela <github@mastermakrela.com>",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -22,9 +26,7 @@
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
-	"sideEffects": [
-		"**/*.css"
-	],
+	"sideEffects": false,
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"type": "module",
@@ -35,7 +37,8 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0"
+		"svelte": "^5.0.0",
+		"bits-ui": "^2.0.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.4.0",
@@ -69,12 +72,7 @@
 		"typescript-eslint": "^8.48.1",
 		"vite": "^7.2.6",
 		"vitest": "^4.0.15",
-		"vitest-browser-svelte": "^2.0.1"
-	},
-	"keywords": [
-		"svelte"
-	],
-	"dependencies": {
+		"vitest-browser-svelte": "^2.0.1",
 		"@lucide/svelte": "^0.561.0",
 		"clsx": "^2.1.1",
 		"copy-to-clipboard": "^3.3.3",
@@ -83,5 +81,11 @@
 		"tailwind-merge": "^3.4.0",
 		"tailwind-variants": "^3.2.2",
 		"tw-animate-css": "^1.4.0"
-	}
+	},
+	"keywords": [
+		"svelte",
+		"keyboard shortcuts",
+		"shortcuts"
+	],
+	"dependencies": {}
 }