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

package/dist/app.css

@@ -0,0 +1,121 @@
+@import "tailwindcss";
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/index.ts';
+export type * from './lib/components/extra/types.ts';

package/dist/index.js

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

package/dist/lib/components/extended/confirmation/confirmation-prompt.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { AlertDialog, buttonVariants } from '@tanglemedia/svelte-starter-ui-shadcn';
+	import { useConfirmationDialog } from './confirmation-state.svelte';
+
+	const dialog = useConfirmationDialog();
+
+	const { title, description, onClose, onCancel, onConfirm } = $derived(dialog.props);
+
+	const close = (s: boolean) => {
+		dialog.hide();
+		if (onClose) {
+			onClose(s);
+		}
+	};
+
+	// const handleOnClose = (s: boolean) => {
+	// 	close(s);
+	// };
+
+	const handleOnConfirm = () => {
+		onConfirm?.();
+		close(true);
+	};
+	const handleOnCancel = () => {
+		onCancel?.();
+		close(false);
+	};
+</script>
+
+<AlertDialog.Root bind:open={dialog.open}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>{title}</AlertDialog.Title>
+			<AlertDialog.Description>
+				{description}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel onclick={handleOnCancel}>Cancel</AlertDialog.Cancel>
+			<AlertDialog.Action onclick={handleOnConfirm}>Continue</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

package/dist/lib/components/extended/confirmation/confirmation-prompt.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ConfirmationPrompt: import("svelte").Component<Record<string, never>, {}, "">;
+type ConfirmationPrompt = ReturnType<typeof ConfirmationPrompt>;
+export default ConfirmationPrompt;

package/dist/lib/components/extended/confirmation/confirmation-provider.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	import { initConfirmationDialog } from './confirmation-state.svelte';
+	import ConfirmationPrompt from './confirmation-prompt.svelte';
+
+	type Props = { children?: Snippet<[]> };
+
+	const { children }: Props = $props();
+
+	initConfirmationDialog();
+</script>
+
+{@render children?.()}
+
+<ConfirmationPrompt />

package/dist/lib/components/extended/confirmation/confirmation-provider.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children?: Snippet<[]>;
+};
+declare const ConfirmationProvider: import("svelte").Component<Props, {}, "">;
+type ConfirmationProvider = ReturnType<typeof ConfirmationProvider>;
+export default ConfirmationProvider;

package/dist/lib/components/extended/confirmation/confirmation-state.svelte.d.ts

@@ -0,0 +1,18 @@
+export type ConfirmationDialogProps = {
+    title?: string;
+    description?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    onClose?: (state: boolean) => void;
+};
+export declare class ConfirmationDialogState {
+    props: ConfirmationDialogProps;
+    open: boolean;
+    toggle(): void;
+    show(): void;
+    hide(): void;
+    confirm(props: Partial<ConfirmationDialogProps>): Promise<boolean>;
+}
+export declare function initConfirmationDialog(): void;
+export declare function getConfirmationDialog(): ConfirmationDialogState | undefined;
+export declare function useConfirmationDialog(): ConfirmationDialogState;

package/dist/lib/components/extended/confirmation/confirmation-state.svelte.js

@@ -0,0 +1,48 @@
+import { getContext, setContext } from "svelte";
+const defaultProps = {
+    title: 'Are you sure?',
+    description: 'This action cannot be undone.'
+};
+export class ConfirmationDialogState {
+    props = $state({ ...defaultProps });
+    open = $state(false);
+    toggle() {
+        this.open = !this.open;
+    }
+    show() {
+        this.open = true;
+    }
+    hide() {
+        this.open = false;
+    }
+    async confirm(props) {
+        const p = { ...defaultProps, ...props, };
+        return new Promise((ok) => {
+            this.show();
+            const { onClose, ...rest } = p;
+            this.props = {
+                ...rest,
+                onClose: (s) => {
+                    if (onClose) {
+                        onClose(s);
+                    }
+                    ok(s);
+                }
+            };
+        });
+    }
+}
+const ctxKey = `--confirmation-dialog`;
+export function initConfirmationDialog() {
+    setContext(Symbol.for(ctxKey), new ConfirmationDialogState);
+}
+export function getConfirmationDialog() {
+    return getContext(Symbol.for(ctxKey));
+}
+export function useConfirmationDialog() {
+    const dialog = getConfirmationDialog();
+    if (!dialog) {
+        throw Error('Dialog has not been initialized. Please make sure you have called to confirmation provider');
+    }
+    return dialog;
+}

package/dist/lib/components/extended/confirmation/index.d.ts

@@ -0,0 +1,4 @@
+import Provider from './confirmation-provider.svelte';
+import Prompt from './confirmation-prompt.svelte';
+import { useConfirmationDialog, ConfirmationDialogState } from './confirmation-state.svelte';
+export { Provider, Provider as Root, Prompt, useConfirmationDialog, ConfirmationDialogState };

package/dist/lib/components/extended/confirmation/index.js

@@ -0,0 +1,4 @@
+import Provider from './confirmation-provider.svelte';
+import Prompt from './confirmation-prompt.svelte';
+import { useConfirmationDialog, ConfirmationDialogState } from './confirmation-state.svelte';
+export { Provider, Provider as Root, Prompt, useConfirmationDialog, ConfirmationDialogState };

