negodesign 0.0.11 → 0.0.13

package/dist/components/ui/carousel/carousel.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import {
+		type CarouselAPI,
+		type CarouselProps,
+		type EmblaContext,
+		setEmblaContext,
+	} from "./context.js";
+
+	let {
+		ref = $bindable(null),
+		opts = {},
+		plugins = [],
+		setApi = () => {},
+		orientation = "horizontal",
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<CarouselProps> = $props();
+
+	// svelte-ignore state_referenced_locally
+	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/dist/components/ui/carousel/carousel.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
+import { type CarouselProps } from "./context.js";
+declare const Carousel: import("svelte").Component<WithElementRef<CarouselProps>, {}, "ref">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/components/ui/carousel/context.d.ts

@@ -0,0 +1,31 @@
+import type { WithElementRef } from "../../../utils.js";
+import type { EmblaCarouselSvelteType, default as emblaCarouselSvelte } from "embla-carousel-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>>;
+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 declare function setEmblaContext(config: EmblaContext): EmblaContext;
+export declare function getEmblaContext(name?: string): EmblaContext;
+export {};

package/dist/components/ui/carousel/context.js

@@ -0,0 +1,12 @@
+import { getContext, hasContext, setContext } from "svelte";
+const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
+export function setEmblaContext(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(EMBLA_CAROUSEL_CONTEXT);
+}

package/dist/components/ui/carousel/index.d.ts

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

package/dist/components/ui/carousel/index.js

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

package/dist/components/ui/input-group/input-group-addon.svelte

@@ -1,4 +1,10 @@
 <script lang="ts" module>
+/**
+ * An addon component for input groups, used to display labels, icons, or actions
+ * adjacent to input fields. Supports inline and block alignment options.
+ *
+ * @component
+ */
 	import { tv, type VariantProps } from 'tailwind-variants';
 	export const inputGroupAddonVariants = tv({
 		base: "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",

package/dist/components/ui/input-group/input-group-addon.svelte.d.ts

@@ -1,3 +1,9 @@
+/**
+ * An addon component for input groups, used to display labels, icons, or actions
+ * adjacent to input fields. Supports inline and block alignment options.
+ *
+ * @component
+ */
 import { type VariantProps } from 'tailwind-variants';
 export declare const inputGroupAddonVariants: import("tailwind-variants").TVReturnType<{
     align: {

package/dist/components/ui/light-switch/light-switch.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type { Size } from "../button/button.svelte";
+  import type { ButtonSize } from "../button/button.svelte";
 
   export type LightSwitchProps = {
     variant?: "outline" | "ghost";
-    size?: Size;
+    size?: ButtonSize;
   };
 </script>
 
@@ -11,16 +11,27 @@
   import SunIcon from "@lucide/svelte/icons/sun";
   import MoonIcon from "@lucide/svelte/icons/moon";
   import { toggleMode } from "mode-watcher";
-  import Button, { sizeMap } from "../button/button.svelte";
+  import Button from "../button/button.svelte";
 
   let { variant = "outline", size = "default" }: LightSwitchProps = $props();
+
+  const sizeMap = {
+    default: "icon",
+    xs: "icon-xs",
+    sm: "icon-sm",
+    lg: "icon-lg",
+    icon: "icon",
+    "icon-xs": "icon-xs",
+    "icon-sm": "icon-sm",
+    "icon-lg": "icon-lg",
+  };
 </script>
 
 <Button
   onclick={toggleMode}
   {variant}
-  size={sizeMap[size].icon}
-  class="rounded-full bg-input"
+  size={sizeMap[size] as ButtonSize}
+  class="relative rounded-full bg-input"
 >
   <SunIcon
     class="scale-100 rotate-0 transition-all! dark:scale-0 dark:-rotate-90"
@@ -29,4 +40,4 @@
     class="absolute scale-0 rotate-90 transition-all! dark:scale-100 dark:rotate-0"
   />
   <span class="sr-only">Toggle theme</span>
-</Button>
+</Button>

package/dist/components/ui/light-switch/light-switch.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { Size } from "../button/button.svelte";
+import type { ButtonSize } from "../button/button.svelte";
 export type LightSwitchProps = {
     variant?: "outline" | "ghost";
-    size?: Size;
+    size?: ButtonSize;
 };
 declare const LightSwitch: import("svelte").Component<LightSwitchProps, {}, "">;
 type LightSwitch = ReturnType<typeof LightSwitch>;

package/dist/components/ui/star-rating/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from './star-rating.svelte';
+export { default as Star } from './star-rating-star.svelte';

package/dist/components/ui/star-rating/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './star-rating.svelte';
+export { default as Star } from './star-rating-star.svelte';

package/dist/components/ui/star-rating/star-rating-star.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { cn } from '../../../utils.js';
+	import StarHalfIcon from '@lucide/svelte/icons/star-half';
+	import StarIcon from '@lucide/svelte/icons/star';
+	import { RatingGroup } from 'bits-ui';
+	import type { StarRatingStarProps } from './types';
+
+	let { index, state, class: className }: StarRatingStarProps = $props();
+</script>
+
+<RatingGroup.Item
+	{index}
+	class={cn(
+		'ring-ring text-primary ring-offset-background group/item size-5 rounded-md ring-offset-2 outline-hidden group-aria-disabled:opacity-50 focus-visible:ring-2',
+		className
+	)}
+>
+	<div class="relative size-full">
+		<StarIcon
+			class={cn('size-full fill-transparent transition-all', {
+				'fill-current': state === 'active'
+			})}
+		/>
+		<StarHalfIcon
+			class={cn(
+				'absolute top-0 left-0 size-full fill-transparent transition-all group-data-[state=active]/item:fill-current',
+				{
+					'ltr:fill-current': state === 'partial'
+				}
+			)}
+		/>
+		<StarHalfIcon
+			class={cn(
+				'absolute top-0 right-0 size-full scale-x-[-1] fill-transparent transition-all group-data-[state=active]/item:fill-current',
+				{
+					'rtl:fill-current': state === 'partial'
+				}
+			)}
+		/>
+	</div>
+</RatingGroup.Item>

package/dist/components/ui/star-rating/star-rating-star.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { StarRatingStarProps } from './types';
+declare const StarRatingStar: import("svelte").Component<StarRatingStarProps, {}, "">;
+type StarRatingStar = ReturnType<typeof StarRatingStar>;
+export default StarRatingStar;

package/dist/components/ui/star-rating/star-rating.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn } from '../../../utils.js';
+	import { RatingGroup, type RatingGroupRootProps } from 'bits-ui';
+
+	let {
+		value = $bindable(0),
+		max = 5,
+		orientation = 'horizontal',
+		class: className,
+		...rest
+	}: RatingGroupRootProps = $props();
+</script>
+
+<RatingGroup.Root
+	class={cn('group flex w-fit place-items-center gap-1 rounded-md outline-hidden', className)}
+	bind:value
+	{max}
+	{orientation}
+	{...rest}
+/>

package/dist/components/ui/star-rating/star-rating.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RatingGroup } from 'bits-ui';
+declare const StarRating: import("svelte").Component<RatingGroup.RootProps, {}, "value">;
+type StarRating = ReturnType<typeof StarRating>;
+export default StarRating;

package/dist/components/ui/star-rating/types.d.ts

@@ -0,0 +1,5 @@
+export type StarRatingStarProps = {
+    index: number;
+    state: 'active' | 'partial' | 'inactive';
+    class?: string;
+};

package/dist/components/ui/star-rating/types.js

@@ -0,0 +1 @@
+export {};