@tanglemedia/svelte-starter-ui-shadcn 0.1.0 → 0.2.0

package/dist/lib/components/ui/toggle-group/toggle-group.svelte

@@ -1,12 +1,21 @@
 <script lang="ts" module>
 	import { getContext, setContext } from "svelte";
-	import type { ToggleVariants } from "../toggle/index.js";
-	export function setToggleGroupCtx(props: ToggleVariants) {
+	import { toggleVariants } from "../toggle/index.js";
+	import type { VariantProps } from "tailwind-variants";
+
+	type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+	interface ToggleGroupContext extends ToggleVariants {
+		spacing?: number;
+		orientation?: "horizontal" | "vertical";
+	}
+
+	export function setToggleGroupCtx(props: ToggleGroupContext) {
 		setContext("toggleGroup", props);
 	}
 
 	export function getToggleGroupCtx() {
-		return getContext<ToggleVariants>("toggleGroup");
+		return getContext<Required<ToggleGroupContext>>("toggleGroup");
 	}
 </script>
 
@@ -19,13 +28,29 @@
 		value = $bindable(),
 		class: className,
 		size = "default",
+		spacing = 0,
+		orientation = "horizontal",
 		variant = "default",
 		...restProps
-	}: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
+	}: ToggleGroupPrimitive.RootProps &
+		ToggleVariants & {
+			spacing?: number;
+			orientation?: "horizontal" | "vertical";
+		} = $props();
 
 	setToggleGroupCtx({
-		variant,
-		size,
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+		get spacing() {
+			return spacing;
+		},
+		get orientation() {
+			return orientation;
+		},
 	});
 </script>
 
@@ -36,11 +61,14 @@ get along, so we shut typescript up by casting `value` to `never`.
 <ToggleGroupPrimitive.Root
 	bind:value={value as never}
 	bind:ref
+	{orientation}
 	data-slot="toggle-group"
 	data-variant={variant}
 	data-size={size}
+	data-spacing={spacing}
+	style={`--gap: ${spacing}`}
 	class={cn(
-		"group/toggle-group data-[variant=outline]:shadow-xs flex w-fit items-center rounded-md",
+		"rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
 		className
 	)}
 	{...restProps}

package/dist/lib/components/ui/toggle-group/toggle-group.svelte.d.ts

@@ -1,8 +1,17 @@
-import type { ToggleVariants } from "../toggle/index.js";
-export declare function setToggleGroupCtx(props: ToggleVariants): void;
-export declare function getToggleGroupCtx(): ToggleVariants;
+import { toggleVariants } from "../toggle/index.js";
+import type { VariantProps } from "tailwind-variants";
+type ToggleVariants = VariantProps<typeof toggleVariants>;
+interface ToggleGroupContext extends ToggleVariants {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+}
+export declare function setToggleGroupCtx(props: ToggleGroupContext): void;
+export declare function getToggleGroupCtx(): Required<ToggleGroupContext>;
 import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
-type $$ComponentProps = ToggleGroupPrimitive.RootProps & ToggleVariants;
-declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
+type $$ComponentProps = ToggleGroupPrimitive.RootProps & ToggleVariants & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+};
+declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;
 export default ToggleGroup;

package/dist/lib/components/ui/tooltip/index.d.ts

@@ -1,6 +1,6 @@
-import Root from "./tooltip.svelte";
-import Trigger from "./tooltip-trigger.svelte";
 import Content from "./tooltip-content.svelte";
-import Provider from "./tooltip-provider.svelte";
 import Portal from "./tooltip-portal.svelte";
+import Provider from "./tooltip-provider.svelte";
+import Trigger from "./tooltip-trigger.svelte";
+import Root from "./tooltip.svelte";
 export { Root, Trigger, Content, Provider, Portal, Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, Portal as TooltipPortal, };

package/dist/lib/components/ui/tooltip/index.js

@@ -1,8 +1,8 @@
-import Root from "./tooltip.svelte";
-import Trigger from "./tooltip-trigger.svelte";
 import Content from "./tooltip-content.svelte";
-import Provider from "./tooltip-provider.svelte";
 import Portal from "./tooltip-portal.svelte";
