pika-ux 1.0.0-beta.9 → 1.0.1

package/src/shadcn/dropdown-menu copy/dropdown-menu-content.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { cn } from '../utils.js';
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+    let {
+        ref = $bindable(null),
+        sideOffset = 4,
+        portalProps,
+        class: className,
+        ...restProps
+    }: DropdownMenuPrimitive.ContentProps & {
+        portalProps?: DropdownMenuPrimitive.PortalProps;
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...portalProps}>
+    <DropdownMenuPrimitive.Content
+        bind:ref
+        data-slot="dropdown-menu-content"
+        {sideOffset}
+        class={cn(
+            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-dropdown-menu-content-available-height) origin-(--bits-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md outline-none',
+            className
+        )}
+        {...restProps}
+    />
+</DropdownMenuPrimitive.Portal>

package/src/shadcn/dropdown-menu copy/dropdown-menu-group-heading.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+    import type { ComponentProps } from 'svelte';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        inset,
+        ...restProps
+    }: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+        inset?: boolean;
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+    bind:ref
+    data-slot="dropdown-menu-group-heading"
+    data-inset={inset}
+    class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8', className)}
+    {...restProps}
+/>

package/src/shadcn/dropdown-menu copy/dropdown-menu-group.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />

package/src/shadcn/dropdown-menu copy/dropdown-menu-item.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { cn } from '../utils.js';
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        inset,
+        variant = 'default',
+        ...restProps
+    }: DropdownMenuPrimitive.ItemProps & {
+        inset?: boolean;
+        variant?: 'default' | 'destructive';
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+    bind:ref
+    data-slot="dropdown-menu-item"
+    data-inset={inset}
+    data-variant={variant}
+    class={cn(
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_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-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+    )}
+    {...restProps}
+/>

package/src/shadcn/dropdown-menu copy/dropdown-menu-label.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '../utils.js';
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        inset,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+        inset?: boolean;
+    } = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="dropdown-menu-label"
+    data-inset={inset}
+    class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/src/shadcn/dropdown-menu copy/dropdown-menu-radio-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>

