feature: move all shadcn related code to src/shared/shadcn

components.json

@@ -5,10 +5,10 @@
     "baseColor": "zinc"
   },
   "aliases": {
-    "components": "$shared/ui",
+    "components": "$shared/shadcn/ui",
-    "utils": "$shared/utils/shadcn-utils",
+    "utils": "$shared/shadcn/utils/shadcn-utils",
-    "ui": "$shared/ui",
+    "ui": "$shared/shadcn/ui",
-    "hooks": "$shared/hooks",
+    "hooks": "$shared/shadcn/hooks",
     "lib": "$shared"
   },
   "typescript": true,

src/ambient.d.ts

@@ -1,7 +1,20 @@
 declare module '*.svelte' {
-    import type { ComponentType } from 'svelte';
+    import type { ComponentProps as SvelteComponentProps, ComponentType, Snippet } from 'svelte';
-    const component: ComponentType;
+    import type { HTMLAttributes } from 'svelte/elements';
-    export default component;
+
+    interface Component {
+        new(options: {
+            target: HTMLElement;
+            props?: Record<string, unknown>;
+            intro?: boolean;
+        }): {
+            $on: (event: string, handler: (...args: unknown[]) => unknown) => void;
+            $destroy: () => void;
+            $set: (props: Record<string, unknown>) => void;
+        };
+    }
+
+    export default Component;
 }
 
 declare module '*.svg' {
@@ -18,18 +31,3 @@ declare module '*.jpg' {
     const content: string;
     export default content;
 }
-
-// Shadcn-svelte module declarations for .js imports
-// These declarations allow TypeScript to resolve .js imports to .ts files
-
-declare module '$shared/utils/shadcn-utils.js' {
-    export * from '$shared/utils/shadcn-utils';
-}
-
-declare module '$shared/ui/*/index.js' {
-    export * from '$shared/ui/*/index';
-}
-
-declare module '$shared/hooks/*.svelte.js' {
-    export * from '$shared/hooks/*.svelte';
-}

src/routes/Page.svelte

@@ -1,5 +1,5 @@
 <script>
-    import Button from '$lib/components/ui/button/button.svelte';
+    import Button from '$shared/shadcn/ui/button/button.svelte';
 </script>
 
 <h1>Welcome to Svelte + Vite</h1>

src/shared/shadcn/ui/button/button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import { tv, type VariantProps } from 'tailwind-variants';
 

src/shared/shadcn/ui/input/input.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
 
 type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;

src/shared/shadcn/ui/separator/separator.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
+    import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
 import { Separator as SeparatorPrimitive } from 'bits-ui';
 
 let {

src/shared/shadcn/ui/sheet/sheet-content.svelte

@@ -23,7 +23,7 @@ export type Side = VariantProps<typeof sheetVariants>['side'];
 </script>
 
 <script lang="ts">
-    import { cn, type WithoutChildrenOrChild } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithoutChildrenOrChild } from '$shared/shadcn/utils/shadcn-utils.js';
 import XIcon from '@lucide/svelte/icons/x';
 import { Dialog as SheetPrimitive } from 'bits-ui';
 import type { Snippet } from 'svelte';

src/shared/shadcn/ui/sheet/sheet-description.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
+    import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
 import { Dialog as SheetPrimitive } from 'bits-ui';
 
 let {

src/shared/shadcn/ui/sheet/sheet-footer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/sheet/sheet-header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/sheet/sheet-overlay.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
+    import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
 import { Dialog as SheetPrimitive } from 'bits-ui';
 
 let {

src/shared/shadcn/ui/sheet/sheet-title.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
+    import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
 import { Dialog as SheetPrimitive } from 'bits-ui';
 
 let {

src/shared/shadcn/ui/sidebar/context.svelte.ts

@@ -1,4 +1,4 @@
-import { IsMobile } from '$shared/hooks/is-mobile.svelte.js';
+import { IsMobile } from '$shared/shadcn/hooks/is-mobile.svelte.js';
 import { getContext, setContext } from 'svelte';
 import { SIDEBAR_KEYBOARD_SHORTCUT } from './constants.js';
 

src/shared/shadcn/ui/sidebar/sidebar-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/sidebar/sidebar-footer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/sidebar/sidebar-group-action.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 

src/shared/shadcn/ui/sidebar/sidebar-group-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/sidebar/sidebar-group-label.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 

src/shared/shadcn/ui/sidebar/sidebar-group.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/sidebar/sidebar-header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/sidebar/sidebar-input.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { Input } from '$shared/ui/input/index.js';
+    import { Input } from '$shared/shadcn/input/index.js';
-import { cn } from '$shared/utils/shadcn-utils.js';
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { ComponentProps } from 'svelte';
 
 let {

src/shared/shadcn/ui/sidebar/sidebar-inset.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/sidebar/sidebar-menu-action.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 

src/shared/shadcn/ui/sidebar/sidebar-menu-badge.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/sidebar/sidebar-menu-button.svelte

@@ -29,12 +29,12 @@ export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariant
 </script>
 
 <script lang="ts">
-    import * as Tooltip from '$shared/ui/tooltip/index.js';
+    import * as Tooltip from '$shared/shadcn/tooltip/index.js';
 import {
     cn,
     type WithElementRef,
     type WithoutChildrenOrChild,
-} from '$shared/utils/shadcn-utils.js';
+} from '$shared/shadcn/utils/shadcn-utils.js';
 import { mergeProps } from 'bits-ui';
 import type { ComponentProps, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';

src/shared/shadcn/ui/sidebar/sidebar-menu-item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/sidebar/sidebar-menu-skeleton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { Skeleton } from '$shared/ui/skeleton/index.js';
+    import { Skeleton } from '$shared/shadcn/skeleton/index.js';
-import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/sidebar/sidebar-menu-sub-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes } from 'svelte/elements';
 

src/shared/shadcn/ui/sidebar/sidebar-menu-sub-item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/sidebar/sidebar-menu-sub.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/sidebar/sidebar-menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/sidebar/sidebar-provider.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import * as Tooltip from '$shared/ui/tooltip/index.js';
+    import * as Tooltip from '$shared/shadcn/tooltip/index.js';
-import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 import {
     SIDEBAR_COOKIE_MAX_AGE,

src/shared/shadcn/ui/sidebar/sidebar-rail.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+    import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 import { useSidebar } from './context.svelte.js';
 

src/shared/shadcn/ui/sidebar/sidebar-separator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { Separator } from '$shared/ui/separator/index.js';
+    import { Separator } from '$shared/shadcn/separator/index.js';
-import { cn } from '$shared/utils/shadcn-utils.js';
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { ComponentProps } from 'svelte';
 
 let {

src/shared/shadcn/ui/sidebar/sidebar-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { Button } from '$shared/ui/button/index.js';
+    import { Button } from '$shared/shadcn/button/index.js';
-import { cn } from '$shared/utils/shadcn-utils.js';
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
 import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
 import type { ComponentProps } from 'svelte';
 import { useSidebar } from './context.svelte.js';

src/shared/shadcn/ui/sidebar/sidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import * as Sheet from '$shared/ui/sheet/index.js';
+    import * as Sheet from '$shared/shadcn/sheet/index.js';
-import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
+import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 import { SIDEBAR_WIDTH_MOBILE } from './constants.js';
 import { useSidebar } from './context.svelte.js';

src/shared/shadcn/ui/skeleton/skeleton.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-    import { cn, type WithElementRef, type WithoutChildren } from '$shared/utils/shadcn-utils.js';
+    import {
+    cn,
+    type WithElementRef,
+    type WithoutChildren,
+} from '$shared/shadcn/utils/shadcn-utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
 
 let {

src/shared/shadcn/ui/tooltip/tooltip-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
+    import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
-import type { WithoutChildrenOrChild } from '$shared/utils/shadcn-utils.js';
+import type { WithoutChildrenOrChild } from '$shared/shadcn/utils/shadcn-utils.js';
 import { Tooltip as TooltipPrimitive } from 'bits-ui';
 import type { ComponentProps } from 'svelte';
 import TooltipPortal from './tooltip-portal.svelte';

src/shared/shadcn/utils/shadcn-utils.ts

@@ -0,0 +1,37 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Utility function to merge Tailwind CSS classes
+ * Combines clsx for conditional classes and tailwind-merge to handle conflicts
+ */
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+/**
+ * Type utility to add a ref property to HTML element attributes
+ * Used in shadcn-svelte components to support element references
+ * @template T - The attributes type (e.g., HTMLAttributes<HTMLDivElement>)
+ * @template E - The element type (e.g., HTMLDivElement)
+ */
+export type WithElementRef<T, E extends HTMLElement = HTMLElement> = T & {
+    /**
+     * Reference to the DOM element
+     */
+    ref?: E | null;
+};
+
+/**
+ * Type utility to remove 'children' and 'child' properties from a type
+ * Used in shadcn-svelte components that use Snippets instead of children
+ * @template T - The type to remove children from
+ */
+export type WithoutChildren<T> = Omit<T, 'children'>;
+
+/**
+ * Type utility to remove 'children' and 'child' properties from a type
+ * Used in shadcn-svelte components that use Snippets instead of children
+ * @template T - The type to remove children and child from
+ */
+export type WithoutChildrenOrChild<T> = Omit<T, 'children' | 'child'>;

src/shared/ui/command/command-dialog.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-    import * as Dialog from '$shared/ui/dialog/index.js';
-import type { WithoutChildrenOrChild } from '$shared/utils/shadcn-utils.js';
-import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
-import type { Snippet } from 'svelte';
-import Command from './command.svelte';
-
-let {
-    open = $bindable(false),
-    ref = $bindable(null),
-    value = $bindable(''),
-    title = 'Command Palette',
-    description = 'Search for a command to run',
-    portalProps,
-    children,
-    ...restProps
-}:
-    & WithoutChildrenOrChild<DialogPrimitive.RootProps>
-    & WithoutChildrenOrChild<CommandPrimitive.RootProps>
-    & {
-        portalProps?: DialogPrimitive.PortalProps;
-        children: Snippet;
-        title?: string;
-        description?: string;
-    } = $props();
-</script>
-
-<Dialog.Root bind:open {...restProps}>
-    <Dialog.Header class="sr-only">
-        <Dialog.Title>{title}</Dialog.Title>
-        <Dialog.Description>{description}</Dialog.Description>
-    </Dialog.Header>
-    <Dialog.Content class="overflow-hidden p-0" {portalProps}>
-        <Command
-            class="**:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]]:px-2 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
-            {...restProps}
-            bind:value
-            bind:ref
-            {children}
-        />
-    </Dialog.Content>
-</Dialog.Root>

src/shared/ui/command/command-empty.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
-import { Command as CommandPrimitive } from 'bits-ui';
-
-let {
-    ref = $bindable(null),
-    class: className,
-    ...restProps
-}: CommandPrimitive.EmptyProps = $props();
-</script>
-
-<CommandPrimitive.Empty
-    bind:ref
-    data-slot="command-empty"
-    class={cn('py-6 text-center text-sm', className)}
-    {...restProps}
-/>

src/shared/ui/command/command-group.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
-import { Command as CommandPrimitive, useId } from 'bits-ui';
-
-let {
-    ref = $bindable(null),
-    class: className,
-    children,
-    heading,
-    value,
-    ...restProps
-}: CommandPrimitive.GroupProps & {
-    heading?: string;
-} = $props();
-</script>
-
-<CommandPrimitive.Group
-    bind:ref
-    data-slot="command-group"
-    class={cn('text-foreground overflow-hidden p-1', className)}
-    value={value ?? heading ?? `----${useId()}`}
-    {...restProps}
->
-    {#if heading}
-        <CommandPrimitive.GroupHeading
-            class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
-        >
-            {heading}
-        </CommandPrimitive.GroupHeading>
-    {/if}
-    <CommandPrimitive.GroupItems {children} />
-</CommandPrimitive.Group>

src/shared/ui/command/command-input.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
-import SearchIcon from '@lucide/svelte/icons/search';
-import { Command as CommandPrimitive } from 'bits-ui';
-
-let {
-    ref = $bindable(null),
-    class: className,
-    value = $bindable(''),
-    ...restProps
-}: CommandPrimitive.InputProps = $props();
-</script>
-
-<div class="flex h-9 items-center gap-2 border-b ps-3 pe-8" data-slot="command-input-wrapper">
-    <SearchIcon class="size-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-        data-slot="command-input"
-        class={cn(
-            'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-            className,
-        )}
-        bind:ref
-        {...restProps}
-        bind:value
-    />
-</div>

src/shared/ui/command/command-item.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
-import { Command as CommandPrimitive } from 'bits-ui';
-
-let {
-    ref = $bindable(null),
-    class: className,
-    ...restProps
-}: CommandPrimitive.ItemProps = $props();
-</script>
-
-<CommandPrimitive.Item
-    bind:ref
-    data-slot="command-item"
-    class={cn(
-        "aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-    )}
-    {...restProps}
-/>

src/shared/ui/command/command-link-item.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
-import { Command as CommandPrimitive } from 'bits-ui';
-
-let {
-    ref = $bindable(null),
-    class: className,
-    ...restProps
-}: CommandPrimitive.LinkItemProps = $props();
-</script>
-
-<CommandPrimitive.LinkItem
-    bind:ref
-    data-slot="command-item"
-    class={cn(
-        "aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-    )}
-    {...restProps}
-/>

src/shared/ui/command/command-list.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
-import { Command as CommandPrimitive } from 'bits-ui';
-
-let {
-    ref = $bindable(null),
-    class: className,
-    ...restProps
-}: CommandPrimitive.ListProps = $props();
-</script>
-
-<CommandPrimitive.List
-    bind:ref
-    data-slot="command-list"
-    class={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
-    {...restProps}
-/>

src/shared/ui/command/command-loading.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-    import { Command as CommandPrimitive } from 'bits-ui';
-
-let { ref = $bindable(null), ...restProps }: CommandPrimitive.LoadingProps = $props();
-</script>
-
-<CommandPrimitive.Loading bind:ref {...restProps} />

src/shared/ui/command/command-separator.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
-import { Command as CommandPrimitive } from 'bits-ui';
-
-let {
-    ref = $bindable(null),
-    class: className,
-    ...restProps
-}: CommandPrimitive.SeparatorProps = $props();
-</script>
-
-<CommandPrimitive.Separator
-    bind:ref
-    data-slot="command-separator"
-    class={cn('bg-border -mx-1 h-px', className)}
-    {...restProps}
-/>

src/shared/ui/command/command-shortcut.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-utils.js';
-import type { HTMLAttributes } from 'svelte/elements';
-
-let {
-    ref = $bindable(null),
-    class: className,
-    children,
-    ...restProps
-}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
-</script>
-
-<span
-    bind:this={ref}
-    data-slot="command-shortcut"
-    class={cn('text-muted-foreground ms-auto text-xs tracking-widest', className)}
-    {...restProps}
->
-    {@render children?.()}
-</span>

src/shared/ui/command/command.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils';
-import { Command as CommandPrimitive } from 'bits-ui';
-
-export type CommandRootApi = CommandPrimitive.Root;
-
-let {
-    api = $bindable(null),
-    ref = $bindable(null),
-    value = $bindable(''),
-    class: className,
-    ...restProps
-}: CommandPrimitive.RootProps & {
-    api?: CommandRootApi | null;
-} = $props();
-</script>
-
-<CommandPrimitive.Root
-    bind:this={api}
-    bind:value
-    bind:ref
-    data-slot="command"
-    class={cn(
-        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
-        className,
-    )}
-    {...restProps}
-/>

src/shared/ui/command/index.ts

@@ -1,37 +0,0 @@
-import Dialog from './command-dialog.svelte';
-import Empty from './command-empty.svelte';
-import Group from './command-group.svelte';
-import Input from './command-input.svelte';
-import Item from './command-item.svelte';
-import LinkItem from './command-link-item.svelte';
-import List from './command-list.svelte';
-import Loading from './command-loading.svelte';
-import Separator from './command-separator.svelte';
-import Shortcut from './command-shortcut.svelte';
-import Root from './command.svelte';
-
-export {
-    Dialog,
-    Dialog as CommandDialog,
-    Empty,
-    Empty as CommandEmpty,
-    Group,
-    Group as CommandGroup,
-    Input,
-    Input as CommandInput,
-    Item,
-    Item as CommandItem,
-    LinkItem,
-    LinkItem as CommandLinkItem,
-    List,
-    List as CommandList,
-    Loading,
-    Loading as CommandLoading,
-    Root,
-    //
-    Root as Command,
-    Separator,
-    Separator as CommandSeparator,
-    Shortcut,
-    Shortcut as CommandShortcut,
-};

src/shared/ui/dialog/dialog-close.svelte

@@ -1,7 +0,0 @@
-<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} />

src/shared/ui/dialog/dialog-content.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-    import { cn, type WithoutChildrenOrChild } from '$shared/utils/shadcn-utils.js';
-import XIcon from '@lucide/svelte/icons/x';
-import { Dialog as DialogPrimitive } from 'bits-ui';
-import type { Snippet } from 'svelte';
-import type { ComponentProps } from 'svelte';
-import DialogPortal from './dialog-portal.svelte';
-import * as Dialog from './index.js';
-
-let {
-    ref = $bindable(null),
-    class: className,
-    portalProps,
-    children,
-    showCloseButton = true,
-    ...restProps
-}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
-    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
-    children: Snippet;
-    showCloseButton?: boolean;
-} = $props();
-</script>
-
-<DialogPortal {...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 top-[50%] left-[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 absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-            >
-                <XIcon />
-                <span class="sr-only">Close</span>
-            </DialogPrimitive.Close>
-        {/if}
-    </DialogPrimitive.Content>
-</DialogPortal>

src/shared/ui/dialog/dialog-description.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
-import { Dialog as DialogPrimitive } from 'bits-ui';
-
-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}
-/>

src/shared/ui/dialog/dialog-footer.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-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('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
-    {...restProps}
->
-    {@render children?.()}
-</div>

src/shared/ui/dialog/dialog-header.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-    import { cn, type WithElementRef } from '$shared/utils/shadcn-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-header"
-    class={cn('flex flex-col gap-2 text-center sm:text-start', className)}
-    {...restProps}
->
-    {@render children?.()}
-</div>

src/shared/ui/dialog/dialog-overlay.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
-import { Dialog as DialogPrimitive } from 'bits-ui';
-
-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}
-/>

src/shared/ui/dialog/dialog-portal.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-    import { Dialog as DialogPrimitive } from 'bits-ui';
-
-let { ...restProps }: DialogPrimitive.PortalProps = $props();
-</script>
-
-<DialogPrimitive.Portal {...restProps} />

src/shared/ui/dialog/dialog-title.svelte

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

src/shared/ui/dialog/dialog-trigger.svelte

@@ -1,7 +0,0 @@
-<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} />

src/shared/ui/dialog/dialog.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-    import { Dialog as DialogPrimitive } from 'bits-ui';
-
-let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
-</script>
-
-<DialogPrimitive.Root bind:open {...restProps} />

src/shared/ui/dialog/index.ts

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

src/shared/ui/popover/index.ts

@@ -1,19 +0,0 @@
-import Close from './popover-close.svelte';
-import Content from './popover-content.svelte';
-import Portal from './popover-portal.svelte';
-import Trigger from './popover-trigger.svelte';
-import Root from './popover.svelte';
-
-export {
-    Close,
-    Close as PopoverClose,
-    Content,
-    Content as PopoverContent,
-    Portal,
-    Portal as PopoverPortal,
-    Root,
-    //
-    Root as Popover,
-    Trigger,
-    Trigger as PopoverTrigger,
-};

src/shared/ui/popover/popover-close.svelte

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

src/shared/ui/popover/popover-content.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-    import { cn, type WithoutChildrenOrChild } from '$shared/utils/shadcn-utils.js';
-import { Popover as PopoverPrimitive } from 'bits-ui';
-import type { ComponentProps } from 'svelte';
-import PopoverPortal from './popover-portal.svelte';
-
-let {
-    ref = $bindable(null),
-    class: className,
-    sideOffset = 4,
-    align = 'center',
-    portalProps,
-    ...restProps
-}: PopoverPrimitive.ContentProps & {
-    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
-} = $props();
-</script>
-
-<PopoverPortal {...portalProps}>
-    <PopoverPrimitive.Content
-        bind:ref
-        data-slot="popover-content"
-        {sideOffset}
-        {align}
-        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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-            className,
-        )}
-        {...restProps}
-    />
-</PopoverPortal>

src/shared/ui/popover/popover-portal.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-    import { Popover as PopoverPrimitive } from 'bits-ui';
-
-let { ...restProps }: PopoverPrimitive.PortalProps = $props();
-</script>
-
-<PopoverPrimitive.Portal {...restProps} />

src/shared/ui/popover/popover-trigger.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-    import { cn } from '$shared/utils/shadcn-utils.js';
-import { Popover as PopoverPrimitive } from 'bits-ui';
-
-let {
-    ref = $bindable(null),
-    class: className,
-    ...restProps
-}: PopoverPrimitive.TriggerProps = $props();
-</script>
-
-<PopoverPrimitive.Trigger
-    bind:ref
-    data-slot="popover-trigger"
-    class={cn('', className)}
-    {...restProps}
-/>

src/shared/ui/popover/popover.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-    import { Popover as PopoverPrimitive } from 'bits-ui';
-
-let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
-</script>
-
-<PopoverPrimitive.Root bind:open {...restProps} />

src/shared/utils/shadcn-utils.ts

@@ -1,13 +0,0 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs));
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T;
-export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
-export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };

tsconfig.json

@@ -15,7 +15,6 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "isolatedModules": true,
-    "verbatimModuleSyntax": true,
 
     /* Path Aliases */
     "baseUrl": ".",
@@ -37,6 +36,7 @@
   "exclude": [
     "node_modules",
     "dist",
-    "./src/shared/ui"
+    "src/shared/shadcn/**/*",
+    "node_modules/**/*"
   ]
 }