pika-ux 1.0.0-beta.0

package/src/pika/slideout/slideout-rail.svelte.die

@@ -0,0 +1,69 @@
+<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<HTMLButtonElement>, HTMLButtonElement> = $props();
+
+    const slideout = useSlideout();
+
+    // Add resize support alongside toggle
+    let isDragging = $state(false);
+    let startX = $state(0);
+
+    function handleDragStart(e: MouseEvent) {
+        isDragging = true;
+        startX = e.clientX;
+
+        window.addEventListener('mousemove', handleDragMove);
+        window.addEventListener('mouseup', handleDragEnd);
+
+        document.body.style.userSelect = 'none';
+        e.preventDefault();
+    }
+
+    function handleDragMove(e: MouseEvent) {
+        if (!isDragging) return;
+        // Implement drag resize logic here
+        // This should communicate with the panel component
+    }
+
+    function handleDragEnd() {
+        isDragging = false;
+        window.removeEventListener('mousemove', handleDragMove);
+        window.removeEventListener('mouseup', handleDragEnd);
+        document.body.style.userSelect = '';
+    }
+
+    function cleanup() {
+        window.removeEventListener('mousemove', handleDragMove);
+        window.removeEventListener('mouseup', handleDragEnd);
+    }
+</script>
+
+<svelte:window on:beforeunload={cleanup} />
+
+<button
+    bind:this={ref}
+    data-slideout="rail"
+    aria-label="Toggle Slideout"
+    tabIndex={-1}
+    onclick={() => slideout.toggle()}
+    onmousedown={handleDragStart}
+    title="Toggle Slideout"
+    class={cn(
+        'hover:after:bg-gray-300 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',
+        className
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</button>

package/src/pika/slideout/slideout.svelte

@@ -0,0 +1,33 @@
+<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();
+
+    // Use the slideout context
+    const slideout = useSlideout();
+
+    // h-full => h-screen
+</script>
+
+<div
+    bind:this={ref}
+    data-slideout="root"
+    data-side={slideout.side}
+    data-state={slideout.state}
+    class={cn(
+        'flex h-screen w-full relative overflow-hidden',
+        slideout.side === 'right' ? 'flex-row' : 'flex-row-reverse',
+        className
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/src/pika/slideout/slideout.svelte.old

@@ -0,0 +1,113 @@
+<script lang="ts" module>
+    import { tv, type VariantProps } from 'tailwind-variants';
+
+    export const slideoutPanelVariants = tv({
+        base: 'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out z-50 gap-4 transition-all ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 h-full flex flex-col flex-1',
+        variants: {
+            side: {
+                left: 'h-full data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left border-r',
+                right: 'h-full data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right border-l',
+            },
+        },
+        defaultVariants: {
+            side: 'right',
+        },
+    });
+
+    export type Side = VariantProps<typeof slideoutPanelVariants>['side'];
+</script>
+
+<script lang="ts">
+    import { X } from '$icons/lucide';
+    import type { Snippet } from 'svelte';
+    import { cn } from '../../shadcn/utils.js';
+
+    let {
+        open = $bindable(false),
+        class: className,
+        side = 'right',
+        width = '75%',
+        minWidth = '20%',
+        maxWidth = '95%',
+        children,
+        ...restProps
+    }: {
+        open?: boolean;
+        class?: string;
+        side?: Side;
+        width?: string;
+        minWidth?: string;
+        maxWidth?: string;
+        children?: Snippet<[]> | undefined;
+    } = $props();
+
+    let isDragging = false;
+    let startX = 0;
+    let startWidth = 0;
+    let currentWidth = width;
+
+    function handleMouseDown(e: MouseEvent) {
+        isDragging = true;
+        startX = e.clientX;
+        startWidth = parseFloat(currentWidth);
+
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+    }
+
+    function handleMouseMove(e: MouseEvent) {
+        if (!isDragging) return;
+
+        const delta = side === 'right' ? startX - e.clientX : e.clientX - startX;
+
+        const containerWidth = document.body.clientWidth;
+        const newWidthPx = startWidth + delta;
+        const newWidthPercent = (newWidthPx / containerWidth) * 100;
+
+        const minWidthPercent = parseFloat(minWidth);
+        const maxWidthPercent = parseFloat(maxWidth);
+
+        currentWidth = `${Math.min(Math.max(newWidthPercent, minWidthPercent), maxWidthPercent)}%`;
+    }
+
+    function handleMouseUp() {
+        isDragging = false;
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+    }
+
+    const containerClasses = $derived(
+        cn(
+            'relative flex h-full w-full transition-all duration-500 ease-in-out',
+            open ? `w-[${currentWidth}]` : 'w-0 overflow-hidden',
+            isDragging && 'select-none'
+        )
+    );
+
+    const resizeHandleClasses = $derived(
+        cn(
+            'absolute top-0 w-1 h-full cursor-col-resize hover:bg-accent/50 active:bg-accent/75 transition-colors',
+            side === 'right' ? '-left-0.5' : '-right-0.5'
+        )
+    );
+</script>
+
+<!-- <svelte:window onmouseup={handleMouseUp} /> -->
+
+<div class="flex h-full" style="width: {currentWidth}">
+    <div class={containerClasses}>
+        <div class={cn(slideoutPanelVariants({ side }), className)} {...restProps}>
+            <div class={resizeHandleClasses} onmousedown={handleMouseDown} aria-hidden="true"></div>
+            <div class="h-full flex-1">
+                {@render children?.()}
+            </div>
+            <!-- <button
+                class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+                on:click={() => (open = false)}
+            >
+                <X class="size-4" />
+                <span class="sr-only">Close</span>
+            </button> -->
+        </div>
+    </div>
+</div>

package/src/pika/text-wave-shimmer/index.ts

@@ -0,0 +1 @@
+export { default as TextWaveShimmer } from './text-wave-shimmer.svelte';

package/src/pika/text-wave-shimmer/text-wave-shimmer.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { type Snippet } from 'svelte';
+
+    interface Props {
+        children?: Snippet<[]>;
+        disabled?: boolean;
+    }
+
+    const { children, disabled }: Props = $props();
+</script>
+
+{#if children}
+    {#if disabled}
+        {@render children()}
+    {:else}
+        <span class="wave-char">
+            {@render children()}
+        </span>
+    {/if}
+{/if}
+
+<style>
+    :root {
+        --shimmer-duration: 1s;
+    }
+
+    .wave-char {
+        animation: shimmer-wave var(--shimmer-duration) ease-in-out infinite;
+    }
+
+    @keyframes shimmer-wave {
+        0%,
+        100% {
+            opacity: 0.6;
+        }
+        25% {
+            opacity: 0.75;
+        }
+        50% {
+            opacity: 1;
+        }
+    }
+</style>

package/src/pika/tooltip-plus/index.ts

@@ -0,0 +1 @@
+export { default as TooltipPlus } from './tooltip-plus.svelte';

package/src/pika/tooltip-plus/tooltip-plus.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { AppState } from '$client/app/app.state.svelte';
+    import type { HotKey } from '$client/app/types';
+    import { getHotKeyHtmlDisplay } from '$lib/utils';
+    import * as Tooltip from '../../shadcn/tooltip';
+    import { getContext, type Snippet } from 'svelte';
+
+    interface Props {
+        tooltip: undefined | string | Snippet<[]>;
+        hotKey?: HotKey;
+        children?: Snippet<[]>;
+        delayDuration?: number;
+        allowHoverOverTooltip?: boolean;
+    }
+
+    const { tooltip, hotKey, children, delayDuration, allowHoverOverTooltip = false }: Props = $props();
+
+    const appState = getContext<AppState>('appState');
+    let hideTooltip = $derived(appState.settings.data.hideTooltips || !tooltip);
+</script>
+
+{#if !hideTooltip}
+    <Tooltip.Provider disableHoverableContent={!allowHoverOverTooltip}>
+        <Tooltip.Root delayDuration={delayDuration ?? 0}>
+            <Tooltip.Trigger>
+                {@render children?.()}
+            </Tooltip.Trigger>
+            <Tooltip.Content>
+                {#if typeof tooltip === 'string'}
+                    {tooltip}
+                {:else}
+                    {@render tooltip?.()}
+                {/if}
+                {#if hotKey}
+                    {@html getHotKeyHtmlDisplay(hotKey)}
+                {/if}
+            </Tooltip.Content>
+        </Tooltip.Root>
+    </Tooltip.Provider>
+{:else}
+    {@render children?.()}
+{/if}

package/src/shadcn/alert/alert-description.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { WithElementRef } from 'bits-ui';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn('text-sm [&_p]:leading-relaxed', className)} {...restProps}>
+    {@render children?.()}
+</div>

package/src/shadcn/alert/alert-title.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 5,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	aria-level={level}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/alert/alert.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "[&>svg]:text-foreground relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive:
+					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div bind:this={ref} class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
+	{@render children?.()}
+</div>

package/src/shadcn/alert/index.ts

@@ -0,0 +1,14 @@
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+};

package/src/shadcn/avatar/avatar-fallback.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { Avatar as AvatarPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+    bind:ref
+    data-slot="avatar-fallback"
+    class={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
+    {...restProps}
+/>

package/src/shadcn/avatar/avatar-image.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { Avatar as AvatarPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+    bind:ref
+    data-slot="avatar-image"
+    class={cn('aspect-square size-full', className)}
+    {...restProps}
+/>

package/src/shadcn/avatar/avatar.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { Avatar as AvatarPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        loadingStatus = $bindable('loading'),
+        class: className,
+        ...restProps
+    }: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+    bind:ref
+    bind:loadingStatus
+    data-slot="avatar"
+    class={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
+    {...restProps}
+/>

package/src/shadcn/avatar/index.ts

@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback,
+};

package/src/shadcn/badge/badge.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" module>
+    import { type VariantProps, tv } from 'tailwind-variants';
+
+    export const badgeVariants = tv({
+        base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
+        variants: {
+            variant: {
+                default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
+                secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
+                destructive:
+                    'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white',
+                outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    });
+
+    export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+    import type { HTMLAnchorAttributes } from 'svelte/elements';
+    import { cn, type WithElementRef } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        href,
+        class: className,
+        variant = 'default',
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAnchorAttributes> & {
+        variant?: BadgeVariant;
+    } = $props();
+</script>
+
+<svelte:element
+    this={href ? 'a' : 'span'}
+    bind:this={ref}
+    data-slot="badge"
+    {href}
+    class={cn(badgeVariants({ variant }), className)}
+    {...restProps}
+>
+    {@render children?.()}
+</svelte:element>

package/src/shadcn/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";

package/src/shadcn/breadcrumb/breadcrumb-ellipsis.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import EllipsisIcon from '$icons/lucide/ellipsis';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { cn, type WithElementRef, type WithoutChildren } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span bind:this={ref} data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" class={cn('flex size-9 items-center justify-center', className)} {...restProps}>
+    <EllipsisIcon class="size-4" />
+    <span class="sr-only">More</span>
+</span>

package/src/shadcn/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { HTMLLiAttributes } from 'svelte/elements';
+    import { cn, type WithElementRef } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+    bind:this={ref}
+    data-slot="breadcrumb-item"
+    class={cn('inline-flex items-center gap-1.5', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</li>

package/src/shadcn/breadcrumb/breadcrumb-link.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { HTMLAnchorAttributes } from 'svelte/elements';
+    import type { Snippet } from 'svelte';
+    import { cn, type WithElementRef } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        href = undefined,
+        child,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAnchorAttributes> & {
+        child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
+    } = $props();
+
+    const attrs = $derived({
+        'data-slot': 'breadcrumb-link',
+        class: cn('hover:text-foreground transition-colors', className),
+        href,
+        ...restProps,
+    });
+</script>
+
+{#if child}
+    {@render child({ props: attrs })}
+{:else}
+    <a bind:this={ref} {...attrs}>
+        {@render children?.()}
+    </a>
+{/if}

package/src/shadcn/breadcrumb/breadcrumb-list.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { HTMLOlAttributes } from 'svelte/elements';
+    import { cn, type WithElementRef } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLOlAttributes> = $props();
+</script>
+
+<ol
+    bind:this={ref}
+    data-slot="breadcrumb-list"
+    class={cn('text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</ol>

package/src/shadcn/breadcrumb/breadcrumb-page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { cn, type WithElementRef } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+    bind:this={ref}
+    data-slot="breadcrumb-page"
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    class={cn('text-foreground font-normal', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</span>

package/src/shadcn/breadcrumb/breadcrumb-separator.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import ChevronRightIcon from '$icons/lucide/chevron-right';
+    import { cn, type WithElementRef } from '../utils.js';
+    import type { HTMLLiAttributes } from 'svelte/elements';
+
+    let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li bind:this={ref} data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class={cn('[&>svg]:size-3.5', className)} {...restProps}>
+    {#if children}
+        {@render children?.()}
+    {:else}
+        <ChevronRightIcon />
+    {/if}
+</li>

package/src/shadcn/breadcrumb/breadcrumb.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import type { WithElementRef } from '../utils.js';
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav bind:this={ref} data-slot="breadcrumb" class={className} aria-label="breadcrumb" {...restProps}>
+    {@render children?.()}
+</nav>