pika-ux 1.0.0-beta.0

package/src/pika/simple-dropdown/simple-dropdown.svelte

@@ -0,0 +1,288 @@
+<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 { SimpleDropdownMapping } from './simple-dropdown-types';
+
+    let {
+        value = $bindable(),
+        mapping,
+        options,
+        inputPlaceholder,
+        searchPlaceholder,
+        optionTypeName = 'option',
+        // We will figure out the plural form of the data type name using the plur library if not provided
+        optionTypeNamePlural,
+        onValueChanged,
+        wrapperClasses = '',
+        buttonClasses = '',
+        popupWidthClasses = '',
+        loading = false,
+        showValueInListEntries = false,
+        disabled = false,
+        allowArbitraryValues,
+        dontShowSearchInput = false,
+        allowClear = false,
+        multiSelect = false
+    }: {
+        value: T | undefined | T[];
+        mapping: SimpleDropdownMapping<T>;
+        options: T[] | undefined;
+        inputPlaceholder?: string;
+        searchPlaceholder?: string;
+        onValueChanged?: (value: T | undefined | T[]) => void;
+        wrapperClasses?: string;
+        buttonClasses?: string;
+        // This is the name of the type of data in the dropdown that a user will understand
+        optionTypeName?: string;
+        optionTypeNamePlural?: string;
+        loading?: boolean;
+        showValueInListEntries?: boolean;
+        disabled?: boolean;
+        dontShowSearchInput?: boolean;
+        popupWidthClasses?: string;
+        allowClear?: boolean;
+        multiSelect?: boolean;
+        allowArbitraryValues?: {
+            convertValueToType: (arbitraryValue: string) => T;
+        };
+    } = $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)}`);
+        }
+
+        // Validate that value is compatible with multiSelect mode
+        if (multiSelect && value !== undefined && !Array.isArray(value)) {
+            throw new Error(`When multiSelect is true, value must be undefined or an array. Received: ${typeof value}`);
+        }
+    });
+
+    const getValue = (item: T) => mapping.value(item);
+    const getLabel = (item: T) => mapping.label(item);
+    const getSecondaryLabel = (item: T) => mapping.secondaryLabel?.(item);
+
+    // Helper functions for multi-select
+    const selectedValues = $derived(multiSelect ? (value as T[]) || [] : value ? [value as T] : []);
+
+    const isSelected = (option: T) => {
+        return selectedValues.some((selected) => getValue(selected) === getValue(option));
+    };
+
+    const toggleSelection = (option: T) => {
+        if (!multiSelect) {
+            // Single select mode
+            const optionValue = getValue(option);
+            if (!value || getValue(value as T) !== optionValue) {
+                value = option;
+                if (onValueChanged) onValueChanged(value);
+            }
+            closeAndFocusTrigger();
+        } else {
+            // Multi-select mode
+            const currentSelected = (value as T[]) || [];
+            const optionValue = getValue(option);
+            const isCurrentlySelected = currentSelected.some((selected) => getValue(selected) === optionValue);
+
+            if (isCurrentlySelected) {
+                // Remove from selection
+                const newSelection = currentSelected.filter((selected) => getValue(selected) !== optionValue);
+                value = newSelection;
+            } else {
+                // Add to selection
+                const newSelection = [...currentSelected, option];
+                value = newSelection;
+            }
+
+            if (onValueChanged) onValueChanged(value);
+            // Don't close popup in multi-select mode
+        }
+    };
+
+    const plurarFormOfOptionTypeName = $derived(optionTypeNamePlural ?? plur(optionTypeName));
+    const optionTypeNamePrecededByArticle = $derived(indefinite(optionTypeName));
+    const selectAnOptionText = $derived(`Select ${optionTypeNamePrecededByArticle}...`);
+    let open = $state(false);
+    let triggerRef = $state<HTMLButtonElement>(null!);
+    let searchValue = $state('');
+
+    const labelToDisplayInButton = $derived.by(() => {
+        if (multiSelect) {
+            const selected = (value as T[]) || [];
+            if (selected.length === 0) {
+                return inputPlaceholder ?? `Select ${plurarFormOfOptionTypeName}...`;
+            } else {
+                return selected.map((item) => getLabel(item)).join(', ');
+            }
+        } else {
+            if (!value) return inputPlaceholder ?? selectAnOptionText;
+            return getLabel(value as T);
+        }
+    });
+
+    // Add the current value to the options if it's not already in the options
+    const normalizedOptions = $derived(options ? [...options] : []);
+
+    // Show all options when dropdown opens, optionally filter by search text
+    const visibleOptions = $derived.by(() => {
+        if (loading) {
+            return []; // Don't show any options if we are loading
+        }
+
+        if (!searchValue.trim()) {
+            return normalizedOptions; // Show all when no search text
+        }
+
+        // Filter options by search text for better UX
+        return normalizedOptions.filter((option) => getLabel(option).toLowerCase().includes(searchValue.toLowerCase()));
+    });
+
+    // 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();
+        });
+    }
+
+    // Handle input changes for arbitrary values
+    function handleInputChange(e: Event) {
+        const inputValue = (e.target as HTMLInputElement).value;
+
+        if (allowArbitraryValues && !multiSelect) {
+            // Convert the string to type T using the user's conversion function
+            const convertedValue = allowArbitraryValues.convertValueToType(inputValue);
+            value = convertedValue;
+            if (onValueChanged) onValueChanged(value);
+        }
+        // If arbitrary values not allowed, searchValue is just for filtering
+        // Note: Arbitrary values with multi-select mode not supported yet
+    }
+
+    // Handle Enter key for arbitrary values
+    function handleKeyDown(e: KeyboardEvent) {
+        if (e.key === 'Enter' && allowArbitraryValues && searchValue.trim() && !multiSelect) {
+            e.preventDefault();
+            // Convert the arbitrary value and set it
+            const convertedValue = allowArbitraryValues.convertValueToType(searchValue.trim());
+            value = convertedValue;
+            if (onValueChanged) onValueChanged(value);
+            searchValue = ''; // Clear the search input
+            closeAndFocusTrigger();
+        }
+    }
+
+    // Handle clear button click
+    function handleClear(e: Event) {
+        e.stopPropagation();
+        value = undefined;
+        if (onValueChanged) onValueChanged(value);
+    }
+</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" {...props} class={`flex items-center justify-between w-full ${buttonClasses}`} role="combobox" aria-expanded={open} {disabled}>
+                    <span class="flex-1 flex items-center min-w-0">
+                        <span class={cn('text-left truncate min-w-0 flex-1 w-0', !value && 'text-muted-foreground')}>{labelToDisplayInButton}</span>
+                        {#if showValueInListEntries && value && !multiSelect}
+                            <span class="text-xs flex min-w-0 text-muted-foreground/70 font-mono truncate ml-1">
+                                ({getValue(value as T)})
+                            </span>
+                        {/if}
+                    </span>
+
+                    <ChevronsUpDown class="ml-2 shrink-0 opacity-50" />
+                </Button>
+            {/snippet}
+        </Popover.Trigger>
+        <Popover.Content class={cn('p-0', popupWidthClasses)}>
+            <Command.Root shouldFilter={false} class="">
+                {#if !dontShowSearchInput}
+                    <Command.Input
+                        bind:value={searchValue}
+                        oninput={handleInputChange}
+                        onkeydown={handleKeyDown}
+                        placeholder={searchPlaceholder ?? `Search ${plurarFormOfOptionTypeName}...`}
+                        class="h-9"
+                    />
+                {/if}
+                <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>
+                                    Loading {plurarFormOfOptionTypeName}...
+                                </div>
+                            </div>
+                        </Command.Loading>
+                    {:else}
+                        <Command.Empty>
+                            {#if allowArbitraryValues && searchValue.trim()}
+                                Press Enter to use "{searchValue}"
+                            {: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={() => {
+                                        toggleSelection(option);
+                                    }}
+                                    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', !isSelected(option) && 'text-transparent')} />
+                                    <div class="flex-1 min-w-0">
+                                        <!-- Primary label -->
+                                        <div class="font-medium text-sm leading-tight truncate">
+                                            {getLabel(option)}
+                                            {#if showValueInListEntries}
+                                                <span class="text-xs text-muted-foreground/70 font-mono truncate ml-1">
+                                                    ({getValue(option)})
+                                                </span>
+                                            {/if}
+                                        </div>
+
+                                        <!-- Secondary and tertiary info in a row -->
+                                        {#if getSecondaryLabel(option)}
+                                            <div class="flex items-center gap-2 mt-0.5">
+                                                {#if getSecondaryLabel(option)}
+                                                    <span class="text-xs text-muted-foreground">
+                                                        {getSecondaryLabel(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={handleClear}>
+            <X />
+        </Button>
+    {/if}
+</div>

package/src/pika/slideout/constants.ts

@@ -0,0 +1,5 @@
+export const SLIDEOUT_WIDTH = '16rem';
+export const SLIDEOUT_WIDTH_MOBILE = '18rem';
+export const SLIDEOUT_WIDTH_ICON = '3rem';
+export const SLIDEOUT_KEYBOARD_SHORTCUT = ''; // No keyboard shortcut by default
+export const SLIDEOUT_DEFAULT_WIDTH = 320;

package/src/pika/slideout/context.svelte.ts

@@ -0,0 +1,110 @@
+import { IsMobile } from '../../shadcn/is-mobile.svelte.js';
+import { getContext, setContext } from 'svelte';
+
+type Getter<T> = () => T;
+
+export type SlideoutStateProps = {
+    /**
+     * A getter function that returns the current open state of the slideout.
+     * We use a getter function here to support `bind:open` on the provider component.
+     */
+    open: Getter<boolean>;
+
+    /**
+     * A function that sets the open state of the slideout.
+     */
+    setOpen: (open: boolean) => void;
+
+    /**
+     * The side that the slideout appears on
+     */
+    side?: 'left' | 'right';
+
+    initialWidth?: number; // Allow setting initial width
+};
+
+export class SlideoutState {
+    readonly props: SlideoutStateProps;
+    open = $derived.by(() => this.props.open());
+    openMobile = $state(false);
+    setOpen: SlideoutStateProps['setOpen'];
+    side = $state<'left' | 'right'>('right');
+    panelWidth = $state(320);
+    isDragging = $state(false);
+    #isMobile: IsMobile;
+    state = $derived.by(() => (this.open ? 'expanded' : 'collapsed'));
+    widthBeforeMaximized: number | undefined = $state(undefined);
+    isMaximized = $state(false);
+    isAnimating = $state(false);
+
+    constructor(props: SlideoutStateProps) {
+        this.setOpen = props.setOpen;
+        this.#isMobile = new IsMobile();
+        this.props = props;
+        this.side = props.side || 'right';
+        this.panelWidth = props.initialWidth || 320;
+
+        $effect(() => {
+            this.openMobile = this.open;
+        });
+    }
+
+    // Convenience getter for checking if mobile
+    get isMobile() {
+        return this.#isMobile.current;
+    }
+
+    toggleMaximize = () => {
+        if (this.isMobile) return;
+
+        this.isMaximized = !this.isMaximized;
+        if (this.isMaximized) {
+            this.widthBeforeMaximized = this.panelWidth;
+        } else {
+            this.panelWidth = this.widthBeforeMaximized || 320;
+        }
+    };
+
+    setPanelWidth = (width: number) => {
+        // Apply constraints
+        this.panelWidth = Math.max(200, Math.min(window.innerWidth * 0.8, width)); // Example: max 80% viewport
+    };
+
+    setIsDragging = (dragging: boolean) => {
+        this.isDragging = dragging;
+    };
+
+    // Event handler for keyboard shortcuts
+    handleShortcutKeydown = (e: KeyboardEvent) => {
+        // Add keyboard shortcut handling here if needed
+    };
+
+    setOpenMobile = (value: boolean) => {
+        this.openMobile = value;
+        this.setOpen(value);
+    };
+
+    toggle = () => {
+        return this.#isMobile.current ? (this.openMobile = !this.openMobile) : this.setOpen(!this.open);
+    };
+}
+
+const SYMBOL_KEY = 'scn-slideout';
+
+/**
+ * Instantiates a new `SlideoutState` instance and sets it in the context.
+ *
+ * @param props The constructor props for the `SlideoutState` class.
+ * @returns The `SlideoutState` instance.
+ */
+export function setSlideout(props: SlideoutStateProps): SlideoutState {
+    return setContext(Symbol.for(SYMBOL_KEY), new SlideoutState(props));
+}
+
+/**
+ * Retrieves the `SlideoutState` instance from the context.
+ * @returns The `SlideoutState` instance.
+ */
+export function useSlideout(): SlideoutState {
+    return getContext(Symbol.for(SYMBOL_KEY));
+}

package/src/pika/slideout/index.ts

@@ -0,0 +1,19 @@
+import { useSlideout } from './context.svelte.js';
+import Content from './slideout-content.svelte';
+import Panel from './slideout-panel.svelte';
+import Provider from './slideout-provider.svelte';
+import Root from './slideout.svelte';
+
+export {
+    Content,
+    Panel,
+    Provider,
+    Root,
+    // Aliased exports
+    Root as Slideout,
+    Content as SlideoutContent,
+    Panel as SlideoutPanel,
+    Provider as SlideoutProvider,
+    // Hooks
+    useSlideout
+};

package/src/pika/slideout/slideout-content.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { cn } from '../../shadcn/utils.js';
+    import type { WithElementRef } from 'bits-ui';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { useSlideout } from './context.svelte.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+    const slideout = useSlideout();
+    const isPanelOpen = $derived(slideout.open || (slideout.isMobile && slideout.openMobile));
+
+    // add max-hieght: 100vh (max-h-screen)
+</script>
+
+<div
+    bind:this={ref}
+    data-slideout="content"
+    class={cn(
+        // 'flex flex-col h-full flex-1 overflow-auto transition-all duration-300 ease-in-out',
+        'max-h-screen flex flex-col h-full flex-1 overflow-auto transition-all duration-300 ease-in-out min-w-0', // Added min-w-0
+        // slideout.isMobile && 'data-[panel-open=true]:hidden',
+        // You might hide it explicitly on mobile, or let flexbox handle it (panel width 100%)
+        slideout.isMobile && isPanelOpen && 'hidden', // Keep explicit hide for mobile clarity
+        className
+    )}
+    data-panel-open={isPanelOpen}
+    {...restProps}
+>
+    {@render children?.()}
+</div>
+<!-- data-panel-open={slideout.open || (slideout.isMobile && slideout.openMobile)} -->

package/src/pika/slideout/slideout-panel.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+    import { cn } from '../../shadcn/utils.js';
+    import type { WithElementRef } from 'bits-ui';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { useSlideout } from './context.svelte.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+    // Get the slideout context
+    const slideout = useSlideout();
+
+    // State for drag operations
+    let startX = $state(0);
+    let startWidth = $state(slideout.panelWidth);
+
+    // Reference to the rail element
+    let railRef = $state<HTMLButtonElement | null>(null);
+
+    // Handle drag start
+    function handleDragStart(e: MouseEvent) {
+        slideout.setIsDragging(true);
+        startX = e.clientX;
+        startWidth = slideout.panelWidth;
+
+        // Add event listeners for dragging
+        window.addEventListener('mousemove', handleDragMove);
+        window.addEventListener('mouseup', handleDragEnd);
+
+        // Prevent text selection while dragging
+        document.body.style.userSelect = 'none';
+    }
+
+    // Handle drag move
+    function handleDragMove(e: MouseEvent) {
+        if (!slideout.isDragging) return;
+
+        const dx = e.clientX - startX;
+        const newWidth = slideout.side === 'right' ? startWidth - dx : startWidth + dx;
+
+        // Limit width between reasonable values
+        // currentWidth = Math.max(200, Math.min(600, newWidth));
+        slideout.setPanelWidth(newWidth);
+    }
+
+    // Handle drag end
+    function handleDragEnd() {
+        slideout.setIsDragging(false);
+
+        // Remove event listeners
+        window.removeEventListener('mousemove', handleDragMove);
+        window.removeEventListener('mouseup', handleDragEnd);
+
+        // Restore text selection
+        document.body.style.userSelect = '';
+    }
+
+    // Cleanup on component destruction
+    function cleanup() {
+        window.removeEventListener('mousemove', handleDragMove);
+        window.removeEventListener('mouseup', handleDragEnd);
+    }
+
+    const effectiveWidth = $derived.by(() => {
+        const isOpen = slideout.open || (slideout.isMobile && slideout.openMobile);
+        if (!isOpen) {
+            return '0px'; // Use 0 width when closed
+        }
+        if (slideout.isMobile || slideout.isMaximized) {
+            return '100%'; // Full width on mobile when open or when maximized
+        }
+
+        return `${slideout.panelWidth}px`; // Use context width on desktop when open
+    });
+
+    // add h-screen
+</script>
+
+<svelte:window on:beforeunload={cleanup} />
+<div
+    bind:this={ref}
+    data-slideout="panel"
+    data-side={slideout.side}
+    data-state={slideout.state}
+    style="width: {effectiveWidth}"
+    ontransitionstart={() => (slideout.isAnimating = true)}
+    ontransitionend={() => (slideout.isAnimating = false)}
+    ontransitioncancel={() => (slideout.isAnimating = false)}
+    class={cn(
+        'h-screen flex-shrink-0 overflow-auto relative flex flex-col',
+        'transition-all duration-300 ease-in-out',
+        // Hide rail when collapsed or on mobile or when maximied unless specified otherwise
+        (slideout.state === 'collapsed' || slideout.isMobile || slideout.isMaximized) &&
+            '[&>[data-slideout=rail]]:hidden',
+        className
+    )}
+    {...restProps}
+>
+    <!-- Panel content -->
+    <div class="flex-1 overflow-auto min-w-0 h-full">
+        {@render children?.()}
+    </div>
+
+    <!-- Rail/handle for resizing - integrated directly into panel -->
+    <button
+        bind:this={railRef}
+        data-slideout="rail"
+        aria-label="Resize Slideout"
+        tabIndex={-1}
+        onmousedown={handleDragStart}
+        title="Resize Slideout"
+        class={cn(
+            'after:bg-sidebar-accent hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+            '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+            '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+            'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+            '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=right][data-collapsible=offcanvas]_&]:-left-2'
+        )}
+    >
+        <!-- Optional: Add visual indicator for the rail for drag drop resize -->
+    </button>
+</div>

package/src/pika/slideout/slideout-provider.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { cn } from '../../shadcn/utils.js';
+    import type { WithElementRef } from 'bits-ui';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { SLIDEOUT_DEFAULT_WIDTH, SLIDEOUT_WIDTH, SLIDEOUT_WIDTH_ICON } from './constants.js';
+    import { setSlideout } from './context.svelte.js';
+
+    interface Props extends WithElementRef<HTMLAttributes<HTMLDivElement>> {
+        open?: boolean;
+        onOpenChange?: (open: boolean) => void;
+        side?: 'left' | 'right';
+        initialWidth?: number;
+    }
+
+    let {
+        ref = $bindable(null),
+        open = $bindable(false),
+        onOpenChange = () => {},
+        side = 'right',
+        initialWidth = SLIDEOUT_DEFAULT_WIDTH,
+        class: className,
+        style,
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const slideout = setSlideout({
+        open: () => open,
+        setOpen: (value: boolean) => {
+            open = value;
+            onOpenChange(value);
+        },
+        side,
+        initialWidth,
+    });
+</script>
+
+<svelte:window onkeydown={slideout.handleShortcutKeydown} />
+
+<div
+    style="--slideout-width: {SLIDEOUT_WIDTH}; --slideout-width-icon: {SLIDEOUT_WIDTH_ICON}; {style}"
+    class={cn('group/slideout-wrapper flex h-full w-full overflow-hidden', className)}
+    data-side={side}
+    data-state={slideout.state}
+    bind:this={ref}
+    {...restProps}
+>
+    {@render children?.()}
+</div>