package/src/shadcn/dropdown-menu copy/dropdown-menu-radio-item.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    import CircleIcon from '$icons/lucide/circle';
+    import { cn, type WithoutChild } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, children: childrenProp, ...restProps }: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+    bind:ref
+    data-slot="dropdown-menu-radio-item"
+    class={cn(
+        "focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 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}
+>
+    {#snippet children({ checked })}
+        <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+            {#if checked}
+                <CircleIcon class="size-2 fill-current" />
+            {/if}
+        </span>
+        {@render childrenProp?.({ checked })}
+    {/snippet}
+</DropdownMenuPrimitive.RadioItem>

package/src/shadcn/dropdown-menu copy/dropdown-menu-separator.svelte

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

package/src/shadcn/dropdown-menu copy/dropdown-menu-shortcut.svelte

@@ -0,0 +1,20 @@
+<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="dropdown-menu-shortcut"
+    class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</span>

package/src/shadcn/dropdown-menu copy/dropdown-menu-sub-content.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+    bind:ref
+    data-slot="dropdown-menu-sub-content"
+    class={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
+        className
+    )}
+    {...restProps}
+/>

package/src/shadcn/dropdown-menu copy/dropdown-menu-sub-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    import ChevronRightIcon from '$icons/lucide/chevron-right';
+    import { cn } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        inset,
+        children,
+        ...restProps
+    }: DropdownMenuPrimitive.SubTriggerProps & {
+        inset?: boolean;
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+    bind:ref
+    data-slot="dropdown-menu-sub-trigger"
+    data-inset={inset}
+    class={cn(
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+    <ChevronRightIcon class="ml-auto size-4" />
+</DropdownMenuPrimitive.SubTrigger>

package/src/shadcn/dropdown-menu copy/dropdown-menu-trigger.svelte

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

package/src/shadcn/spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './spinner.svelte';

package/src/shadcn/spinner/spinner.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { cn } from '../utils.js';
+    import Loader2Icon from '$icons/lucide/loader-circle';
+    import type { ComponentProps } from 'svelte';
+    type Props = ComponentProps<typeof Loader2Icon>;
+    let { class: className, ...restProps }: Props = $props();
+</script>
+
+<Loader2Icon role="status" aria-label="Loading" class={cn('size-4 animate-spin', className)} {...restProps} />

package/src/shadcn/toggle/toggle.svelte

@@ -1,51 +1,42 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
-
-	export const toggleVariants = tv({
-		base: "hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-		variants: {
-			variant: {
-				default: "bg-transparent",
-				outline:
-					"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm",
-			},
-			size: {
-				default: "h-9 min-w-9 px-3",
-				sm: "h-8 min-w-8 px-2",
-				lg: "h-10 min-w-10 px-3",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	});
-
-	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
-	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
-	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+    import { type VariantProps, tv } from 'tailwind-variants';
+    export const toggleVariants = tv({
+        base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground 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 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        variants: {
+            variant: {
+                default: 'bg-transparent',
+                outline: 'border-input shadow-xs hover:bg-accent hover:text-accent-foreground border bg-transparent'
+            },
+            size: {
+                default: 'h-9 min-w-9 px-2',
+                sm: 'h-8 min-w-8 px-1.5',
+                lg: 'h-10 min-w-10 px-2.5'
+            }
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default'
+        }
+    });
+    export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
+    export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+    export type ToggleVariants = VariantProps<typeof toggleVariants>;
 </script>
 
 <script lang="ts">
-	import { Toggle as TogglePrimitive } from "bits-ui";
-	import { cn } from "../utils.js";
-
-	let {
-		ref = $bindable(null),
-		pressed = $bindable(false),
-		class: className,
-		size = "default",
-		variant = "default",
-		...restProps
-	}: TogglePrimitive.RootProps & {
-		variant?: ToggleVariant;
-		size?: ToggleSize;
-	} = $props();
+    import { Toggle as TogglePrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+    let {
+        ref = $bindable(null),
+        pressed = $bindable(false),
+        class: className,
+        size = 'default',
+        variant = 'default',
+        ...restProps
+    }: TogglePrimitive.RootProps & {
+        variant?: ToggleVariant;
+        size?: ToggleSize;
+    } = $props();
 </script>
 
-<TogglePrimitive.Root
-	bind:ref
-	bind:pressed
-	class={cn(toggleVariants({ variant, size }), className)}
-	{...restProps}
-/>
+<TogglePrimitive.Root bind:ref bind:pressed data-slot="toggle" class={cn(toggleVariants({ variant, size }), className)} {...restProps} />

package/src/shadcn/toggle-group/toggle-group-item.svelte

@@ -1,30 +1,27 @@
 <script lang="ts">
-	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
-	import { getToggleGroupCtx } from "./toggle-group.svelte";
-	import { cn } from "../utils.js";
-	import { type ToggleVariants, toggleVariants } from "../toggle/index.js";
+    import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+    import { getToggleGroupCtx } from './toggle-group.svelte';
+    import { cn } from '../utils.js';
+    import { type ToggleVariants, toggleVariants } from '../toggle/index.js';
 
-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		class: className,
-		size,
-		variant,
-		...restProps
-	}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+    let { ref = $bindable(null), value = $bindable(), class: className, size, variant, ...restProps }: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
 
-	const ctx = getToggleGroupCtx();
+    const ctx = getToggleGroupCtx();
 </script>
 
 <ToggleGroupPrimitive.Item
-	bind:ref
-	class={cn(
-		toggleVariants({
-			variant: ctx.variant || variant,
-			size: ctx.size || size,
-		}),
-		className
-	)}
-	{value}
-	{...restProps}
+    bind:ref
+    data-slot="toggle-group-item"
+    data-variant={ctx.variant || variant}
+    data-size={ctx.size || size}
+    class={cn(
+        toggleVariants({
+            variant: ctx.variant || variant,
+            size: ctx.size || size
+        }),
+        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+        className
+    )}
+    {value}
+    {...restProps}
 />

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

@@ -33,4 +33,12 @@
 Discriminated Unions + Destructing (required for bindable) do not
 get along, so we shut typescript up by casting `value` to `never`.
 -->
-<ToggleGroupPrimitive.Root bind:value={value as never} bind:ref class={cn('flex items-center justify-center gap-1', className)} {...restProps} />
+<ToggleGroupPrimitive.Root
+    bind:value={value as never}
+    bind:ref
+    data-slot="toggle-group"
+    data-variant={variant}
+    data-size={size}
+    class={cn('group/toggle-group data-[variant=outline]:shadow-xs flex w-fit items-center rounded-md', className)}
+    {...restProps}
+/>