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

package/src/lib/components/extended/skeletons/index.ts

@@ -0,0 +1,9 @@
+import Grid from "./skeleton-grid.svelte";
+import List from "./skeleton-list.svelte";
+import Article from "./skeleton-article.svelte";
+import Feed from "./skeleton-feed.svelte";
+import Profile from "./skeleton-profile.svelte";
+import Square from "./skeleton-square.svelte";
+import Message from "./skeleton-message.svelte";
+
+export { Grid, Article, Feed, Profile, Square, List, Message };

package/src/lib/components/extended/skeletons/skeleton-article.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+  import { cn } from '$lib/components/utils';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    variant?: 'simple' | 'default';
+  } & HTMLAttributes<HTMLDivElement>;
+
+  const { class: cls, variant = 'default', ...rest }: Props = $props();
+</script>
+
+<div class={cn('flex flex-col space-y-3', cls)} {...rest}>
+  <Skeleton class="h-[200px] w-full rounded-xl" />
+  <div class="space-y-2">
+    {#if variant === 'simple'}
+      <Skeleton class="h-4 w-3/4" />
+      <Skeleton class="h-4 w-1/2" />
+      <div class="flex items-center space-x-2 pt-2">
+        <Skeleton class="h-6 w-16" />
+        <Skeleton class="h-6 w-20" />
+      </div>
+    {:else}
+      <div class="flex items-center space-x-2">
+        <Skeleton class="h-8 w-8 rounded-ful" />
+        <Skeleton class="h-4 w-24" />
+      </div>
+      <Skeleton class="h-5 w-full" />
+      <Skeleton class="h-4 w-4/5" />
+      <Skeleton class="h-4 w-3/5" />
+    {/if}
+  </div>
+</div>

package/src/lib/components/extended/skeletons/skeleton-feed.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+  import { cn } from '$lib/components/utils';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    variant?: 'simple' | 'default';
+  } & HTMLAttributes<HTMLDivElement>;
+
+  const { class: cls, variant = 'default', ...rest }: Props = $props();
+</script>
+
+<div
+  class={cn('flex items-center space-x-4 p-3 border rounded-lg', cls)}
+  {...rest}
+>
+  <Skeleton class="h-10 w-10 rounded-full flex-shrink-0" />
+  <div class="flex-1 space-y-2">
+    <div class="flex items-center justify-between">
+      <Skeleton class="h-4 w-24" />
+      <Skeleton class="h-3 w-12" />
+    </div>
+    <Skeleton class="h-3 w-full" />
+    <Skeleton class="h-3 w-3/4" />
+  </div>
+  <div class="flex flex-col space-y-1">
+    <Skeleton class="h-6 w-6 rounded" />
+    <Skeleton class="h-6 w-6 rounded" />
+  </div>
+</div>

