pika-ux 1.0.0-beta.0 → 1.0.0-beta.10

package/src/pika/scrollable-tabs/pinned-trigger.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { getScrollableTabsContext } from './context.svelte.js';
+    import { cn } from '../../shadcn/utils.js';
+    import X from '$icons/lucide/x';
+    import PinOff from '$icons/lucide/pin-off';
+    import { Button } from '../../shadcn/button/index.js';
+
+    interface Props {
+        value: string;
+        class?: string;
+        disabled?: boolean;
+        children: Snippet;
+    }
+
+    let { value, class: className, disabled = false, children }: Props = $props();
+
+    const context = getScrollableTabsContext();
+
+    const isActive = $derived(context.getValue() === value);
+    let isHovered = $state(false);
+
+    function handleClick() {
+        if (!disabled) {
+            context.onValueChange(value);
+        }
+    }
+
+    function handleClose(e: MouseEvent) {
+        e.stopPropagation();
+        context.onClose?.(value);
+    }
+
+    function handleUnpin(e: MouseEvent) {
+        e.stopPropagation();
+        context.onUnpin?.(value);
+    }
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleClick();
+        }
+    }
+</script>
+
+<div
+    role="tab"
+    tabindex={disabled ? -1 : 0}
+    aria-selected={isActive}
+    onclick={handleClick}
+    onkeydown={handleKeydown}
+    onmouseenter={() => (isHovered = true)}
+    onmouseleave={() => (isHovered = false)}
+    class={cn(
+        'group relative px-2 py-1 rounded-md text-xs font-medium rounded-t-md whitespace-nowrap transition-all cursor-pointer',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'flex items-center gap-2',
+        isActive ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground hover:bg-muted',
+        disabled && 'opacity-50 pointer-events-none',
+        className
+    )}
+>
+    <span class="flex-1">{@render children()}</span>
+    <span class="flex items-center">
+        {#if context.onUnpin}
+            {#if isHovered && !disabled}
+                <Button {disabled} variant="ghost" size="icon" onclick={handleUnpin} class="h-4 w-4 p-0">
+                    <PinOff style="width: 0.75rem; height: 0.75rem;" />
+                </Button>
+            {:else}
+                <div class="h-4 w-4"></div>
+            {/if}
+        {/if}
+        {#if context.onClose}
+            <Button {disabled} variant="ghost" size="icon" onclick={handleClose} class="h-4 w-4 p-0">
+                <X style="width: 0.75rem; height: 0.75rem;" />
+            </Button>
+        {/if}
+    </span>
+</div>

package/src/pika/scrollable-tabs/root.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { setScrollableTabsContext } from './context.svelte.js';
+    import type { Snippet } from 'svelte';
+    import { cn } from '../../shadcn/utils.js';
+
+    interface Props {
+        value: string;
+        onValueChange?: (value: string) => void;
+        onClose?: (value: string) => void;
+        onPin?: (value: string) => void;
+        onUnpin?: (value: string) => void;
+        class?: string;
+        children: Snippet;
+    }
+
+    let { value = $bindable(), onValueChange, onClose, onPin, onUnpin, class: className, children }: Props = $props();
+
+    function handleValueChange(newValue: string) {
+        value = newValue;
+        onValueChange?.(newValue);
+    }
+
+    setScrollableTabsContext({
+        getValue: () => value,
+        onValueChange: handleValueChange,
+        onClose,
+        onPin,
+        onUnpin
+    });
+</script>
+
+<div class={cn('w-full', className)}>
+    {@render children()}
+</div>

package/src/pika/scrollable-tabs/scrollable-section.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { cn } from '../../shadcn/utils.js';
+    import ChevronLeft from '$icons/lucide/chevron-left';
+    import ChevronRight from '$icons/lucide/chevron-right';
+    import { Button } from '../../shadcn/button/index.js';
+
+    interface Props {
+        class?: string;
+        children: Snippet;
+        onInsufficientSpace?: (insufficient: boolean) => void;
+        minUsefulWidth?: number;
+    }
+
+    let { class: className, children, onInsufficientSpace, minUsefulWidth = 150 }: Props = $props();
+
+    let containerWrapper: HTMLDivElement;
+    let scrollContainer: HTMLDivElement;
+    let hasOverflow = $state(false);
+    let canScrollLeft = $state(false);
+    let canScrollRight = $state(false);
+    let hasInsufficientSpace = $state(false);
+    let isUpdating = false;
+
+    function updateScrollButtons() {
+        if (!scrollContainer || !containerWrapper || isUpdating) return;
+
+        isUpdating = true;
+
+        try {
+            const isOverflowing = scrollContainer.scrollWidth > scrollContainer.clientWidth;
+            hasOverflow = isOverflowing;
+            canScrollLeft = scrollContainer.scrollLeft > 0;
+            canScrollRight = scrollContainer.scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth - 1;
+
+            // Check if we have enough space to be useful
+            const currentWidth = containerWrapper.clientWidth;
+            const insufficient = currentWidth < minUsefulWidth;
+            if (hasInsufficientSpace !== insufficient) {
+                hasInsufficientSpace = insufficient;
+                onInsufficientSpace?.(insufficient);
+            }
+        } finally {
+            isUpdating = false;
+        }
+    }
+
+    function scrollLeft() {
+        if (scrollContainer) {
+            scrollContainer.scrollBy({ left: -200, behavior: 'smooth' });
+        }
+    }
+
+    function scrollRight() {
+        if (scrollContainer) {
+            scrollContainer.scrollBy({ left: 200, behavior: 'smooth' });
+        }
+    }
+
+    $effect(() => {
+        if (scrollContainer && containerWrapper) {
+            let timeoutId: ReturnType<typeof setTimeout>;
+
+            // Initial check with slight delay to ensure content is rendered
+            timeoutId = setTimeout(() => updateScrollButtons(), 10);
+
+            // Watch for resize with debouncing
+            const resizeObserver = new ResizeObserver(() => {
+                clearTimeout(timeoutId);
+                timeoutId = setTimeout(() => updateScrollButtons(), 50);
+            });
+            resizeObserver.observe(containerWrapper);
+            resizeObserver.observe(scrollContainer);
+
+            // Also observe the inner content
+            const innerContent = scrollContainer.querySelector('div');
+            if (innerContent) {
+                resizeObserver.observe(innerContent);
+            }
+
+            return () => {
+                clearTimeout(timeoutId);
+                resizeObserver.disconnect();
+            };
+        }
+    });
+</script>
+
+<div bind:this={containerWrapper} class={cn('flex-1 flex items-center gap-0 min-w-0 bg-white', className)}>
+    <!-- Left scroll button -->
+    {#if hasOverflow}
+        <div class="flex-shrink-0">
+            <Button variant="ghost" size="icon" onclick={scrollLeft} disabled={!canScrollLeft} class="w-7">
+                <ChevronLeft style="width: 1rem; height: 1rem;" />
+            </Button>
+        </div>
+    {/if}
+
+    <!-- Scrollable tabs area -->
+    <div bind:this={scrollContainer} onscroll={updateScrollButtons} class="flex-1 min-w-0 overflow-x-auto scroll-smooth" style="scrollbar-width: none; -ms-overflow-style: none;">
+        <div class="flex items-center gap-1 px-2">
+            {@render children()}
+        </div>
+    </div>
+
+    <!-- Right scroll button -->
+    {#if hasOverflow}
+        <div class="flex-shrink-0">
+            <Button variant="ghost" size="icon" onclick={scrollRight} disabled={!canScrollRight} class="w-7">
+                <ChevronRight style="width: 1rem; height: 1rem;" />
+            </Button>
+        </div>
+    {/if}
+</div>
+
+<style>
+    div::-webkit-scrollbar {
+        display: none;
+    }
+</style>

package/src/pika/scrollable-tabs/trigger.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { getScrollableTabsContext } from './context.svelte.js';
+    import { cn } from '../../shadcn/utils.js';
+    import X from '$icons/lucide/x';
+    import Pin from '$icons/lucide/pin';
+    import { Button } from '../../shadcn/button/index.js';
+
+    interface Props {
+        value: string;
+        class?: string;
+        disabled?: boolean;
+        children: Snippet;
+    }
+
+    let { value, class: className, disabled = false, children }: Props = $props();
+
+    const context = getScrollableTabsContext();
+
+    const isActive = $derived(context.getValue() === value);
+    let isHovered = $state(false);
+
+    function handleClick() {
+        if (!disabled) {
+            context.onValueChange(value);
+        }
+    }
+
+    function handleClose(e: MouseEvent) {
+        e.stopPropagation();
+        context.onClose?.(value);
+    }
+
+    function handlePin(e: MouseEvent) {
+        e.stopPropagation();
+        context.onPin?.(value);
+    }
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleClick();
+        }
+    }
+</script>
+
+<div
+    role="tab"
+    tabindex={disabled ? -1 : 0}
+    aria-selected={isActive}
+    onclick={handleClick}
+    onkeydown={handleKeydown}
+    onmouseenter={() => (isHovered = true)}
+    onmouseleave={() => (isHovered = false)}
+    class={cn(
+        'group relative px-2 py-1 rounded-md text-xs font-medium rounded-t-md whitespace-nowrap transition-all cursor-pointer',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'flex items-center gap-2',
+        isActive ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground hover:bg-muted',
+        disabled && 'opacity-50 pointer-events-none',
+        className
+    )}
+>
+    <span class="flex-1">{@render children()}</span>
+    <span class="flex items-center">
+        {#if context.onPin}
+            {#if isHovered && !disabled}
+                <Button {disabled} variant="ghost" size="icon" onclick={handlePin} class="h-4 w-4 p-0">
+                    <Pin style="width: 0.75rem; height: 0.75rem;" />
+                </Button>
+            {:else}
+                <div class="h-4 w-4"></div>
+            {/if}
+        {/if}
+
+        {#if context.onClose}
+            <Button {disabled} variant="ghost" size="icon" onclick={handleClose} class="h-4 w-4 p-0">
+                <X style="width: 0.75rem; height: 0.75rem;" />
+            </Button>
+        {/if}
+    </span>
+</div>

package/src/shadcn/carousel/carousel-content.svelte

@@ -1,39 +1,44 @@
 <script lang="ts">
-    import emblaCarouselSvelte from 'embla-carousel-svelte';
-    import type { HTMLAttributes } from 'svelte/elements';
-    import { getEmblaContext } from './context.js';
-    import { cn, type WithElementRef } from '../utils.js';
+	import emblaCarouselSvelte from "embla-carousel-svelte";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "../utils.js";
 
-    let {
-        ref = $bindable(null),
-        class: className,
-        children,
-        ...restProps
-    }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 
-    const emblaCtx = getEmblaContext('<Carousel.Content/>');
+	const emblaCtx = getEmblaContext("<Carousel.Content/>");
 </script>
 
+<!-- svelte-ignore event_directive_deprecated -->
 <div
-    data-slot="carousel-content"
-    class="overflow-hidden"
-    use:emblaCarouselSvelte={{
-        options: {
-            container: '[data-embla-container]',
-            slides: '[data-embla-slide]',
-            ...emblaCtx.options,
-            axis: emblaCtx.orientation === 'horizontal' ? 'x' : 'y',
-        },
-        plugins: emblaCtx.plugins,
-    }}
-    onemblaInit={emblaCtx.onInit}
+	class="overflow-hidden"
+	use:emblaCarouselSvelte={{
+		options: {
+			container: "[data-embla-container]",
+			slides: "[data-embla-slide]",
+			...emblaCtx.options,
+			axis: emblaCtx.orientation === "horizontal" ? "x" : "y",
+		},
+		plugins: emblaCtx.plugins,
+	}}
+	on:emblaInit={emblaCtx.onInit}
 >
-    <div
-        bind:this={ref}
-        class={cn('flex', emblaCtx.orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
-        data-embla-container=""
-        {...restProps}
-    >
-        {@render children?.()}
-    </div>
+	<div
+		bind:this={ref}
+		class={cn(
+			"flex",
+			emblaCtx.orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+			className
+		)}
+		data-embla-container=""
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
 </div>

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

@@ -1,26 +1,30 @@
 <script lang="ts">
-    import type { HTMLAttributes } from 'svelte/elements';
-    import { getEmblaContext } from './context.js';
-    import { cn, type WithElementRef } from '../utils.js';
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "../utils.js";
 
-    let {
-        ref = $bindable(null),
-        class: className,
-        children,
-        ...restProps
-    }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 
-    const emblaCtx = getEmblaContext('<Carousel.Item/>');
+	const emblaCtx = getEmblaContext("<Carousel.Item/>");
 </script>
 
 <div
-    bind:this={ref}
-    data-slot="carousel-item"
-    role="group"
-    aria-roledescription="slide"
-    class={cn('min-w-0 shrink-0 grow-0 basis-full', emblaCtx.orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
-    data-embla-slide=""
-    {...restProps}
+	bind:this={ref}
+	role="group"
+	aria-roledescription="slide"
+	class={cn(
+		"min-w-0 shrink-0 grow-0 basis-full",
+		emblaCtx.orientation === "horizontal" ? "pl-4" : "pt-4",
+		className
+	)}
+	data-embla-slide=""
+	{...restProps}
 >
-    {@render children?.()}
+	{@render children?.()}
 </div>

package/src/shadcn/carousel/carousel-next.svelte

@@ -1,30 +1,37 @@
 <script lang="ts">
-    import ArrowRightIcon from '$icons/lucide/arrow-right';
-    import type { WithoutChildren } from 'bits-ui';
-    import { getEmblaContext } from './context.js';
-    import { cn } from '../utils.js';
-    import { Button, type Props } from '../button/index.js';
+	import ArrowRight from "@lucide/svelte/icons/arrow-right";
+	import type { WithoutChildren } from "bits-ui";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "../utils.js";
+	import { Button, type Props } from "../button/index.js";
 
-    let { ref = $bindable(null), class: className, variant = 'outline', size = 'icon', ...restProps }: WithoutChildren<Props> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "icon",
+		...restProps
+	}: WithoutChildren<Props> = $props();
 
-    const emblaCtx = getEmblaContext('<Carousel.Next/>');
+	const emblaCtx = getEmblaContext("<Carousel.Next/>");
 </script>
 
 <Button
-    data-slot="carousel-next"
-    {variant}
-    {size}
-    aria-disabled={!emblaCtx.canScrollNext}
-    class={cn(
-        'absolute size-8 rounded-full',
-        emblaCtx.orientation === 'horizontal' ? '-right-12 top-1/2 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-        className
-    )}
-    onclick={emblaCtx.scrollNext}
-    onkeydown={emblaCtx.handleKeyDown}
-    bind:ref
-    {...restProps}
+	{variant}
+	{size}
+	class={cn(
+		"absolute size-8 touch-manipulation rounded-full",
+		emblaCtx.orientation === "horizontal"
+			? "-right-12 top-1/2 -translate-y-1/2"
+			: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+		className
+	)}
+	disabled={!emblaCtx.canScrollNext}
+	onclick={emblaCtx.scrollNext}
+	onkeydown={emblaCtx.handleKeyDown}
+	bind:ref
+	{...restProps}
 >
-    <ArrowRightIcon class="size-4" />
-    <span class="sr-only">Next slide</span>
+	<ArrowRight />
+	<span class="sr-only">Next slide</span>
 </Button>

package/src/shadcn/carousel/carousel-previous.svelte

@@ -1,30 +1,37 @@
 <script lang="ts">
-    import ArrowLeftIcon from '$icons/lucide/arrow-left';
-    import type { WithoutChildren } from 'bits-ui';
-    import { getEmblaContext } from './context.js';
-    import { cn } from '../utils.js';
-    import { Button, type Props } from '../button/index.js';
+	import ArrowLeft from "@lucide/svelte/icons/arrow-left";
+	import type { WithoutChildren } from "bits-ui";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "../utils.js";
+	import { Button, type Props } from "../button/index.js";
 
-    let { ref = $bindable(null), class: className, variant = 'outline', size = 'icon', ...restProps }: WithoutChildren<Props> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "icon",
+		...restProps
+	}: WithoutChildren<Props> = $props();
 
-    const emblaCtx = getEmblaContext('<Carousel.Previous/>');
+	const emblaCtx = getEmblaContext("<Carousel.Previous/>");
 </script>
 
 <Button
-    data-slot="carousel-previous"
-    {variant}
-    {size}
-    aria-disabled={!emblaCtx.canScrollPrev}
-    class={cn(
-        'absolute size-8 rounded-full',
-        emblaCtx.orientation === 'horizontal' ? '-left-12 top-1/2 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-        className
-    )}
-    onclick={emblaCtx.scrollPrev}
-    onkeydown={emblaCtx.handleKeyDown}
-    {...restProps}
-    bind:ref
+	{variant}
+	{size}
+	class={cn(
+		"absolute size-8 touch-manipulation rounded-full",
+		emblaCtx.orientation === "horizontal"
+			? "-left-12 top-1/2 -translate-y-1/2"
+			: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+		className
+	)}
+	disabled={!emblaCtx.canScrollPrev}
+	onclick={emblaCtx.scrollPrev}
+	onkeydown={emblaCtx.handleKeyDown}
+	{...restProps}
+	bind:ref
 >
-    <ArrowLeftIcon class="size-4" />
-    <span class="sr-only">Previous slide</span>
+	<ArrowLeft />
+	<span class="sr-only">Previous slide</span>
 </Button>