@kayord/ui 2.1.8 → 2.1.10

package/dist/components/custom/combobox/Combobox.svelte.d.ts

@@ -12,6 +12,6 @@ interface Props {
     shouldFilter?: boolean;
     search?: string;
 }
-declare const Combobox: import("svelte").Component<Props, {}, "value" | "search" | "open">;
+declare const Combobox: import("svelte").Component<Props, {}, "search" | "value" | "open">;
 type Combobox = ReturnType<typeof Combobox>;
 export default Combobox;

package/dist/components/ui/accordion/accordion-root.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Accordion as AccordionPrimitive } from "bits-ui";
-declare const AccordionRoot: import("svelte").Component<AccordionPrimitive.RootProps, {}, "value" | "ref">;
+declare const AccordionRoot: import("svelte").Component<AccordionPrimitive.RootProps, {}, "ref" | "value">;
 type AccordionRoot = ReturnType<typeof AccordionRoot>;
 export default AccordionRoot;

package/dist/components/ui/accordion/accordion.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Accordion as AccordionPrimitive } from "bits-ui";
-declare const Accordion: import("svelte").Component<AccordionPrimitive.RootProps, {}, "value" | "ref">;
+declare const Accordion: import("svelte").Component<AccordionPrimitive.RootProps, {}, "ref" | "value">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/dist/components/ui/audio-wave/audio-wave.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+
+	let {
+		playing = true,
+		bars = 4,
+		class: className,
+		barColor = "bg-primary",
+		...rest
+	}: {
+		playing?: boolean;
+		bars?: number;
+		class?: string;
+		barColor?: string;
+		[key: string]: any;
+	} = $props();
+
+	let heights = $state(Array(bars).fill(0.25));
+	let frame: number;
+
+	function lerp(start: number, end: number, factor: number) {
+		return start + (end - start) * factor;
+	}
+
+	$effect(() => {
+		if (heights.length !== bars) {
+			heights = Array(bars).fill(0.25);
+		}
+
+		const animate = () => {
+			const time = performance.now() / 1000;
+
+			heights = heights.map((h, i) => {
+				let target = 0.25;
+
+				if (playing) {
+					const input = (time - i * 0.15) * (Math.PI * 2);
+					const sine = (Math.sin(input) + 1) / 2;
+					target = 0.25 + sine * 0.75;
+				}
+
+				return lerp(h, target, 0.15);
+			});
+
+			frame = requestAnimationFrame(animate);
+		};
+
+		frame = requestAnimationFrame(animate);
+
+		return () => cancelAnimationFrame(frame);
+	});
+</script>
+
+<div class={cn("flex h-8 items-end justify-center gap-0.5", className)} {...rest}>
+	{#each heights as height, i}
+		<div class={cn("w-1 rounded-sm", barColor)} style="height: {height * 100}%;"></div>
+	{/each}
+</div>

package/dist/components/ui/audio-wave/audio-wave.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    playing?: boolean;
+    bars?: number;
+    class?: string;
+    barColor?: string;
+    [key: string]: any;
+};
+declare const AudioWave: import("svelte").Component<$$ComponentProps, {}, "">;
+type AudioWave = ReturnType<typeof AudioWave>;
+export default AudioWave;

package/dist/components/ui/audio-wave/index.d.ts

@@ -0,0 +1,2 @@
+import AudioWave from "./audio-wave.svelte";
+export { AudioWave };

package/dist/components/ui/audio-wave/index.js

@@ -0,0 +1,2 @@
+import AudioWave from "./audio-wave.svelte";
+export { AudioWave };

package/dist/components/ui/calendar/calendar-month-select.svelte

@@ -18,7 +18,11 @@
 		className
 	)}
 >
-	<CalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+	<CalendarPrimitive.MonthSelect
+		bind:ref
+		class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+		{...restProps}
+	>
 		{#snippet child({ props, monthItems, selectedMonthItem })}
 			<select {...props} {value} {onchange}>
 				{#each monthItems as monthItem (monthItem.value)}

package/dist/components/ui/calendar/calendar-year-select.svelte

@@ -17,7 +17,11 @@
 		className
 	)}
 >
-	<CalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+	<CalendarPrimitive.YearSelect
+		bind:ref
+		class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+		{...restProps}
+	>
 		{#snippet child({ props, yearItems, selectedYearItem })}
 			<select {...props} {value}>
 				{#each yearItems as yearItem (yearItem.value)}

package/dist/components/ui/calendar/calendar.svelte.d.ts

@@ -16,6 +16,6 @@ type $$ComponentProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
         outsideMonth: boolean;
     }]>;
 };
-declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "value" | "placeholder" | "ref">;
+declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "placeholder">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/components/ui/chip/chip-group.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import type { Snippet } from "svelte";
+
+	let { class: className, children }: { class?: string; children: Snippet } = $props();
+</script>
+
+<div class={cn("flex flex-wrap gap-2", className)}>
+	{@render children()}
+</div>

package/dist/components/ui/chip/chip-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    children: Snippet;
+};
+declare const ChipGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChipGroup = ReturnType<typeof ChipGroup>;
+export default ChipGroup;

package/dist/components/ui/chip/chip.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import { X } from "lucide-svelte";
+	import type { Snippet } from "svelte";
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	const chipVariants = tv({
+		base: "inline-flex items-center justify-center rounded-full text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+			},
+			size: {
+				sm: "h-6 px-2.5 text-[10px]",
+				default: "h-8 px-3 text-xs",
+				lg: "h-9 px-4 text-sm",
+			},
+			active: {
+				true: "",
+				false: "",
+			},
+		},
+		compoundVariants: [
+			{
+				variant: "outline",
+				active: true,
+				class: "bg-primary text-primary-foreground border-primary hover:bg-primary/90 hover:text-primary-foreground",
+			},
+			{
+				variant: "ghost",
+				active: true,
+				class: "bg-accent text-accent-foreground",
+			},
+		],
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+			active: false,
+		},
+	});
+
+	type Variant = VariantProps<typeof chipVariants>["variant"];
+	type Size = VariantProps<typeof chipVariants>["size"];
+
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		active = false,
+		disabled = false,
+		removable = false,
+		onclick,
+		onremove,
+		href,
+		children,
+		avatar,
+		icon,
+		...rest
+	}: {
+		class?: string;
+		variant?: Variant;
+		size?: Size;
+		active?: boolean;
+		disabled?: boolean;
+		removable?: boolean;
+		onclick?: (e: MouseEvent) => void;
+		onremove?: (e: MouseEvent) => void;
+		href?: string;
+		children?: Snippet;
+		avatar?: Snippet;
+		icon?: Snippet;
+		[key: string]: any;
+	} = $props();
+
+	const isInteractive = !!onclick || !!href || active !== undefined;
+	const Element = href ? "a" : isInteractive ? "button" : "div";
+
+	function handleClick(e: MouseEvent) {
+		if (disabled) return;
+		onclick?.(e);
+	}
+
+	function handleRemove(e: MouseEvent) {
+		e.stopPropagation();
+		if (disabled) return;
+		onremove?.(e);
+	}
+</script>
+
+<svelte:element
+	this={Element}
+	class={cn(chipVariants({ variant, size, active }), className)}
+	onclick={isInteractive ? handleClick : undefined}
+	{href}
+	{disabled}
+	tabindex={isInteractive ? 0 : -1}
+	aria-pressed={isInteractive ? active : undefined}
+	{...rest}
+>
+	{#if avatar}
+		<span class={cn("mr-2 -ml-1 flex shrink-0", size === "sm" && "mr-1.5 -ml-1")}>
+			{@render avatar()}
+		</span>
+	{:else if icon}
+		<span class={cn("mr-2 flex shrink-0", size === "sm" && "mr-1.5")}>
+			{@render icon()}
+		</span>
+	{/if}
+
+	<span>
+		{#if children}
+			{@render children()}
+		{/if}
+	</span>
+
+	{#if removable}
+		<button
+			type="button"
+			class={cn(
+				"-mr-1 ml-2 flex items-center justify-center rounded-full hover:bg-black/10 dark:hover:bg-white/20",
+				size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4"
+			)}
+			onclick={handleRemove}
+			aria-label="Remove"
+		>
+			<X class="h-3 w-3" />
+		</button>
+	{/if}
+</svelte:element>

package/dist/components/ui/chip/chip.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+declare const Chip: import("svelte").Component<{
+    [key: string]: any;
+    class?: string;
+    variant?: "default" | "outline" | "secondary" | "ghost" | undefined;
+    size?: "default" | "sm" | "lg" | undefined;
+    active?: boolean;
+    disabled?: boolean;
+    removable?: boolean;
+    onclick?: (e: MouseEvent) => void;
+    onremove?: (e: MouseEvent) => void;
+    href?: string;
+    children?: Snippet;
+    avatar?: Snippet;
+    icon?: Snippet;
+}, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

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

@@ -0,0 +1,3 @@
+import Chip from "./chip.svelte";
+import ChipGroup from "./chip-group.svelte";
+export { Chip as Root, ChipGroup as Group };

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

@@ -0,0 +1,3 @@
+import Chip from "./chip.svelte";
+import ChipGroup from "./chip-group.svelte";
+export { Chip as Root, ChipGroup as Group };