pika-ux 1.0.0-beta.0

package/src/shadcn/card/card-header.svelte

@@ -0,0 +1,16 @@
+<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("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,25 @@
+<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,
+		level = 3,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
+</script>
+
+<div
+	role="heading"
+	aria-level={level}
+	bind:this={ref}
+	class={cn("font-semibold leading-none tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/card/card.svelte

@@ -0,0 +1,20 @@
+<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("bg-card text-card-foreground rounded-xl border shadow", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/card/index.ts

@@ -0,0 +1,22 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+};

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

@@ -0,0 +1,39 @@
+<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';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+    const emblaCtx = getEmblaContext('<Carousel.Content/>');
+</script>
+
+<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}
+>
+    <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

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { getEmblaContext } from './context.js';
+    import { cn, type WithElementRef } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+    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}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,30 @@
+<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';
+
+    let { ref = $bindable(null), class: className, variant = 'outline', size = 'icon', ...restProps }: WithoutChildren<Props> = $props();
+
+    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}
+>
+    <ArrowRightIcon class="size-4" />
+    <span class="sr-only">Next slide</span>
+</Button>

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

@@ -0,0 +1,30 @@
+<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';
+
+    let { ref = $bindable(null), class: className, variant = 'outline', size = 'icon', ...restProps }: WithoutChildren<Props> = $props();
+
+    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
+>
+    <ArrowLeftIcon class="size-4" />
+    <span class="sr-only">Previous slide</span>
+</Button>

package/src/shadcn/carousel/carousel.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import { type CarouselAPI, type CarouselProps, type EmblaContext, setEmblaContext } from './context.js';
+    import { cn, type WithElementRef } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        opts = {},
+        plugins = [],
+        setApi = () => {},
+        orientation = 'horizontal',
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<CarouselProps> = $props();
+
+    let carouselState = $state<EmblaContext>({
+        api: undefined,
+        scrollPrev,
+        scrollNext,
+        orientation,
+        canScrollNext: false,
+        canScrollPrev: false,
+        handleKeyDown,
+        options: opts,
+        plugins,
+        onInit,
+        scrollSnaps: [],
+        selectedIndex: 0,
+        scrollTo,
+    });
+
+    setEmblaContext(carouselState);
+
+    function scrollPrev() {
+        carouselState.api?.scrollPrev();
+    }
+
+    function scrollNext() {
+        carouselState.api?.scrollNext();
+    }
+
+    function scrollTo(index: number, jump?: boolean) {
+        carouselState.api?.scrollTo(index, jump);
+    }
+
+    function onSelect() {
+        if (!carouselState.api) return;
+        carouselState.selectedIndex = carouselState.api.selectedScrollSnap();
+        carouselState.canScrollNext = carouselState.api.canScrollNext();
+        carouselState.canScrollPrev = carouselState.api.canScrollPrev();
+    }
+
+    function handleKeyDown(e: KeyboardEvent) {
+        if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            scrollPrev();
+        } else if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            scrollNext();
+        }
+    }
+
+    function onInit(event: CustomEvent<CarouselAPI>) {
+        carouselState.api = event.detail;
+        setApi(carouselState.api);
+
+        carouselState.scrollSnaps = carouselState.api.scrollSnapList();
+        carouselState.api.on('select', onSelect);
+        onSelect();
+    }
+
+    $effect(() => {
+        return () => {
+            carouselState.api?.off('select', onSelect);
+        };
+    });
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="carousel"
+    class={cn('relative', className)}
+    role="region"
+    aria-roledescription="carousel"
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/src/shadcn/carousel/context.ts