+import Provider from "./tooltip-provider.svelte";
+import Trigger from "./tooltip-trigger.svelte";
+import Root from "./tooltip.svelte";
 export { Root, Trigger, Content, Provider, Portal, 
 //
 Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, Portal as TooltipPortal, };

package/dist/lib/components/ui/tooltip/tooltip-content.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
 	import { cn } from "../../utils.js";
+	import type { WithoutChildrenOrChild } from "../../utils.js";
 	import TooltipPortal from "./tooltip-portal.svelte";
 	import type { ComponentProps } from "svelte";
-	import type { WithoutChildrenOrChild } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -27,7 +27,7 @@
 		{sideOffset}
 		{side}
 		class={cn(
-			"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
+			"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-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 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin) bg-foreground text-background",
 			className
 		)}
 		{...restProps}
@@ -37,11 +37,7 @@
 			{#snippet child({ props })}
 				<div
 					class={cn(
-						"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
-						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]",
-						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]",
-						"data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2",
-						"data-[side=left]:-translate-y-[calc(50%_-_3px)]",
+						"size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] z-50 bg-foreground fill-foreground data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)] data-[side=left]:-translate-y-[calc(50%_-_3px)] data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2 data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]",
 						arrowClasses
 					)}
 					{...props}

package/dist/lib/components/ui/tooltip/tooltip-content.svelte.d.ts

@@ -1,7 +1,7 @@
 import { Tooltip as TooltipPrimitive } from "bits-ui";
+import type { WithoutChildrenOrChild } from "../../utils.js";
 import TooltipPortal from "./tooltip-portal.svelte";
 import type { ComponentProps } from "svelte";