package/dist/lib/components/extended/image-link/image-link.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { cn } from '@tanglemedia/svelte-starter-ui-shadcn';
+  import type { Component, Snippet } from 'svelte';
+
+  type Props = {
+    href?: string;
+    children?: Snippet<[]>;
+    top?: Snippet<[{ class?: string }]>;
+    bottom?: Snippet<[]>;
+    class?: string;
+    icon?: Component<{ class?: string }>;
+    src?: string;
+  };
+
+  let {
+    href,
+    children,
+    class: cls,
+    icon: Icon,
+    src,
+    top,
+    bottom,
+  }: Props = $props();
+
+  const base =
+    'bg-primary/85 hover:bg-primary/95 text-primary-foreground rounded-md min-h-24 text-center';
+  const topCls = 'z-10 mx-auto mb-2';
+</script>
+
+<a href={href || '##'} class={cn('relative flex justify-center', base, cls)}>
+  <div class={cn('relative flex flex-col justify-center', 'z-10')}>
+    {#if top}
+      {@render top({ class: topCls })}
+    {/if}
+    {#if Icon}
+      <Icon class={topCls} />
+      <!-- <Fa {icon} class={'z-10 mx-auto mb-2 text-4xl'} /> -->
+    {/if}
+
+    {@render children?.()}
+
+    {#if bottom}
+      {@render bottom()}
+    {/if}
+  </div>
+  {#if src}
+    <img
+      {src}
+      alt={'background image'}
+      class={'absolute z-0 h-full w-full object-cover opacity-25'}
+    />
+  {/if}
+</a>

package/dist/lib/components/extended/image-link/image-link.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Component, Snippet } from 'svelte';
+type Props = {
+    href?: string;
+    children?: Snippet<[]>;
+    top?: Snippet<[{
+        class?: string;
+    }]>;
+    bottom?: Snippet<[]>;
+    class?: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+    src?: string;
+};
+declare const ImageLink: Component<Props, {}, "">;
+type ImageLink = ReturnType<typeof ImageLink>;
+export default ImageLink;

package/dist/lib/components/extended/image-link/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './image-link.svelte';
+export { Root, Root as ImageLink };

package/dist/lib/components/extended/image-link/index.js

@@ -0,0 +1,2 @@
+import Root from './image-link.svelte';
+export { Root, Root as ImageLink };

package/dist/lib/components/extended/index.d.ts

@@ -0,0 +1,3 @@
+export * as Skeletons from './skeletons/index.ts';
+export * as ImageLink from './image-link/index.ts';
+export * as Confirmation from './confirmation/index.ts';

package/dist/lib/components/extended/index.js

@@ -0,0 +1,3 @@
+export * as Skeletons from "./skeletons/index.js";
+export * as ImageLink from "./image-link/index.js";
+export * as Confirmation from "./confirmation/index.js";

package/dist/lib/components/extended/skeletons/index.d.ts

@@ -0,0 +1,7 @@
+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';
+export { Grid, Article, Feed, Profile, Square, List };

package/dist/lib/components/extended/skeletons/index.js

@@ -0,0 +1,7 @@
+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';
+export { Grid, Article, Feed, Profile, Square, List };

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Skeleton } from '../../ui/skeleton/index.js';
+  import { cn } from '../../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/dist/lib/components/extended/skeletons/skeleton-article.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    variant?: 'simple' | 'default';
+} & HTMLAttributes<HTMLDivElement>;
+declare const SkeletonArticle: import("svelte").Component<Props, {}, "">;
+type SkeletonArticle = ReturnType<typeof SkeletonArticle>;
+export default SkeletonArticle;

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Skeleton } from '../../ui/skeleton/index.js';
+  import { cn } from '../../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/dist/lib/components/extended/skeletons/skeleton-feed.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    variant?: 'simple' | 'default';
+} & HTMLAttributes<HTMLDivElement>;
+declare const SkeletonFeed: import("svelte").Component<Props, {}, "">;
+type SkeletonFeed = ReturnType<typeof SkeletonFeed>;
+export default SkeletonFeed;

package/dist/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 '../../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/dist/lib/components/extended/skeletons/skeleton-grid.svelte.d.ts

@@ -0,0 +1,15 @@
+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>;
+declare const SkeletonGrid: import("svelte").Component<Props, {}, "">;
+type SkeletonGrid = ReturnType<typeof SkeletonGrid>;
+export default SkeletonGrid;

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Skeleton } from '../../ui/skeleton/index.js';
+  import { cn } from '../../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/dist/lib/components/extended/skeletons/skeleton-list.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    children?: Snippet<[]>;
+} & HTMLAttributes<HTMLDivElement>;
+declare const SkeletonList: import("svelte").Component<Props, {}, "">;
+type SkeletonList = ReturnType<typeof SkeletonList>;
+export default SkeletonList;

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Skeleton } from '../../ui/skeleton/index.js';
+  import { cn } from '../../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/dist/lib/components/extended/skeletons/skeleton-profile.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    variant?: 'simple' | 'default';
+} & HTMLAttributes<HTMLDivElement>;
+declare const SkeletonProfile: import("svelte").Component<Props, {}, "">;
+type SkeletonProfile = ReturnType<typeof SkeletonProfile>;
+export default SkeletonProfile;

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

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

package/dist/lib/components/extended/skeletons/skeleton-square.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SkeletonSquare: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SkeletonSquare = InstanceType<typeof SkeletonSquare>;
+export default SkeletonSquare;