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

package/dist/lib/components/extended/json-viewer/json-viewer.utils.js

@@ -0,0 +1,235 @@
+export const DEFAULT_JSON_VIEWER_TRUNCATION = {
+    enabled: true,
+    itemsPerArray: 5,
+};
+export const JSON_VIEWER_INDENT_CLASSES = [
+    "border-red-300/60 dark:border-red-700/60",
+    "border-yellow-300/60 dark:border-yellow-700/60",
+    "border-green-300/60 dark:border-green-700/60",
+    "border-blue-300/60 dark:border-blue-700/60",
+    "border-purple-300/60 dark:border-purple-700/60",
+];
+/**
+ * Resolves the public truncation prop into a complete settings object.
+ */
+export function resolveJsonViewerTruncation(truncation) {
+    return {
+        enabled: truncation?.enabled ?? DEFAULT_JSON_VIEWER_TRUNCATION.enabled,
+        itemsPerArray: truncation?.itemsPerArray ?? DEFAULT_JSON_VIEWER_TRUNCATION.itemsPerArray,
+    };
+}
+/**
+ * Normalizes incoming data so JSON strings render as structured values when possible.
+ */
+export function normalizeJsonViewerData(data) {
+    if (typeof data !== "string") {
+        return data;
+    }
+    const trimmed = data.trim();
+    if (!trimmed) {
+        return data;
+    }
+    try {
+        return JSON.parse(data);
+    }
+    catch {
+        return data;
+    }
+}
+/**
+ * Builds the copyable text representation for the viewer toolbar.
+ */
+export function getJsonViewerCopyText(data) {
+    const normalized = normalizeJsonViewerData(data);
+    if (typeof data === "string" && normalized === data) {
+        return data;
+    }
+    return stringifyJsonViewerValue(normalized);
+}
+/**
+ * Safely stringifies viewer data for display or clipboard use.
+ */
+export function stringifyJsonViewerValue(value) {
+    try {
+        const result = JSON.stringify(value, null, 2);
+        return result ?? String(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+/**
+ * Returns the display data type for a JSON value.
+ */
+export function getJsonViewerDataType(value) {
+    if (value === null) {
+        return "null";
+    }
+    if (Array.isArray(value)) {
+        return "array";
+    }
+    const type = typeof value;
+    if (type === "string" || type === "number" || type === "boolean" || type === "object") {
+        return type;
+    }
+    return "unknown";
+}
+/**
+ * Returns whether the supplied value renders as an expandable collection.
+ */
+export function isJsonViewerCollection(value) {
+    const type = getJsonViewerDataType(value);
+    return type === "object" || type === "array";
+}
+/**
+ * Creates the initial expansion map for the requested default depth.
+ */
+export function createJsonViewerExpandedPaths(data, defaultExpanded) {
+    if (!isJsonViewerCollection(data)) {
+        return {};
+    }
+    if (defaultExpanded === true) {
+        return generateJsonViewerExpandedPaths(data);
+    }
+    if (typeof defaultExpanded === "number") {
+        return generateJsonViewerExpandedPaths(data, defaultExpanded);
+    }
+    return { root: true };
+}
+/**
+ * Generates an expansion map for every collection path up to the requested depth.
+ */
+export function generateJsonViewerExpandedPaths(data, maxDepth = Number.POSITIVE_INFINITY, currentDepth = 0, currentPath = "root") {
+    const paths = {};
+    if (!isJsonViewerCollection(data) || currentDepth > maxDepth) {
+        return paths;
+    }
+    paths[currentPath] = true;
+    if (Array.isArray(data)) {
+        data.forEach((value, index) => {
+            Object.assign(paths, generateJsonViewerExpandedPaths(value, maxDepth, currentDepth + 1, `${currentPath}[${index}]`));
+        });
+        return paths;
+    }
+    Object.entries(data).forEach(([key, value]) => {
+        Object.assign(paths, generateJsonViewerExpandedPaths(value, maxDepth, currentDepth + 1, `${currentPath}.${key}`));
+    });
+    return paths;
+}
+/**
+ * Counts the currently visible logical lines in the rendered JSON tree.
+ */
+export function calculateJsonViewerVisibleLineCount(data, expandedPaths, revealedPaths, truncation, path = "root") {
+    const type = getJsonViewerDataType(data);
+    if (type === "object") {
+        if (!expandedPaths[path]) {
+            return 1;
+        }
+        const entries = Object.entries(data);
+        if (entries.length === 0) {
+            return 2;
+        }
+        return (2 +
+            entries.reduce((count, [key, value]) => {
+                return (count +
+                    calculateJsonViewerVisibleLineCount(value, expandedPaths, revealedPaths, truncation, `${path}.${key}`));
+            }, 0));
+    }
+    if (type === "array") {
+        if (!expandedPaths[path]) {
+            return 1;
+        }
+        const items = data;
+        if (items.length === 0) {
+            return 2;
+        }
+        const showAll = Boolean(revealedPaths[path]);
+        const visibleItems = truncation.enabled && !showAll && items.length > truncation.itemsPerArray
+            ? items.slice(0, truncation.itemsPerArray)
+            : items;
+        const hiddenLine = visibleItems.length < items.length ? 1 : 0;
+        return (2 +
+            hiddenLine +
+            visibleItems.reduce((count, value, index) => {
+                return (count +
+                    calculateJsonViewerVisibleLineCount(value, expandedPaths, revealedPaths, truncation, `${path}[${index}]`));
+            }, 0));
+    }
+    return 1;
+}
+/**
+ * Returns the color class used for scalar values.
+ */
+export function getJsonViewerTypeClass(type) {
+    switch (type) {
+        case "string":
+            return "text-green-600 dark:text-green-400";
+        case "number":
+            return "text-orange-600 dark:text-orange-400";
+        case "boolean":
+            return "text-blue-600 dark:text-blue-400";
+        case "null":
+            return "text-muted-foreground";
+        default:
+            return "";
+    }
+}
+/**
+ * Detects date-like strings and unix timestamps for inline relative hints.
+ */
+export function detectJsonViewerDate(value) {
+    if (typeof value === "string") {
+        if (!/^\d{4}-\d{2}-\d{2}/.test(value)) {
+            return null;
+        }
+        const date = new Date(value);
+        return Number.isNaN(date.getTime()) ? null : date;
+    }
+    if (typeof value === "number") {
+        if (value >= 946684800 && value <= 4102444800) {
+            return new Date(value * 1000);
+        }
+        if (value >= 946684800000 && value <= 4102444800000) {
+            return new Date(value);
+        }
+    }
+    return null;
+}
+/**
+ * Formats a date as a lightweight relative time label.
+ */
+export function formatJsonViewerRelativeTime(date) {
+    const diffInSeconds = Math.floor((Date.now() - date.getTime()) / 1000);
+    if (Math.abs(diffInSeconds) < 60) {
+        return "just now";
+    }
+    const intervals = {
+        year: 31_536_000,
+        month: 2_592_000,
+        week: 604_800,
+        day: 86_400,
+        hour: 3_600,
+        minute: 60,
+    };
+    for (const [unit, seconds] of Object.entries(intervals)) {
+        const amount = Math.floor(Math.abs(diffInSeconds) / seconds);
+        if (amount < 1) {
+            continue;
+        }
+        const suffix = diffInSeconds > 0 ? "ago" : "from now";
+        return `${amount} ${unit}${amount === 1 ? "" : "s"} ${suffix}`;
+    }
+    return "just now";
+}
+/**
+ * Returns whether a string should render as an external link.
+ */
+export function isJsonViewerUrl(value) {
+    return /^https?:\/\//.test(value);
+}
+/**
+ * Returns whether a string should render with a color swatch.
+ */
+export function isJsonViewerColor(value) {
+    return /^#([0-9a-f]{3}){1,2}$/i.test(value) || /^rgba?\(/.test(value) || /^hsla?\(/.test(value);
+}

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

@@ -0,0 +1,2 @@
+import Message from "./loader-message.svelte";
+export { Message };

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

@@ -0,0 +1,2 @@
+import Message from "./loader-message.svelte";
+export { Message };

package/dist/lib/components/extended/loaders/loader-message.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import * as Item from '../../ui/item/index.js';
+  import type {
+    ItemSize,
+    ItemVariant,
+  } from '../../ui/item/item.svelte';
+  import { Spinner } from '../../ui/spinner/index.js';
+  import { cn, type WithElementRef } from '../../utils';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+    variant?: ItemVariant;
+    size?: ItemSize;
+  } & {
+    title?: string | Snippet<[]>;
+    description?: string | Snippet<[]>;
+    icon?: Snippet<[]>;
+  };
+
+  let {
+    ref = $bindable(null),
+    child,
+    title = 'Loading',
+    description = 'Come back in a few minutes',
+    class: cls,
+    ...rest
+  }: Props = $props();
+
+  const mergedProps = $derived({
+    class: cn('flex w-full flex-col gap-4', cls),
+    'data-slot': 'loader-message',
+    ...rest,
+  });
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {#if mergedProps.children}
+      {@render mergedProps.children?.()}
+    {:else}
+      <Item.Root variant="muted">
+        <Item.Media>
+          <Spinner />
+        </Item.Media>
+        <Item.Content>
+          <Item.Header>
+            {#if typeof title === 'string'}
+              {title}
+            {:else}
+              {@render title?.()}
+            {/if}
+          </Item.Header>
+          <Item.Description>
+            {#if typeof description === 'string'}
+              {description}
+            {:else}
+              {@render description?.()}
+            {/if}
+          </Item.Description>
+        </Item.Content>
+      </Item.Root>
+    {/if}
+  </div>
+{/if}
+
+<!-- <div
+  class={cn('rounded-xl bg-linear-to-r from-muted/40 via-muted/30 to-muted/10 p-4', cls)}
+  {...rest}
+>
+  <div class="flex items-center gap-3">
+    <div class="flex h-10 w-10 items-center justify-center rounded-sm bg-primary/10">
+      <RefreshCw class="size-5 animate-spin" />
+    </div>
+    <div class="flex flex-col text-sm leading-tight">
+      <span class="font-medium text-foreground">{title}</span>
+      <span class="text-muted-foreground">{description}</span>
+    </div>
+  </div>
+</div> -->

package/dist/lib/components/extended/loaders/loader-message.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ItemSize, ItemVariant } from '../../ui/item/item.svelte';
+import { type WithElementRef } from '../../utils';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    variant?: ItemVariant;
+    size?: ItemSize;
+} & {
+    title?: string | Snippet<[]>;
+    description?: string | Snippet<[]>;
+    icon?: Snippet<[]>;
+};
+declare const LoaderMessage: import("svelte").Component<Props, {}, "ref">;
+type LoaderMessage = ReturnType<typeof LoaderMessage>;
+export default LoaderMessage;

package/dist/lib/components/extended/loaders/loader-message.svelte.test.d.ts

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

package/dist/lib/components/extended/loaders/loader-message.svelte.test.js

@@ -0,0 +1,28 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import LoaderMessage from './loader-message.svelte';
+describe('LoaderMessage', () => {
+    it('renders a container with the loader-message data-slot', () => {
+        const { container } = render(LoaderMessage);
+        expect(container.querySelector('[data-slot="loader-message"]')).toBeTruthy();
+    });
+    it('shows the default title and description', () => {
+        const { getByText } = render(LoaderMessage);
+        expect(getByText('Loading')).toBeTruthy();
+        expect(getByText('Come back in a few minutes')).toBeTruthy();
+    });
+    it('shows a custom title when provided as a string', () => {
+        const { getByText } = render(LoaderMessage, { props: { title: 'Please wait' } });
+        expect(getByText('Please wait')).toBeTruthy();
+    });
+    it('shows a custom description when provided as a string', () => {
+        const { getByText } = render(LoaderMessage, {
+            props: { description: 'Processing your request' },
+        });
+        expect(getByText('Processing your request')).toBeTruthy();
+    });
+    it('passes extra HTML attributes to the root element', () => {
+        const { container } = render(LoaderMessage, { props: { id: 'my-loader' } });
+        expect(container.querySelector('#my-loader')).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,8 @@
+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/dist/lib/components/extended/skeletons/index.js

@@ -0,0 +1,8 @@
+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/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-message.svelte

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

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

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;