pika-ux 1.0.0-beta.0

package/src/shadcn/sidebar/sidebar-menu-item.svelte

@@ -0,0 +1,21 @@
+<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<HTMLLIElement>, HTMLLIElement> = $props();
+</script>
+
+<li
+    bind:this={ref}
+    data-slot="sidebar-menu-item"
+    data-sidebar="menu-item"
+    class={cn('group/menu-item relative', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</li>

package/src/shadcn/sidebar/sidebar-menu-skeleton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '../utils.js';
+    import { Skeleton } from '../skeleton/index.js';
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        showIcon = false,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> & {
+        showIcon?: boolean;
+    } = $props();
+
+    // Random width between 50% and 90%
+    const width = `${Math.floor(Math.random() * 40) + 50}%`;
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="sidebar-menu-skeleton"
+    data-sidebar="menu-skeleton"
+    class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+    {...restProps}
+>
+    {#if showIcon}
+        <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+    {/if}
+    <Skeleton
+        class="max-w-(--skeleton-width) h-4 flex-1"
+        data-sidebar="menu-skeleton-text"
+        style="--skeleton-width: {width};"
+    />
+    {@render children?.()}
+</div>

package/src/shadcn/sidebar/sidebar-menu-sub-button.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '../utils.js';
+    import type { Snippet } from 'svelte';
+    import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+    let {
+        ref = $bindable(null),
+        children,
+        child,
+        class: className,
+        size = 'md',
+        isActive = false,
+        ...restProps
+    }: WithElementRef<HTMLAnchorAttributes> & {
+        child?: Snippet<[{ props: Record<string, unknown> }]>;
+        size?: 'sm' | 'md';
+        isActive?: boolean;
+    } = $props();
+
+    const mergedProps = $derived({
+        class: cn(
+            'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground outline-hidden flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+            'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+            size === 'sm' && 'text-xs',
+            size === 'md' && 'text-sm',
+            'group-data-[collapsible=icon]:hidden',
+            className
+        ),
+        'data-slot': 'sidebar-menu-sub-button',
+        'data-sidebar': 'menu-sub-button',
+        'data-size': size,
+        'data-active': isActive,
+        ...restProps,
+    });
+</script>
+
+{#if child}
+    {@render child({ props: mergedProps })}
+{:else}
+    <a bind:this={ref} {...mergedProps}>
+        {@render children?.()}
+    </a>
+{/if}

package/src/shadcn/sidebar/sidebar-menu-sub-item.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '../utils.js';
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    let {
+        ref = $bindable(null),
+        children,
+        class: className,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props();
+</script>
+
+<li
+    bind:this={ref}
+    data-slot="sidebar-menu-sub-item"
+    data-sidebar="menu-sub-item"
+    class={cn('group/menu-sub-item relative', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</li>

package/src/shadcn/sidebar/sidebar-menu-sub.svelte

@@ -0,0 +1,25 @@
+<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<HTMLUListElement>> = $props();
+</script>
+
+<ul
+    bind:this={ref}
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-sub"
+    class={cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        className
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</ul>

package/src/shadcn/sidebar/sidebar-menu.svelte

@@ -0,0 +1,21 @@
+<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<HTMLUListElement>, HTMLUListElement> = $props();
+</script>
+
+<ul
+    bind:this={ref}
+    data-slot="sidebar-menu"
+    data-sidebar="menu"
+    class={cn('flex w-full min-w-0 flex-col gap-1', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</ul>

package/src/shadcn/sidebar/sidebar-provider.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import * as Tooltip from '../tooltip/index.js';
+    import { cn, type WithElementRef } from '../utils.js';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './constants.js';
+    import { setSidebar } from './context.svelte.js';
+
+    let {
+        ref = $bindable(null),
+        open = $bindable(true),
+        onOpenChange = () => {},
+        class: className,
+        style,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+        open?: boolean;
+        onOpenChange?: (open: boolean) => void;
+    } = $props();
+
+    const sidebar = setSidebar({
+        open: () => open,
+        setOpen: (value: boolean) => {
+            open = value;
+            onOpenChange(value);
+
+            // This sets the cookie to keep the sidebar state.
+            document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+        }
+    });
+</script>
+
+<!-- CHANGED: removed keyboard shortcut -->
+<!-- <svelte:window onkeydown={sidebar.handleShortcutKeydown} /> -->
+
+<Tooltip.Provider delayDuration={0}>
+    <div
+        data-slot="sidebar-wrapper"
+        style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
+        class={cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className)}
+        bind:this={ref}
+        {...restProps}
+    >
+        {@render children?.()}
+    </div>
+</Tooltip.Provider>

package/src/shadcn/sidebar/sidebar-rail.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '../utils.js';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { useSidebar } from './context.svelte.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+
+    const sidebar = useSidebar();
+</script>
+
+<button
+    bind:this={ref}
+    data-sidebar="rail"
+    data-slot="sidebar-rail"
+    aria-label="Toggle Sidebar"
+    tabIndex={-1}
+    onclick={sidebar.toggle}
+    title="Toggle Sidebar"
+    class={cn(
+        '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-[calc(1/2*100%-1px)] after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]: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',
+        className
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+</button>

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { Separator } from '../separator/index.js';
+    import { cn } from '../utils.js';
+    import type { ComponentProps } from 'svelte';
+
+    let { ref = $bindable(null), class: className, ...restProps }: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+    bind:ref
+    data-slot="sidebar-separator"
+    data-sidebar="separator"
+    class={cn('bg-sidebar-border', className)}
+    {...restProps}
+/>

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { Button } from '../button/index.js';
+    import { cn } from '../utils.js';
+    import PanelLeftIcon from '$icons/lucide/panel-left';
+    import type { ComponentProps } from 'svelte';
+    import { useSidebar } from './context.svelte.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        onclick,
+        ...restProps
+    }: ComponentProps<typeof Button> & {
+        onclick?: (e: MouseEvent) => void;
+    } = $props();
+
+    const sidebar = useSidebar();
+</script>
+
+<Button
+    data-sidebar="trigger"
+    data-slot="sidebar-trigger"
+    variant="ghost"
+    size="icon"
+    class={cn('size-7', className)}
+    type="button"
+    onclick={(e) => {
+        onclick?.(e);
+        sidebar.toggle();
+    }}
+    {...restProps}
+>
+    <PanelLeftIcon />
+    <span class="sr-only">Toggle Sidebar</span>
+</Button>

package/src/shadcn/sidebar/sidebar.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+    import * as Sheet from '../sheet/index.js';
+    import { cn, type WithElementRef } from '../utils.js';
+    import type { HTMLAttributes } from 'svelte/elements';
+    import { SIDEBAR_WIDTH_MOBILE } from './constants.js';
+    import { useSidebar } from './context.svelte.js';
+
+    let {
+        ref = $bindable(null),
+        side = 'left',
+        variant = 'sidebar',
+        collapsible = 'offcanvas',
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+        side?: 'left' | 'right';
+        variant?: 'sidebar' | 'floating' | 'inset';
+        collapsible?: 'offcanvas' | 'icon' | 'none';
+    } = $props();
+
+    const sidebar = useSidebar();
+</script>
+
+{#if collapsible === 'none'}
+    <div class={cn('bg-sidebar text-sidebar-foreground w-[var(--sidebar-width)] flex h-full flex-col', className)} bind:this={ref} {...restProps}>
+        {@render children?.()}
+    </div>
+{:else if sidebar.isMobile}
+    <Sheet.Root bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)} {...restProps}>
+        <Sheet.Content
+            data-sidebar="sidebar"
+            data-slot="sidebar"
+            data-mobile="true"
+            class="bg-sidebar text-sidebar-foreground w-[var(--sidebar-width)] p-0 [&>button]:hidden"
+            style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+            {side}
+        >
+            <Sheet.Header class="sr-only">
+                <Sheet.Title>Sidebar</Sheet.Title>
+                <Sheet.Description>Displays the mobile sidebar.</Sheet.Description>
+            </Sheet.Header>
+            <div class="flex h-full w-full flex-col">
+                {@render children?.()}
+            </div>
+        </Sheet.Content>
+    </Sheet.Root>
+{:else}
+    <div
+        bind:this={ref}
+        class="text-sidebar-foreground group peer hidden md:block"
+        data-state={sidebar.state}
+        data-collapsible={sidebar.state === 'collapsed' ? collapsible : ''}
+        data-variant={variant}
+        data-side={side}
+        data-slot="sidebar"
+    >
+        <!-- This is what handles the sidebar gap on desktop -->
+        <div
+            data-slot="sidebar-gap"
+            class={cn(
+                'w-[var(--sidebar-width)] relative bg-transparent transition-[width] duration-200 ease-linear',
+                'group-data-[collapsible=offcanvas]:w-0',
+                'group-data-[side=right]:rotate-180',
+                variant === 'floating' || variant === 'inset'
+                    ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+                    : 'group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]'
+            )}
+        ></div>
+        <div
+            data-slot="sidebar-container"
+            class={cn(
+                'w-[var(--sidebar-width)] fixed inset-y-0 z-10 hidden h-svh transition-[left,right,width] duration-200 ease-linear md:flex',
+                side === 'left'
+                    ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+                    : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+                // Adjust the padding for floating and inset variants.
+                variant === 'floating' || variant === 'inset'
+                    ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+                    : 'group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+                className
+            )}
+            {...restProps}
+        >
+            <div
+                data-sidebar="sidebar"
+                data-slot="sidebar-inner"
+                class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+            >
+                {@render children?.()}
+            </div>
+        </div>
+    </div>
+{/if}

package/src/shadcn/skeleton/index.ts

@@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+	Root,
+	//
+	Root as Skeleton,
+};

package/src/shadcn/skeleton/skeleton.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { cn, type WithElementRef, type WithoutChildren } from '../utils.js';
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="skeleton"
+    class={cn('bg-accent animate-pulse rounded-md', className)}
+    {...restProps}
+></div>

package/src/shadcn/slider/index.ts

@@ -0,0 +1,7 @@
+import Root from "./slider.svelte";
+
+export {
+	Root,
+	//
+	Root as Slider,
+};

package/src/shadcn/slider/slider.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		orientation = "horizontal",
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<SliderPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	{orientation}
+	class={cn(
+		"relative flex touch-none select-none items-center data-[orientation='vertical']:h-full data-[orientation='vertical']:min-h-44 data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ thumbs })}
+		<span
+			data-orientation={orientation}
+			class="bg-primary/20 relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-1.5 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-1.5"
+		>
+			<SliderPrimitive.Range
+				class="bg-primary absolute data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
+			/>
+		</span>
+		{#each thumbs as thumb (thumb)}
+			<SliderPrimitive.Thumb
+				index={thumb}
+				class="border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50"
+			/>
+		{/each}
+	{/snippet}
+</SliderPrimitive.Root>

package/src/shadcn/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";

package/src/shadcn/sonner/sonner.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={mode.current}
+	class="toaster group"
+	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+	{...restProps}
+/>

package/src/shadcn/switch/index.ts

@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};

package/src/shadcn/switch/switch.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	class={cn(
+		"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			"bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>

package/src/shadcn/table/index.ts

@@ -0,0 +1,28 @@
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow,
+};

package/src/shadcn/table/table-body.svelte

@@ -0,0 +1,15 @@
+<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<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody bind:this={ref} data-slot="table-body" class={cn('[&_tr:last-child]:border-0', className)} {...restProps}>
+    {@render children?.()}
+</tbody>

package/src/shadcn/table/table-caption.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<HTMLElement>> = $props();
+</script>
+
+<caption
+    bind:this={ref}
+    data-slot="table-caption"
+    class={cn('text-muted-foreground mt-4 text-sm', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</caption>

package/src/shadcn/table/table-cell.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '../utils.js';
+    import type { HTMLTdAttributes } from 'svelte/elements';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td
+    bind:this={ref}
+    data-slot="table-cell"
+    class={cn('whitespace-nowrap bg-clip-padding p-2 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</td>

package/src/shadcn/table/table-footer.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<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+    bind:this={ref}
+    data-slot="table-footer"
+    class={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</tfoot>