package/src/lib/components/extended/skeletons/skeleton-grid.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+  const gridClasses = {
+    base: {
+      1: `grid-cols-1`,
+      2: `grid-cols-2`,
+      3: `grid-cols-3`,
+      4: `grid-cols-4`,
+    },
+    md: {
+      1: `md:grid-cols-1`,
+      2: `md:grid-cols-2`,
+      3: `md:grid-cols-3`,
+      4: `md:grid-cols-4`,
+    },
+    lg: {
+      1: `lg:grid-cols-1`,
+      2: `lg:grid-cols-2`,
+      3: `lg:grid-cols-3`,
+      4: `lg:grid-cols-4`,
+    },
+    xl: {
+      1: `xl:grid-cols-1`,
+      2: `xl:grid-cols-2`,
+      3: `xl:grid-cols-3`,
+      4: `xl:grid-cols-4`,
+    },
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from '$lib/components/utils';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type ColNum = 1 | 2 | 3 | 4;
+
+  type Props = {
+    cols?:
+      | {
+          lg?: ColNum;
+          xl?: ColNum;
+          md?: ColNum;
+          base: ColNum;
+        }
+      | ColNum;
+    children?: Snippet<[]>;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  const {
+    class: cls,
+    cols = { md: 2, base: 1 },
+    children,
+    ...rest
+  }: Props = $props();
+
+  function gridCols(k: keyof typeof gridClasses, n: ColNum) {
+    return gridClasses[k][n];
+  }
+
+  const gridCls = $derived.by(() => {
+    if (typeof cols === 'number') {
+      return gridCols('base', cols);
+    }
+
+    return Object.entries(cols)
+      .map(([k, v]) => gridCols(k as keyof typeof gridClasses, v))
+      .join(' ');
+  });
+</script>
+
+<div class={cn('grid gap-6 w-full max-w-2xl mx-auto', gridCls, cls)} {...rest}>
+  {@render children?.()}
+</div>

package/src/lib/components/extended/skeletons/skeleton-list.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+  import { cn } from '$lib/components/utils';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import SkeletonFeed from './skeleton-feed.svelte';
+
+  type Props = {
+    children?: Snippet<[]>;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  const { children, class: cls, ...rest }: Props = $props();
+</script>
+
+<div class={cn('w-full max-w-md space-y-4', cls)} {...rest}>
+  <!-- /* List header */ -->
+  <div class="flex items-center justify-between">
+    <Skeleton class="h-6 w-32" />
+    <Skeleton class="h-8 w-20 rounded-md" />
+  </div>
+  {#if children}
+    {@render children()}
+  {:else}
+    {#each { length: 6 }, i}
+      <SkeletonFeed />
+    {/each}
+  {/if}
+  <!-- /* Load more button */ -->
+  <div class="flex justify-center pt-4">
+    <Skeleton class="h-9 w-28 rounded-md" />
+  </div>
+</div>

package/src/lib/components/extended/skeletons/skeleton-message.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+  import { cn } from '$lib/components/utils';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    message?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  const { message = 'Loading...', class: cls, ...rest }: Props = $props();
+</script>
+
+<div
+  class={cn('flex flex-col items-center justify-center space-y-3 p-6', cls)}
+  {...rest}
+>
+  <div class="flex items-center space-x-2">
+    <Skeleton class="h-4 w-4 rounded-full" />
+    <p class="text-sm text-muted-foreground animate-pulse">{message}</p>
+  </div>
+  <Skeleton class="h-3 w-32" />
+</div>

package/src/lib/components/extended/skeletons/skeleton-profile.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+  import { cn } from '$lib/components/utils';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    variant?: 'simple' | 'default';
+  } & HTMLAttributes<HTMLDivElement>;
+
+  const { class: cls, variant = 'default', ...rest }: Props = $props();
+</script>
+
+<div class={cn('flex items-center space-x-4', cls)} {...rest}>
+  <Skeleton class="size-12 rounded-full" />
+  <div class="space-y-2">
+    <Skeleton class="h-4 w-[250px]" />
+    <Skeleton class="h-4 w-[200px]" />
+  </div>
+</div>

package/src/lib/components/extended/skeletons/skeleton-square.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+</script>
+
+<Skeleton class="h-[200px] w-full rounded-xl" />

package/src/lib/components/extended/skeletons/skeletons.svelte.test.ts

@@ -0,0 +1,96 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import SkeletonArticle from './skeleton-article.svelte';
+import SkeletonFeed from './skeleton-feed.svelte';
+import SkeletonGrid from './skeleton-grid.svelte';
+import SkeletonList from './skeleton-list.svelte';
+import SkeletonMessage from './skeleton-message.svelte';
+import SkeletonProfile from './skeleton-profile.svelte';
+import SkeletonSquare from './skeleton-square.svelte';
+
+describe('SkeletonArticle', () => {
+  it('renders without errors', () => {
+    const { container } = render(SkeletonArticle);
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('renders the simple variant', () => {
+    const { container } = render(SkeletonArticle, { props: { variant: 'simple' } });
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('accepts extra HTML attributes', () => {
+    const { container } = render(SkeletonArticle, { props: { 'data-testid': 'article' } });
+    expect(container.querySelector('[data-testid="article"]')).toBeTruthy();
+  });
+});
+
+describe('SkeletonFeed', () => {
+  it('renders without errors', () => {
+    const { container } = render(SkeletonFeed);
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('accepts extra HTML attributes', () => {
+    const { container } = render(SkeletonFeed, { props: { 'data-testid': 'feed' } });
+    expect(container.querySelector('[data-testid="feed"]')).toBeTruthy();
+  });
+});
+
+describe('SkeletonGrid', () => {
+  it('renders without errors', () => {
+    const { container } = render(SkeletonGrid);
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('applies a numeric cols value', () => {
+    const { container } = render(SkeletonGrid, { props: { cols: 3 } });
+    const el = container.firstElementChild;
+    expect(el?.className).toContain('grid-cols-3');
+  });
+
+  it('applies breakpoint-specific cols object', () => {
+    const { container } = render(SkeletonGrid, { props: { cols: { base: 1, md: 2 } } });
+    const el = container.firstElementChild;
+    expect(el?.className).toContain('grid-cols-1');
+    expect(el?.className).toContain('md:grid-cols-2');
+  });
+});
+
+describe('SkeletonList', () => {
+  it('renders without errors', () => {
+    const { container } = render(SkeletonList);
+    expect(container.firstChild).toBeTruthy();
+  });
+});
+
+describe('SkeletonMessage', () => {
+  it('renders the default loading message', () => {
+    const { getByText } = render(SkeletonMessage);
+    expect(getByText('Loading...')).toBeTruthy();
+  });
+
+  it('renders a custom message', () => {
+    const { getByText } = render(SkeletonMessage, { props: { message: 'Fetching data' } });
+    expect(getByText('Fetching data')).toBeTruthy();
+  });
+});
+
+describe('SkeletonProfile', () => {
+  it('renders without errors', () => {
+    const { container } = render(SkeletonProfile);
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('accepts extra HTML attributes', () => {
+    const { container } = render(SkeletonProfile, { props: { 'data-testid': 'profile' } });
+    expect(container.querySelector('[data-testid="profile"]')).toBeTruthy();
+  });
+});
+
+describe('SkeletonSquare', () => {
+  it('renders a skeleton element', () => {
+    const { container } = render(SkeletonSquare);
+    expect(container.firstChild).toBeTruthy();
+  });
+});

package/src/lib/components/extra/button/button.svelte

@@ -0,0 +1,128 @@
+<!--
+	Installed from @ieedan/shadcn-svelte-extras
+-->
+
+<script lang="ts" module>
+	import type { WithChildren, WithoutChildren } from 'bits-ui';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const buttonVariants = tv({
+		base: "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 relative inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden rounded-md text-sm font-medium whitespace-nowrap outline-hidden transition-all select-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-2xs',
+				destructive:
+					'bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 text-white shadow-2xs',
+				outline:
+					'bg-background hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 border shadow-2xs',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-2xs',
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				link: 'text-primary underline-offset-4 hover:underline'
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				icon: 'size-9'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+	export type ButtonPropsWithoutHTML = WithChildren<{
+		ref?: HTMLElement | null;
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		loading?: boolean;
+		onClickPromise?: (
+			e: MouseEvent & {
+				currentTarget: EventTarget & HTMLButtonElement;
+			}
+		) => Promise<void>;
+	}>;
+
+	export type AnchorElementProps = ButtonPropsWithoutHTML &
+		WithoutChildren<Omit<HTMLAnchorAttributes, 'href' | 'type'>> & {
+			href: HTMLAnchorAttributes['href'];
+			type?: never;
+			disabled?: HTMLButtonAttributes['disabled'];
+		};
+
+	export type ButtonElementProps = ButtonPropsWithoutHTML &
+		WithoutChildren<Omit<HTMLButtonAttributes, 'type' | 'href'>> & {
+			type?: HTMLButtonAttributes['type'];
+			href?: never;
+			disabled?: HTMLButtonAttributes['disabled'];
+		};
+
+	export type ButtonProps = AnchorElementProps | ButtonElementProps;
+</script>
+
+<script lang="ts">
+	import { cn } from '$lib/utils/utils.js';
+	import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle';
+
+	let {
+		ref = $bindable(null),
+		variant = 'default',
+		size = 'default',
+		href = undefined,
+		type = 'button',
+		loading = false,
+		disabled = false,
+		tabindex = 0,
+		onclick,
+		onClickPromise,
+		class: className,
+		children,
+		...rest
+	}: ButtonProps = $props();
+</script>
+
+<!-- This approach to disabled links is inspired by bits-ui see: https://github.com/huntabyte/bits-ui/pull/1055 -->
+<svelte:element
+	this={href ? 'a' : 'button'}
+	{...rest}
+	data-slot="button"
+	type={href ? undefined : type}
+	href={href && !disabled ? href : undefined}
+	disabled={href ? undefined : disabled || loading}
+	aria-disabled={href ? disabled : undefined}
+	role={href && disabled ? 'link' : undefined}
+	tabindex={href && disabled ? -1 : tabindex}
+	class={cn(buttonVariants({ variant, size }), className)}
+	bind:this={ref}
+	onclick={async (
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		e: any
+	) => {
+		onclick?.(e);
+
+		if (type === undefined) return;
+
+		if (onClickPromise) {
+			loading = true;
+
+			await onClickPromise(e);
+
+			loading = false;
+		}
+	}}
+>
+	{#if type !== undefined && loading}
+		<div class="absolute flex size-full place-items-center justify-center bg-inherit">
+			<div class="flex animate-spin place-items-center justify-center">
+				<LoaderCircleIcon class="size-4" />
+			</div>
+		</div>
+		<span class="sr-only">Loading</span>
+	{/if}
+	{@render children?.()}
+</svelte:element>

package/src/lib/components/extra/button/index.ts

@@ -0,0 +1,27 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+import Root, {
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  type AnchorElementProps,
+  type ButtonElementProps,
+  type ButtonPropsWithoutHTML,
+  buttonVariants,
+} from "./button.svelte";
+
+export {
+  Root,
+  type ButtonProps as Props,
+  //
+  Root as Button,
+  buttonVariants,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  type AnchorElementProps,
+  type ButtonElementProps,
+  type ButtonPropsWithoutHTML,
+};

package/src/lib/components/extra/copy-button/copy-button.svelte

@@ -0,0 +1,73 @@
+<!--
+	Installed from @ieedan/shadcn-svelte-extras
+-->
+
+<script lang="ts">
+	import { Button } from '$lib/components/extra/button';
+	import { UseClipboard } from '$lib/hooks/use-clipboard.svelte';
+	import { cn } from '$lib/utils/utils';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import CopyIcon from '@lucide/svelte/icons/copy';
+	import XIcon from '@lucide/svelte/icons/x';
+	import { scale } from 'svelte/transition';
+	import type { CopyButtonProps } from './types';
+
+	let {
+		ref = $bindable(null),
+		text,
+		icon,
+		animationDuration = 500,
+		variant = 'ghost',
+		size = 'icon',
+		onCopy,
+		class: className,
+		tabindex = -1,
+		children,
+		...rest
+	}: CopyButtonProps = $props();
+
+	// this way if the user passes text then the button will be the default size
+	if (size === 'icon' && children) {
+		size = 'default';
+	}
+
+	const clipboard = new UseClipboard();
+</script>
+
+<Button
+	{...rest}
+	bind:ref
+	{variant}
+	{size}
+	{tabindex}
+	class={cn('flex items-center gap-2', className)}
+	type="button"
+	name="copy"
+	onclick={async () => {
+		const status = await clipboard.copy(text);
+
+		onCopy?.(status);
+	}}
+>
+	{#if clipboard.status === 'success'}
+		<div in:scale={{ duration: animationDuration, start: 0.85 }}>
+			<CheckIcon tabindex={-1} />
+			<span class="sr-only">Copied</span>
+		</div>
+	{:else if clipboard.status === 'failure'}
+		<div in:scale={{ duration: animationDuration, start: 0.85 }}>
+			<XIcon tabindex={-1} />
+			<span class="sr-only">Failed to copy</span>
+		</div>
+	{:else}
+		<div in:scale={{ duration: animationDuration, start: 0.85 }}>
+			{#if icon}
+				{@render icon()}
+			{:else}
+				<CopyIcon tabindex={-1} />
+			{/if}
+			<span class="sr-only">Copy</span>
+		</div>
+	{/if}
+	{@render children?.()}
+</Button>

package/src/lib/components/extra/copy-button/index.ts

@@ -0,0 +1,7 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+import CopyButton from "./copy-button.svelte";
+
+export { CopyButton };

package/src/lib/components/extra/copy-button/types.ts

@@ -0,0 +1,22 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+import type { Snippet } from "svelte";
+import type { ButtonPropsWithoutHTML } from "$lib/components/extra/button";
+import type { UseClipboard } from "$lib/hooks/use-clipboard.svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { WithChildren, WithoutChildren } from "bits-ui";
+
+export type CopyButtonPropsWithoutHTML = WithChildren<
+  Pick<ButtonPropsWithoutHTML, "size" | "variant"> & {
+    ref?: HTMLButtonElement | null;
+    text: string;
+    icon?: Snippet<[]>;
+    animationDuration?: number;
+    onCopy?: (status: UseClipboard["status"]) => void;
+  }
+>;
+
+export type CopyButtonProps = CopyButtonPropsWithoutHTML &
+  WithoutChildren<HTMLAttributes<HTMLButtonElement>>;

package/src/lib/components/extra/index.ts

@@ -0,0 +1 @@
+export * from "./copy-button/index.js";

package/src/lib/components/extra/types.ts

@@ -0,0 +1,2 @@
+export type * from "./copy-button/types.js";
+export type * from "./code/types.js";

package/src/lib/components/ui/accordion/accordion-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,13 +12,16 @@
 
 <AccordionPrimitive.Content
 	bind:ref
-	class={cn(
-		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-		className
-	)}
+	data-slot="accordion-content"
+	class="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
 	{...restProps}
 >
-	<div class="pb-4 pt-0">
+	<div
+		class={cn(
+			"pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+			className
+		)}
+	>
 		{@render children?.()}
 	</div>
 </AccordionPrimitive.Content>

package/src/lib/components/ui/accordion/accordion-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -9,4 +9,9 @@
 	}: AccordionPrimitive.ItemProps = $props();
 </script>
 
-<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />
+<AccordionPrimitive.Item
+	bind:ref
+	data-slot="accordion-item"
+	class={cn("not-last:border-b", className)}
+	{...restProps}
+/>

package/src/lib/components/ui/accordion/accordion-root.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="accordion"
+	{...restProps}
+/>