-import type { WithoutChildrenOrChild } from "../../utils.js";
 type $$ComponentProps = TooltipPrimitive.ContentProps & {
     arrowClasses?: string;
     portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;

package/dist/lib/components/ui/tooltip/tooltip-provider.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
 
-	let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+	let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps = $props();
 </script>
 
-<TooltipPrimitive.Provider {...restProps} />
+<TooltipPrimitive.Provider {delayDuration} {...restProps} />

package/dist/lib/components/ui/tooltip/tooltip-trigger.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">
+<script lang="ts" generics="T = never">
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
 
-	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps<T> = $props();
 </script>
 
 <TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

package/dist/lib/components/ui/tooltip/tooltip-trigger.svelte.d.ts

@@ -1,4 +1,25 @@
 import { Tooltip as TooltipPrimitive } from "bits-ui";
-declare const TooltipTrigger: import("svelte").Component<TooltipPrimitive.TriggerProps, {}, "ref">;
-type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
+declare function $$render<T = never>(): {
+    props: TooltipPrimitive.TriggerProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = never> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = never>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = never>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TooltipTrigger: $$IsomorphicComponent;
+type TooltipTrigger<T = never> = InstanceType<typeof TooltipTrigger<T>>;
 export default TooltipTrigger;

package/dist/lib/components/ui/tooltip/tooltip.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">
+<script lang="ts" generics="T = never">
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
 
-	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps<T> = $props();
 </script>
 
 <TooltipPrimitive.Root bind:open {...restProps} />

package/dist/lib/components/ui/tooltip/tooltip.svelte.d.ts

@@ -1,4 +1,25 @@
 import { Tooltip as TooltipPrimitive } from "bits-ui";
-declare const Tooltip: import("svelte").Component<TooltipPrimitive.RootProps, {}, "open">;
-type Tooltip = ReturnType<typeof Tooltip>;
+declare function $$render<T = never>(): {
+    props: TooltipPrimitive.RootProps<T>;
+    exports: {};
+    bindings: "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = never> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "open";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = never>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = never>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Tooltip: $$IsomorphicComponent;
+type Tooltip<T = never> = InstanceType<typeof Tooltip<T>>;
 export default Tooltip;

package/dist/lib/hooks/index.d.ts

@@ -1 +1 @@
-export * from './is-mobile.svelte';
+export * from "./is-mobile.svelte";

package/dist/lib/hooks/index.js

@@ -1 +1 @@
-export * from './is-mobile.svelte';
+export * from "./is-mobile.svelte";

package/dist/lib/hooks/is-mobile.svelte.test.d.ts

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

package/dist/lib/hooks/is-mobile.svelte.test.js

@@ -0,0 +1,37 @@
+import { describe, it, expect, vi } from 'vitest';
+import { IsMobile } from './is-mobile.svelte.js';
+// MediaQuery from svelte/reactivity wraps the query string in parentheses
+// and exposes the result via `.current`, not `.matches`.
+describe('IsMobile', () => {
+    it('passes the correct max-width query for the default 768 breakpoint', () => {
+        const spy = vi.mocked(window.matchMedia);
+        spy.mockClear();
+        new IsMobile();
+        expect(spy).toHaveBeenCalledWith('(max-width: 767px)');
+    });
+    it('passes the correct max-width query for a custom breakpoint', () => {
+        const spy = vi.mocked(window.matchMedia);
+        spy.mockClear();
+        new IsMobile(1024);
+        expect(spy).toHaveBeenCalledWith('(max-width: 1023px)');
+    });
+    it('reflects matches: false from the matchMedia mock via .current', () => {
+        // test-setup mocks matchMedia to return matches: false
+        const isMobile = new IsMobile();
+        expect(isMobile.current).toBe(false);
+    });
+    it('reflects matches: true when matchMedia returns true via .current', () => {
+        vi.mocked(window.matchMedia).mockReturnValueOnce({
+            matches: true,
+            media: '(max-width: 767px)',
+            onchange: null,
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            dispatchEvent: vi.fn(),
+        });
+        const isMobile = new IsMobile();
+        expect(isMobile.current).toBe(true);
+    });
+});

package/dist/lib/hooks/use-clipboard.svelte.test.d.ts

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

package/dist/lib/hooks/use-clipboard.svelte.test.js

@@ -0,0 +1,55 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { UseClipboard } from './use-clipboard.svelte.js';
+describe('UseClipboard', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        Object.assign(navigator, {
+            clipboard: { writeText: vi.fn().mockResolvedValue(undefined) },
+        });
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('has undefined status and false copied initially', () => {
+        const clipboard = new UseClipboard();
+        expect(clipboard.status).toBeUndefined();
+        expect(clipboard.copied).toBe(false);
+    });
+    it('sets status to success and copied to true after a successful copy', async () => {
+        const clipboard = new UseClipboard();
+        await clipboard.copy('hello');
+        expect(clipboard.status).toBe('success');
+        expect(clipboard.copied).toBe(true);
+    });
+    it('sets status to failure when the clipboard API throws', async () => {
+        vi.mocked(navigator.clipboard.writeText).mockRejectedValueOnce(new Error('denied'));
+        const clipboard = new UseClipboard();
+        await clipboard.copy('hello');
+        expect(clipboard.status).toBe('failure');
+        expect(clipboard.copied).toBe(false);
+    });
+    it('resets status to undefined after the default delay', async () => {
+        const clipboard = new UseClipboard({ delay: 500 });
+        await clipboard.copy('hello');
+        expect(clipboard.status).toBe('success');
+        vi.advanceTimersByTime(500);
+        expect(clipboard.status).toBeUndefined();
+    });
+    it('respects a custom delay before resetting', async () => {
+        const clipboard = new UseClipboard({ delay: 1000 });
+        await clipboard.copy('hello');
+        vi.advanceTimersByTime(999);
+        expect(clipboard.status).toBe('success');
+        vi.advanceTimersByTime(1);
+        expect(clipboard.status).toBeUndefined();
+    });
+    it('clears the previous timeout when copy is called again quickly', async () => {
+        const clipboard = new UseClipboard({ delay: 500 });
+        await clipboard.copy('first');
+        await clipboard.copy('second');
+        vi.advanceTimersByTime(499);
+        expect(clipboard.status).toBe('success');
+        vi.advanceTimersByTime(1);
+        expect(clipboard.status).toBeUndefined();
+    });
+});

package/dist/lib/index.d.ts

@@ -1,5 +1,5 @@
-export * from './components/utils.ts';
-export * from './hooks/index.ts';
-export * from './components/ui/index.ts';
-export * from './components/extended/index.ts';
-export * from './components/extra/index.ts';
+export * from "./components/utils.ts";
+export * from "./hooks/index.ts";
+export * from "./components/ui/index.ts";
+export * from "./components/extended/index.ts";
+export * from "./components/extra/index.ts";