@@ -0,0 +1,51 @@
+import type { WithElementRef } from '../utils.js';
+import type { EmblaCarouselSvelteType, default as emblaCarouselSvelte } from 'embla-carousel-svelte';
+import { getContext, hasContext, setContext } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export type CarouselAPI =
+    NonNullable<NonNullable<EmblaCarouselSvelteType['$$_attributes']>['on:emblaInit']> extends (evt: CustomEvent<infer CarouselAPI>) => void ? CarouselAPI : never;
+
+type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
+
+export type CarouselOptions = EmblaCarouselConfig['options'];
+export type CarouselPlugins = EmblaCarouselConfig['plugins'];
+
+////
+
+export type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugins;
+    setApi?: (api: CarouselAPI | undefined) => void;
+    orientation?: 'horizontal' | 'vertical';
+} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
+
+const EMBLA_CAROUSEL_CONTEXT = Symbol('EMBLA_CAROUSEL_CONTEXT');
+
+export type EmblaContext = {
+    api: CarouselAPI | undefined;
+    orientation: 'horizontal' | 'vertical';
+    scrollNext: () => void;
+    scrollPrev: () => void;
+    canScrollNext: boolean;
+    canScrollPrev: boolean;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    options: CarouselOptions;
+    plugins: CarouselPlugins;
+    onInit: (e: CustomEvent<CarouselAPI>) => void;
+    scrollTo: (index: number, jump?: boolean) => void;
+    scrollSnaps: number[];
+    selectedIndex: number;
+};
+
+export function setEmblaContext(config: EmblaContext): EmblaContext {
+    setContext(EMBLA_CAROUSEL_CONTEXT, config);
+    return config;
+}
+
+export function getEmblaContext(name = 'This component') {
+    if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
+        throw new Error(`${name} must be used within a <Carousel.Root> component`);
+    }
+    return getContext<ReturnType<typeof setEmblaContext>>(EMBLA_CAROUSEL_CONTEXT);
+}

package/src/shadcn/carousel/index.ts

@@ -0,0 +1,19 @@
+import Root from "./carousel.svelte";
+import Content from "./carousel-content.svelte";
+import Item from "./carousel-item.svelte";
+import Previous from "./carousel-previous.svelte";
+import Next from "./carousel-next.svelte";
+
+export {
+	Root,
+	Content,
+	Item,
+	Previous,
+	Next,
+	//
+	Root as Carousel,
+	Content as CarouselContent,
+	Item as CarouselItem,
+	Previous as CarouselPrevious,
+	Next as CarouselNext,
+};

package/src/shadcn/checkbox/checkbox.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+    import CheckIcon from '$icons/lucide/check';
+    import MinusIcon from '$icons/lucide/minus';
+    import { cn, type WithoutChildrenOrChild } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        checked = $bindable(false),
+        indeterminate = $bindable(false),
+        class: className,
+        ...restProps
+    }: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+    bind:ref
+    data-slot="checkbox"
+    class={cn(
+        'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className
+    )}
+    bind:checked
+    bind:indeterminate
+    {...restProps}
+>
+    {#snippet children({ checked, indeterminate })}
+        <div data-slot="checkbox-indicator" class="text-current transition-none">
+            {#if checked}
+                <CheckIcon class="size-3.5" />
+            {:else if indeterminate}
+                <MinusIcon class="size-3.5" />
+            {/if}
+        </div>
+    {/snippet}
+</CheckboxPrimitive.Root>

package/src/shadcn/checkbox/index.ts

@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox,
+};

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />

package/src/shadcn/collapsible/collapsible-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />

package/src/shadcn/collapsible/collapsible.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />

package/src/shadcn/collapsible/index.ts

@@ -0,0 +1,13 @@
+import Root from "./collapsible.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Content from "./collapsible-content.svelte";
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger,
+};

package/src/shadcn/command/command-dialog.svelte

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

package/src/shadcn/command/command-empty.svelte

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

package/src/shadcn/command/command-group.svelte

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

package/src/shadcn/command/command-input.svelte

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

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

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

package/src/shadcn/command/command-link-item.svelte

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

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

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

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

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

package/src/shadcn/command/command-shortcut.svelte

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