pika-ux 1.0.0-beta.7 → 1.0.0-beta.9

package/src/shadcn/carousel/carousel.svelte

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

package/src/shadcn/carousel/context.ts

@@ -1,51 +1,56 @@
-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';
+import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
+import type emblaCarouselSvelte from "embla-carousel-svelte";
+import { getContext, hasContext, setContext } from "svelte";
+import type { WithElementRef } from "bits-ui";
+import type { HTMLAttributes } from "svelte/elements";
 
 export type CarouselAPI =
-    NonNullable<NonNullable<EmblaCarouselSvelteType['$$_attributes']>['on:emblaInit']> extends (evt: CustomEvent<infer CarouselAPI>) => void ? CarouselAPI : never;
+	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 CarouselOptions = EmblaCarouselConfig["options"];
+export type CarouselPlugins = EmblaCarouselConfig["plugins"];
 
 ////
 
 export type CarouselProps = {
-    opts?: CarouselOptions;
-    plugins?: CarouselPlugins;
-    setApi?: (api: CarouselAPI | undefined) => void;
-    orientation?: 'horizontal' | 'vertical';
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugins;
+	setApi?: (api: CarouselAPI | undefined) => void;
+	orientation?: "horizontal" | "vertical";
 } & WithElementRef<HTMLAttributes<HTMLDivElement>>;
 
-const EMBLA_CAROUSEL_CONTEXT = Symbol('EMBLA_CAROUSEL_CONTEXT');
+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;
+	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;
+	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);
+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/toggle-group/toggle-group.svelte

@@ -1,41 +1,36 @@
 <script lang="ts" module>
-	import { getContext, setContext } from "svelte";
-	import type { ToggleVariants } from "$ui/shadcn/toggle/index.js";
-	export function setToggleGroupCtx(props: ToggleVariants) {
-		setContext("toggleGroup", props);
-	}
+    import { getContext, setContext } from 'svelte';
+    import type { ToggleVariants } from '../toggle/index';
+    export function setToggleGroupCtx(props: ToggleVariants) {
+        setContext('toggleGroup', props);
+    }
 
-	export function getToggleGroupCtx() {
-		return getContext<ToggleVariants>("toggleGroup");
-	}
+    export function getToggleGroupCtx() {
+        return getContext<ToggleVariants>('toggleGroup');
+    }
 </script>
 
 <script lang="ts">
-	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
-	import { cn } from "../utils.js";
+    import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
 
-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		class: className,
-		size = "default",
-		variant = "default",
-		...restProps
-	}: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
+    let {
+        ref = $bindable(null),
+        value = $bindable(),
+        class: className,
+        size = 'default',
+        variant = 'default',
+        ...restProps
+    }: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
 
-	setToggleGroupCtx({
-		variant,
-		size,
-	});
+    setToggleGroupCtx({
+        variant,
+        size
+    });
 </script>
 
 <!--
 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 class={cn('flex items-center justify-center gap-1', className)} {...restProps} />

package/src/pika/index.ts

@@ -1,29 +0,0 @@
-// Pika UI Components - Non-conflicting exports
-export * from './chip';
-export * from './combobox';
-export * from './confirm-dialog';
-export * from './copy-button';
-export * from './create-copy-link-button';
-export * from './date-picker';
-export * from './date-range-picker';
-export * from './date-time-picker';
-export * from './expandable-container';
-export * from './markdown-editor';
-export * from './permanent-toast';
-export * from './pika-alert';
-export * from './pika-badge';
-export * from './pika-table';
-export * from './popup-help';
-export * from './simple-dropdown';
-export * from './text-wave-shimmer';
-export * from './tooltip-plus';
-
-// Selective exports to avoid naming conflicts
-// List component - renamed to avoid conflict with TabsList
-export { List as PikaList, type ListMapping } from './list';
-
-// Tabs component - only export aliased versions to avoid "Content" and "List" conflicts
-export { Tabs, TabsContent, TabsList, TabsTrigger } from './pika-tabs';
-
-// Slideout component - only export aliased versions to avoid "Content" conflict
-export { Slideout, SlideoutContent, SlideoutPanel, SlideoutProvider, useSlideout } from './slideout';

package/src/shadcn/index.ts

@@ -1,40 +0,0 @@
-// shadcn UI Components
-export * from './alert';
-export * from './avatar';
-export * from './badge';
-export * from './breadcrumb';
-export * from './button';
-export * from './calendar';
-export * from './card';
-export * from './carousel';
-export * from './checkbox';
-export * from './collapsible';
-export * from './command';
-export * from './data-table';
-export * from './dialog';
-export * from './dropdown-menu';
-export * from './input';
-export * from './label';
-export * from './popover';
-export * from './radio-group';
-export * from './range-calendar';
-export * from './resizable';
-export * from './scroll-area';
-export * from './select';
-export * from './separator';
-export * from './sheet';
-export * from './sidebar';
-export * from './skeleton';
-export * from './slider';
-export * from './sonner';
-export * from './switch';
-export * from './table';
-export * from './tabs';
-export * from './textarea';
-export * from './toggle';
-export * from './toggle-group';
-export * from './tooltip';
-
-// Utilities
-export * from './utils';
-export * from './is-mobile.svelte';