pika-ux 1.0.0-beta.0

package/src/index.ts

@@ -0,0 +1,23 @@
+/**
+ * pika-ux package
+ *
+ * This package contains UI components for the Pika project, including both custom Pika components
+ * and shadcn/ui components adapted for Svelte.
+ *
+ * You can import specific component collections:
+ * import { Button, Card } from 'pika-ux/shadcn';
+ * import { Chip, PikaAlert } from 'pika-ux/pika';
+ *
+ * Or import individual components:
+ * import { Button } from 'pika-ux/shadcn/button';
+ * import { Chip } from 'pika-ux/pika/chip';
+ */
+
+export const packageInfo = {
+    name: 'pika-ux',
+    description: 'UI Components library for the Pika project'
+};
+
+// Re-export all components for convenience
+export * from './pika';
+export * from './shadcn';

package/src/lib/docsite/Navigation.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    import * as Sidebar from '../../shadcn/sidebar/index.js';
+
+    // Props interface
+    interface NavigationProps {
+        currentPage: string;
+        onNavigate: (page: string) => void;
+    }
+
+    // Props
+    let { currentPage, onNavigate }: NavigationProps = $props();
+
+    const navigationItems = [
+        { id: 'getting-started', label: 'Getting Started', icon: '📚' },
+        { id: 'icons', label: 'Icons', icon: '✨' },
+        { id: 'colors', label: 'Colors', icon: '🎨' },
+        {
+            id: 'components',
+            label: 'Components',
+            icon: '🧩',
+            children: [{ id: 'components/button', label: 'Button', icon: '🔘' }]
+        }
+    ];
+
+    function handleNavigate(pageId: string) {
+        onNavigate(pageId);
+    }
+</script>
+
+<Sidebar.Provider>
+    <Sidebar.Sidebar variant="inset" class="border-r">
+        <Sidebar.SidebarHeader class="border-b px-6 py-4">
+            <h2 class="text-lg font-semibold text-foreground">pika-ux</h2>
+            <p class="text-sm text-muted-foreground">Component Documentation</p>
+        </Sidebar.SidebarHeader>
+
+        <Sidebar.SidebarContent class="px-3 py-4">
+            <Sidebar.SidebarGroup>
+                <Sidebar.SidebarMenu>
+                    {#each navigationItems as item}
+                        <Sidebar.SidebarMenuItem>
+                            <Sidebar.SidebarMenuButton
+                                onclick={() => handleNavigate(item.id)}
+                                class="w-full justify-start {currentPage === item.id || (item.children && item.children.some((child) => currentPage === child.id))
+                                    ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                                    : ''}"
+                            >
+                                <span class="mr-2">{item.icon}</span>
+                                {item.label}
+                            </Sidebar.SidebarMenuButton>
+
+                            {#if item.children}
+                                <Sidebar.SidebarMenuSub class="ml-4 mt-1">
+                                    {#each item.children as child}
+                                        <Sidebar.SidebarMenuSubItem>
+                                            <Sidebar.SidebarMenuSubButton
+                                                onclick={() => handleNavigate(child.id)}
+                                                class="w-full justify-start {currentPage === child.id ? 'bg-sidebar-accent text-sidebar-accent-foreground' : ''}"
+                                            >
+                                                <span class="mr-2">{child.icon}</span>
+                                                {child.label}
+                                            </Sidebar.SidebarMenuSubButton>
+                                        </Sidebar.SidebarMenuSubItem>
+                                    {/each}
+                                </Sidebar.SidebarMenuSub>
+                            {/if}
+                        </Sidebar.SidebarMenuItem>
+                    {/each}
+                </Sidebar.SidebarMenu>
+            </Sidebar.SidebarGroup>
+        </Sidebar.SidebarContent>
+
+        <!-- <Sidebar.SidebarFooter class="border-t px-6 py-4">
+            <p class="text-xs text-muted-foreground">Built with Svelte 5</p>
+        </Sidebar.SidebarFooter> -->
+    </Sidebar.Sidebar>
+</Sidebar.Provider>

package/src/lib/docsite/pages/Colors.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    // TODO: Add color palette examples and documentation
+</script>
+
+<div class="max-w-4xl mx-auto p-6">
+    <h1 class="text-4xl font-bold text-foreground mb-6">Colors</h1>
+
+    <div class="prose prose-slate dark:prose-invert max-w-none">
+        <p class="text-lg text-muted-foreground mb-8">Design system colors with light and dark mode support.</p>
+
+        <div class="grid gap-6">
+            <!-- Preview of existing color system -->
+            <div class="bg-card border border-border rounded-lg p-6">
+                <h3 class="text-lg font-semibold mb-4">Core Colors</h3>
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                    <div class="p-4 bg-primary text-primary-foreground rounded-lg text-center text-sm">Primary</div>
+                    <div class="p-4 bg-secondary text-secondary-foreground rounded-lg text-center text-sm">Secondary</div>
+                    <div class="p-4 bg-accent text-accent-foreground rounded-lg text-center text-sm">Accent</div>
+                    <div class="p-4 bg-muted text-muted-foreground rounded-lg text-center text-sm">Muted</div>
+                </div>
+            </div>
+
+            <div class="bg-card border border-border rounded-lg p-6">
+                <h2 class="text-xl font-semibold mb-4">TODO: Complete Color Documentation</h2>
+                <ul class="space-y-2 text-muted-foreground">
+                    <li>• Full color palette showcase</li>
+                    <li>• Custom color variables (gold, blueish, etc.)</li>
+                    <li>• Usage guidelines</li>
+                    <li>• Dark mode variants</li>
+                    <li>• CSS variable reference</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/docsite/pages/Components.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    // TODO: Add component overview and categories
+</script>
+
+<div class="max-w-4xl mx-auto p-6">
+    <h1 class="text-4xl font-bold text-foreground mb-6">Components</h1>
+
+    <div class="prose prose-slate dark:prose-invert max-w-none">
+        <p class="text-lg text-muted-foreground mb-8">A comprehensive collection of Svelte components for modern web applications.</p>
+
+        <div class="grid gap-6">
+            <div class="bg-card border border-border rounded-lg p-6">
+                <h2 class="text-xl font-semibold mb-4">shadcn/ui Components</h2>
+                <p class="text-muted-foreground mb-4">Battle-tested components from shadcn/ui, adapted for Svelte.</p>
+                <div class="grid grid-cols-2 md:grid-cols-3 gap-2 text-sm">
+                    <span class="bg-muted px-2 py-1 rounded">Button</span>
+                    <span class="bg-muted px-2 py-1 rounded">Card</span>
+                    <span class="bg-muted px-2 py-1 rounded">Dialog</span>
+                    <span class="bg-muted px-2 py-1 rounded">Input</span>
+                    <span class="bg-muted px-2 py-1 rounded">Sidebar</span>
+                    <span class="bg-muted px-2 py-1 rounded">+ 30 more</span>
+                </div>
+            </div>
+
+            <div class="bg-card border border-border rounded-lg p-6">
+                <h2 class="text-xl font-semibold mb-4">Pika Components</h2>
+                <p class="text-muted-foreground mb-4">Custom components built specifically for enhanced productivity.</p>
+                <div class="grid grid-cols-2 md:grid-cols-3 gap-2 text-sm">
+                    <span class="bg-muted px-2 py-1 rounded">Pika Alert</span>
+                    <span class="bg-muted px-2 py-1 rounded">Date Picker</span>
+                    <span class="bg-muted px-2 py-1 rounded">Popup Help</span>
+                    <span class="bg-muted px-2 py-1 rounded">Slideout</span>
+                    <span class="bg-muted px-2 py-1 rounded">Pika Table</span>
+                    <span class="bg-muted px-2 py-1 rounded">+ 20 more</span>
+                </div>
+            </div>
+
+            <div class="bg-card border border-border rounded-lg p-6">
+                <h2 class="text-xl font-semibold mb-4">TODO: Complete Component Documentation</h2>
+                <ul class="space-y-2 text-muted-foreground">
+                    <li>• Individual component pages</li>
+                    <li>• Live examples and code</li>
+                    <li>• Props and API documentation</li>
+                    <li>• Usage guidelines</li>
+                    <li>• Accessibility notes</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/docsite/pages/GettingStarted.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    // TODO: Add getting started content
+</script>
+
+<div class="max-w-4xl mx-auto p-6">
+    <h1 class="text-4xl font-bold text-foreground mb-6">Getting Started</h1>
+
+    <div class="prose prose-slate dark:prose-invert max-w-none">
+        <p class="text-lg text-muted-foreground mb-8">Welcome to pika-ux - a modern Svelte component library built for productivity.</p>
+
+        <div class="bg-card border border-border rounded-lg p-6">
+            <h2 class="text-xl font-semibold mb-4">TODO: Getting Started Content</h2>
+            <ul class="space-y-2 text-muted-foreground">
+                <li>• Installation instructions</li>
+                <li>• Basic setup guide</li>
+                <li>• Quick start examples</li>
+                <li>• Configuration options</li>
+            </ul>
+        </div>
+    </div>
+</div>

package/src/lib/docsite/pages/Icons.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    // TODO: Add icon examples and documentation
+</script>
+
+<div class="max-w-4xl mx-auto p-6">
+    <h1 class="text-4xl font-bold text-foreground mb-6">Icons</h1>
+
+    <div class="prose prose-slate dark:prose-invert max-w-none">
+        <p class="text-lg text-muted-foreground mb-8">Icon system powered by unplugin-icons with Lucide and CI icon sets.</p>
+
+        <div class="bg-card border border-border rounded-lg p-6">
+            <h2 class="text-xl font-semibold mb-4">TODO: Icon Documentation</h2>
+            <ul class="space-y-2 text-muted-foreground">
+                <li>• Icon usage examples</li>
+                <li>• Available icon sets (Lucide, CI)</li>
+                <li>• Import patterns</li>
+                <li>• Size and styling options</li>
+                <li>• Icon component wrapper</li>
+            </ul>
+        </div>
+    </div>
+</div>

package/src/lib/docsite/pages/components/Button.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import Button from '../../../../shadcn/button/button.svelte';
+    // TODO: Add complete Button documentation and examples
+</script>
+
+<div class="max-w-4xl mx-auto p-6">
+    <h1 class="text-4xl font-bold text-foreground mb-6">Button</h1>
+
+    <div class="prose prose-slate dark:prose-invert max-w-none">
+        <p class="text-lg text-muted-foreground mb-8">A versatile button component with multiple variants and sizes.</p>
+
+        <div class="grid gap-6">
+            <!-- Quick Preview -->
+            <div class="bg-card border border-border rounded-lg p-6">
+                <h3 class="text-lg font-semibold mb-4">Preview</h3>
+                <div class="flex gap-4 flex-wrap">
+                    <Button>Default</Button>
+                    <Button variant="secondary">Secondary</Button>
+                    <Button variant="destructive">Destructive</Button>
+                    <Button variant="outline">Outline</Button>
+                    <Button variant="ghost">Ghost</Button>
+                </div>
+            </div>
+
+            <div class="bg-card border border-border rounded-lg p-6">
+                <h2 class="text-xl font-semibold mb-4">TODO: Complete Button Documentation</h2>
+                <ul class="space-y-2 text-muted-foreground">
+                    <li>• All variant examples (default, secondary, destructive, outline, ghost, link)</li>
+                    <li>• Size variations (sm, default, lg, icon)</li>
+                    <li>• Usage with icons</li>
+                    <li>• Loading states</li>
+                    <li>• Disabled states</li>
+                    <li>• Props API reference</li>
+                    <li>• Code examples</li>
+                    <li>• Accessibility guidelines</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>

package/src/main.ts

@@ -0,0 +1,9 @@
+import { mount } from 'svelte';
+import './app.css';
+import App from './App.svelte';
+
+const app = mount(App, {
+    target: document.getElementById('app')!
+});
+
+export default app;

package/src/pika/chip/chip.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+    import X from '$icons/lucide/x';
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        children: Snippet;
+        onclick?: () => void;
+        showHover?: boolean;
+        ondelete?: () => void;
+        disabled?: boolean;
+        deleteLabel?: string;
+        size?: 'sm' | 'md' | 'lg';
+    }
+
+    let {
+        children,
+        ondelete,
+        showHover = true,
+        onclick,
+        disabled = false,
+        deleteLabel = 'Remove item',
+        size = 'md',
+    }: Props = $props();
+
+    function handleDelete() {
+        if (!disabled && ondelete) {
+            ondelete();
+        }
+    }
+
+    function handleClick() {
+        if (!disabled && onclick) {
+            onclick();
+        }
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (!disabled && onclick && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            onclick();
+        }
+    }
+
+    // Shared classes for both interactive and non-interactive states
+    const baseClasses =
+        'inline-flex items-center gap-1 px-3 py-1 rounded-full border border-gray-200 bg-white text-sm font-medium';
+
+    // Dynamic classes that apply to both states
+    const dynamicClasses = $derived(
+        [
+            size === 'sm' ? 'text-xs' : '',
+            size === 'md' ? 'text-sm' : '',
+            size === 'lg' ? 'text-base' : '',
+            disabled ? 'opacity-50 cursor-not-allowed' : '',
+        ]
+            .filter(Boolean)
+            .join(' ')
+    );
+
+    // Interactive-specific classes
+    const interactiveClasses = $derived((onclick || showHover) && !disabled ? 'hover:bg-gray-50 cursor-pointer' : '');
+</script>
+
+{#snippet chipContent()}
+    {@render children()}
+    {#if ondelete}
+        <button
+            type="button"
+            class="ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300"
+            class:hover:bg-gray-100={!disabled}
+            class:cursor-not-allowed={disabled}
+            onclick={handleDelete}
+            {disabled}
+            aria-label={deleteLabel}
+        >
+            <X class="w-3 h-3" />
+        </button>
+    {/if}
+{/snippet}
+
+{#if onclick}
+    <div
+        class="{baseClasses} {dynamicClasses} {interactiveClasses}"
+        onclick={handleClick}
+        onkeydown={handleKeydown}
+        role="button"
+        tabindex={disabled ? -1 : 0}
+    >
+        {@render chipContent()}
+    </div>
+{:else}
+    <div class="{baseClasses} {dynamicClasses} {interactiveClasses}">
+        {@render chipContent()}
+    </div>
+{/if}

package/src/pika/chip/index.ts

@@ -0,0 +1 @@
+export { default as Chip } from './chip.svelte';

package/src/pika/combobox/combobox-types.ts

@@ -0,0 +1,5 @@
+export interface ComboboxMapping<T> {
+    value: (item: T) => string;
+    label: (item: T) => string;
+    secondaryLabel?: (item: T) => string;
+}

package/src/pika/combobox/combobox.svelte

@@ -0,0 +1,221 @@
+<script lang="ts" generics="T">
+    import Check from '$icons/lucide/check';
+    import ChevronsUpDown from '$icons/lucide/chevrons-up-down';
+    import X from '$icons/lucide/x';
+    import { Button } from '../../shadcn/button';
+    import * as Command from '../../shadcn/command';
+    import * as Popover from '../../shadcn/popover';
+    import { cn } from '../../shadcn/utils';
+    import indefinite from 'indefinite';
+    import plur from 'plur';
+    import { tick } from 'svelte';
+    import type { ComboboxMapping } from './combobox-types';
+
+    let {
+        value = $bindable(),
+        mapping,
+        options,
+        optionTypeName = 'option',
+        // We will figure out the plural form of the data type name using the plur library if not provided
+        optionTypeNamePlural,
+        onValueChanged,
+        onSearchValueChanged,
+        debounceSearchMs = 300,
+        popupWidthClasses = '',
+        wrapperClasses = 'w-[200px]',
+        buttonClasses = '',
+        minCharactersForSearch = 3,
+        loading = false,
+        showValueInListEntries = false,
+        disabled = false,
+        allowClear = false,
+        inputPlaceholder
+    }: {
+        value: T | undefined;
+        mapping: ComboboxMapping<T>;
+        options: T[] | undefined;
+        inputPlaceholder?: string;
+        searchPlaceholder?: string;
+        onValueChanged?: (value: T) => void;
+        onSearchValueChanged?: (value: string) => void;
+        debounceSearchMs?: number;
+        popupWidthClasses?: string;
+        wrapperClasses?: string;
+        buttonClasses?: string;
+        // This is the name of the type of data in the combobox that a user will understand
+        optionTypeName?: string;
+        optionTypeNamePlural?: string;
+        minCharactersForSearch?: number;
+        loading?: boolean;
+        showValueInListEntries?: boolean;
+        disabled?: boolean;
+        allowClear?: boolean;
+    } = $props();
+
+    $effect(() => {
+        // Throw an exception if there is an options array and if all values are not unique
+        if (options && options.length > 0 && new Set(options.map((opt) => getValue(opt))).size !== options.length) {
+            throw new Error(`All values in the options (returned from your mappings.getValue fn) array must be unique: ${JSON.stringify(options)}`);
+        }
+    });
+
+    const getValue = (item: T) => mapping.value(item);
+    const getLabel = (item: T) => mapping.label(item);
+    const getSecondaryLabel = (item: T) => mapping.secondaryLabel?.(item);
+
+    const plurarFormOfOptionTypeName = $derived(optionTypeNamePlural ?? plur(optionTypeName));
+    const optionTypeNamePrecededByArticle = $derived(indefinite(optionTypeName));
+    const selectAnOptionText = $derived(inputPlaceholder ?? `Select ${optionTypeNamePrecededByArticle}...`);
+    let open = $state(false);
+    let triggerRef = $state<HTMLButtonElement>(null!);
+    let searchDebounceTimeout = $state<ReturnType<typeof setTimeout> | undefined>();
+    let searchValue = $state('');
+    let labelIsEmpty = $derived(!value);
+    let labelToDisplayInButton = $derived(value ? getLabel(value) : selectAnOptionText);
+
+    // Add the current value to the options if it's not already in the options
+    const normalizedOptions = $derived(options ? [...options] : []);
+
+    // Only show options if we meet the minimum search criteria
+    const visibleOptions = $derived.by(() => {
+        if (loading) {
+            return []; // Don't show any options if we are loading
+        }
+
+        // Only show options if we have enough characters to search
+        if (searchValue.length < minCharactersForSearch) {
+            return [];
+        }
+        return normalizedOptions;
+    });
+
+    // We want to refocus the trigger button when the user selects
+    // an item from the list so users can continue navigating the
+    // rest of the form with the keyboard.
+    function closeAndFocusTrigger() {
+        open = false;
+        tick().then(() => {
+            triggerRef.focus();
+        });
+    }
+</script>
+
+<div class="flex items-center ${wrapperClasses} gap-2">
+    <Popover.Root bind:open>
+        <Popover.Trigger bind:ref={triggerRef} class="flex-1">
+            {#snippet child({ props })}
+                <Button variant="outline" class={`flex items-center justify-between w-full ${buttonClasses}`} {...props} role="combobox" aria-expanded={open} {disabled}>
+                    <span class={cn('flex-1 text-left truncate', labelIsEmpty && 'text-muted-foreground')}>
+                        {labelToDisplayInButton}
+                    </span>
+                    <ChevronsUpDown class="ml-2 shrink-0 opacity-50" />
+                </Button>
+            {/snippet}
+        </Popover.Trigger>
+        <Popover.Content class={`p-0 ${popupWidthClasses}`}>
+            <Command.Root shouldFilter={false}>
+                <Command.Input
+                    bind:value={searchValue}
+                    oninput={(e: Event) => {
+                        if (onSearchValueChanged) {
+                            const val = (e.target as HTMLInputElement).value;
+
+                            // Always clear existing timeout
+                            if (searchDebounceTimeout) {
+                                clearTimeout(searchDebounceTimeout);
+                            }
+
+                            // Only make server call if we meet minimum characters
+                            if (val.length >= minCharactersForSearch) {
+                                // Set new timeout
+                                searchDebounceTimeout = setTimeout(() => {
+                                    onSearchValueChanged((e.target as HTMLInputElement).value);
+                                }, debounceSearchMs);
+                            }
+                        }
+                    }}
+                    placeholder="Search {plurarFormOfOptionTypeName}..."
+                    class="h-9"
+                />
+                <Command.List>
+                    {#if loading}
+                        <Command.Loading>
+                            <div class="flex items-center justify-center py-6 text-sm text-muted-foreground">
+                                <div class="flex items-center gap-2">
+                                    <div class="h-4 w-4 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent"></div>
+                                    Searching {plurarFormOfOptionTypeName}...
+                                </div>
+                            </div>
+                        </Command.Loading>
+                    {:else}
+                        <Command.Empty>
+                            {#if searchValue.length > 0 && searchValue.length < minCharactersForSearch}
+                                Enter at least {minCharactersForSearch} characters to search.
+                            {:else}
+                                No {optionTypeName} found.
+                            {/if}
+                        </Command.Empty>
+                    {/if}
+                    <Command.Group value={plurarFormOfOptionTypeName}>
+                        {#key visibleOptions}
+                            {#each visibleOptions as option (getValue(option))}
+                                <Command.Item
+                                    value={getValue(option)}
+                                    onSelect={() => {
+                                        if (!value || getValue(value) !== getValue(option)) {
+                                            value = option;
+                                            if (onValueChanged) onValueChanged(value);
+                                        }
+                                        closeAndFocusTrigger();
+                                    }}
+                                    class={cn('flex items-start gap-2 px-2 py-2', (getSecondaryLabel(option) || showValueInListEntries) && 'py-2.5 min-h-[3rem]')}
+                                >
+                                    <Check class={cn('mt-1 flex-shrink-0', (!value || getValue(value) !== getValue(option)) && 'text-transparent')} />
+                                    <div class="flex-1 min-w-0">
+                                        <!-- Primary label -->
+                                        <div class="font-medium text-sm leading-tight truncate">
+                                            {getLabel(option)}
+                                        </div>
+
+                                        <!-- Secondary and tertiary info in a row -->
+                                        {#if getSecondaryLabel(option) || showValueInListEntries}
+                                            <div class="flex items-center gap-2 mt-0.5">
+                                                {#if getSecondaryLabel(option)}
+                                                    <span class="text-xs text-muted-foreground truncate flex-shrink-0">
+                                                        {getSecondaryLabel(option)}
+                                                    </span>
+                                                {/if}
+                                                {#if showValueInListEntries}
+                                                    <!-- Separator dot if we have both secondary label and value -->
+                                                    {#if getSecondaryLabel(option)}
+                                                        <span class="text-xs text-muted-foreground/50">•</span>
+                                                    {/if}
+                                                    <span class="text-xs text-muted-foreground/70 font-mono truncate">
+                                                        {getValue(option)}
+                                                    </span>
+                                                {/if}
+                                            </div>
+                                        {/if}
+                                    </div>
+                                </Command.Item>
+                            {/each}
+                        {/key}
+                    </Command.Group>
+                </Command.List>
+            </Command.Root>
+        </Popover.Content>
+    </Popover.Root>
+    {#if allowClear && !disabled}
+        <Button
+            variant="ghost"
+            size="icon"
+            class="h-4 w-4 text-muted-foreground "
+            onclick={() => {
+                value = undefined;
+                if (onValueChanged) onValueChanged(undefined as T);
+            }}
+        >
+            <X />
+        </Button>
+    {/if}
+</div>

package/src/pika/combobox/index.ts

@@ -0,0 +1,2 @@
+export { default as Combobox } from './combobox.svelte';
+export type * from './combobox-types';

package/src/pika/confirm-dialog/confirm-dialog.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { Button } from '../../shadcn/button';
+    import * as Dialog from '../../shadcn/dialog';
+    let {
+        open = $bindable(false),
+        message: confirmQuestion,
+        onyes,
+        title,
+        yesBtnTitle,
+        noBtnTitle,
+        onno,
+        onclose
+    }: {
+        open: boolean;
+        message: string;
+        title?: string;
+        yesBtnTitle?: string;
+        noBtnTitle?: string;
+
+        onyes: () => void;
+        onno?: () => void;
+        onclose?: () => void;
+    } = $props();
+
+    let noCallback =
+        onno ??
+        (() => {
+            open = false;
+        });
+</script>
+
+<Dialog.Root
+    bind:open
+    onOpenChange={() => {
+        if (!open && onclose) {
+            onclose();
+        }
+    }}
+>
+    <Dialog.Content>
+        <Dialog.Title>{title ?? 'Confirm'}</Dialog.Title>
+        {confirmQuestion}
+        <Dialog.Footer>
+            <Button variant="default" onclick={onyes}>{yesBtnTitle ?? 'Confirm'}</Button>
+            <Button variant="outline" onclick={noCallback}>{noBtnTitle ?? 'Cancel'}</Button>
+        </Dialog.Footer>
+    </Dialog.Content>
+</Dialog.Root>