@urbicon-ui/blocks 6.1.4

package/dist/primitives/Sidebar/Sidebar.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { MediaQuery } from 'svelte/reactivity';
+  import { quintOut } from 'svelte/easing';
+  import { fade } from 'svelte/transition';
+  import type { SidebarProps } from './index';
+  import { sidebarVariants } from './sidebar.variants';
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { lockBodyScroll, unlockBodyScroll } from '../../utils/overlay';
+  import { overlayStack } from '../../utils';
+
+  let {
+    open = $bindable(false),
+    mode = 'responsive',
+    side = 'left',
+    width = '16rem',
+    closeOnEscape = true,
+    closeOnBackdropClick = true,
+    onOpenChange,
+    header,
+    footer,
+    children,
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: SidebarProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.Sidebar?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'Sidebar', preset),
+      slotClassesProp
+    )
+  );
+
+  const styles = $derived(sidebarVariants({ side, mode }));
+
+  const panelTransform = $derived(
+    open ? 'translateX(0)' : side === 'left' ? 'translateX(-100%)' : 'translateX(100%)'
+  );
+
+  const mobileQuery = new MediaQuery('(max-width: 1023px)');
+  const isMobile = $derived(mobileQuery.current);
+  let previouslyFocused: HTMLElement | null = null;
+  const propsId = $props.id();
+  const overlayId = `sidebar-${propsId}`;
+
+  // In collapsible mode on desktop, width drives visibility (0 when closed).
+  // On mobile (both modes), width stays full — transform drives visibility.
+  const panelWidth = $derived(mode === 'collapsible' && !isMobile ? (open ? width : '0px') : width);
+
+  // Public CSS variable for consumers to offset their main content area.
+  const effectiveWidth = $derived(open || (mode === 'responsive' && !isMobile) ? width : '0px');
+
+  // Auto-close responsive sidebars when the viewport *transitions* from mobile
+  // to desktop. Tracking `prevIsMobile` is required so the effect doesn't fire
+  // on the initial run when isMobile starts as `false` and `open=true` was
+  // passed in by the consumer — that would close the sidebar immediately on
+  // mount. Only a true mobile→desktop transition should trigger the close.
+  let prevIsMobile: boolean | undefined;
+  $effect(() => {
+    const wasMobile = prevIsMobile;
+    prevIsMobile = isMobile;
+    if (wasMobile === true && !isMobile && open && mode === 'responsive') {
+      open = false;
+      onOpenChange?.(false);
+    }
+  });
+
+  function requestClose() {
+    open = false;
+    onOpenChange?.(false);
+    previouslyFocused?.focus();
+    previouslyFocused = null;
+  }
+
+  $effect(() => {
+    if (open && isMobile) {
+      if (!previouslyFocused) {
+        previouslyFocused = document.activeElement as HTMLElement;
+      }
+      lockBodyScroll();
+    }
+
+    return () => {
+      unlockBodyScroll();
+    };
+  });
+
+  // Register only when behaving as a modal overlay (mobile + open).
+  // Desktop sidebars are persistent layout — overlayStack.closeAll() must skip them.
+  $effect(() => {
+    if (!open || !isMobile) return;
+    return overlayStack.register(overlayId, requestClose);
+  });
+
+  onDestroy(() => {
+    unlockBodyScroll();
+  });
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape' && closeOnEscape && open && isMobile && !e.defaultPrevented) {
+      e.preventDefault();
+      requestClose();
+    }
+  }
+
+  const ariaHidden = $derived(!open && (mode === 'collapsible' || isMobile) ? true : undefined);
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open && isMobile}
+  <div
+    role="presentation"
+    class={unstyled
+      ? (slotClasses?.backdrop ?? '')
+      : styles.backdrop({ class: slotClasses?.backdrop })}
+    onclick={() => closeOnBackdropClick && requestClose()}
+    aria-hidden="true"
+    transition:fade={{ duration: 200, easing: quintOut }}
+  ></div>
+{/if}
+
+<aside
+  class={unstyled
+    ? [slotClasses?.panel, className].filter(Boolean).join(' ')
+    : styles.panel({ class: [slotClasses?.panel, className] })}
+  style:width={panelWidth}
+  style:--sidebar-width={width}
+  style:--sidebar-effective-width={effectiveWidth}
+  style:--_sidebar-transform={panelTransform}
+  data-state={open ? 'open' : 'closed'}
+  data-side={side}
+  data-mode={mode}
+  aria-hidden={ariaHidden}
+  {...restProps}
+>
+  {#if header}
+    <div
+      class={unstyled ? (slotClasses?.header ?? '') : styles.header({ class: slotClasses?.header })}
+    >
+      {@render header()}
+    </div>
+  {/if}
+
+  <div
+    class={unstyled
+      ? (slotClasses?.content ?? '')
+      : styles.content({ class: slotClasses?.content })}
+  >
+    {@render children?.()}
+  </div>
+
+  {#if footer}
+    <div
+      class={unstyled ? (slotClasses?.footer ?? '') : styles.footer({ class: slotClasses?.footer })}
+    >
+      {@render footer()}
+    </div>
+  {/if}
+</aside>
+
+<style>
+  aside {
+    transform: var(--_sidebar-transform);
+    transition:
+      transform var(--blocks-duration-normal, 200ms)
+        var(--blocks-ease-confident, cubic-bezier(0.2, 0, 0, 1)),
+      width var(--blocks-duration-normal, 200ms)
+        var(--blocks-ease-confident, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  @media (min-width: 1024px) {
+    aside {
+      transform: translateX(0);
+    }
+  }
+</style>

package/dist/primitives/Sidebar/Sidebar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SidebarProps } from './index';
+declare const Sidebar: import("svelte").Component<SidebarProps, {}, "open">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/primitives/Sidebar/index.d.ts

@@ -0,0 +1,101 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { SidebarVariants } from './sidebar.variants';
+/**
+ * @description Sidebar primitive — fixed-position panel that is permanent on
+ * desktop (≥1024px) and slides in as a backdropped overlay on mobile. Use
+ * this directly for right-side detail panels or custom shells. For the
+ * standard "permanent left rail + mobile hamburger" application chrome,
+ * prefer the higher-level `<SidebarLayout>` component, which handles main
+ * content offset and the mobile header for you.
+ *
+ * The component exposes `--sidebar-width` and `--sidebar-effective-width`
+ * (0px when collapsed) as CSS variables on its `<aside>` element. CSS
+ * custom properties only inherit to descendants, so these variables are
+ * available **inside** the sidebar's subtree but not on its siblings — that
+ * is precisely why `<SidebarLayout>` exists for app-shell layouts.
+ *
+ * @tag layout
+ * @tag navigation
+ * @related SidebarLayout
+ * @related Drawer
+ *
+ * @example Right-side detail panel — opens as an overlay on click
+ * ```svelte
+ * <script>
+ *   import { Sidebar, Button, CloseIcon, Badge } from '@urbicon-ui/blocks';
+ *   let detailOpen = $state(false);
+ * </script>
+ *
+ * <Button onclick={() => (detailOpen = true)}>Show details</Button>
+ *
+ * <Sidebar bind:open={detailOpen} side="right" width="20rem">
+ *   {#snippet header()}
+ *     <div class="flex items-center justify-between py-3">
+ *       <span class="font-semibold">Item details</span>
+ *       <Button variant="ghost" size="xs" onclick={() => (detailOpen = false)}>
+ *         <CloseIcon class="h-4 w-4" />
+ *       </Button>
+ *     </div>
+ *   {/snippet}
+ *   <div class="space-y-3 p-4">
+ *     <dt class="text-text-tertiary text-xs">Status</dt>
+ *     <dd><Badge intent="success" size="sm">Active</Badge></dd>
+ *   </div>
+ * </Sidebar>
+ * ```
+ *
+ * @example Collapsible — toggleable on all viewports (custom shell)
+ * ```svelte
+ * <Sidebar bind:open={sidebarOpen} mode="collapsible" width="16rem">
+ *   {#snippet header()}<span class="font-semibold">App</span>{/snippet}
+ *   <nav class="p-3"><!-- links --></nav>
+ * </Sidebar>
+ * ```
+ */
+export interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Controls sidebar visibility. In `responsive` mode (default) this only affects the mobile overlay — on desktop the sidebar is always visible. In `collapsible` mode this controls visibility at all viewports. Supports bind:open. */
+    open?: boolean;
+    /** Controls sidebar behavior across viewports.
+     * - `responsive` (default): permanently visible on desktop (≥1024px), slide-in overlay on mobile.
+     * - `collapsible`: toggleable via `open` at all viewports — width animation on desktop, overlay on mobile.
+     * @default 'responsive' */
+    mode?: SidebarVariants['mode'];
+    /** Which edge the sidebar attaches to. @default 'left' */
+    side?: SidebarVariants['side'];
+    /**
+     * CSS width of the sidebar panel. Also exposed as `--sidebar-width`
+     * (constant) and `--sidebar-effective-width` (0px when collapsed) CSS
+     * variables on the `<aside>`. These inherit only inside the sidebar's
+     * own subtree — for the main content offset use `<SidebarLayout>`.
+     * @default '16rem'
+     */
+    width?: string;
+    /** Close the mobile overlay when pressing Escape. @default true */
+    closeOnEscape?: boolean;
+    /** Close the mobile overlay when clicking the backdrop. @default true */
+    closeOnBackdropClick?: boolean;
+    /** Fires when the open state changes (mobile overlay dismissed, or collapsible toggled). */
+    onOpenChange?: (open: boolean) => void;
+    /** Content rendered in the sidebar header (above the scrollable area). */
+    header?: Snippet;
+    /** Content rendered in the sidebar footer (below the scrollable area). */
+    footer?: Snippet;
+    /** Main scrollable content of the sidebar. */
+    children?: Snippet;
+    /** Additional CSS classes applied to the sidebar panel. */
+    class?: string;
+    /** Strip all default styles. Combine with slotClasses for custom appearance. */
+    unstyled?: boolean;
+    /** Per-slot class overrides merged with variant styles. */
+    slotClasses?: Partial<Record<'backdrop' | 'panel' | 'header' | 'content' | 'footer', string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ Sidebar: {...} }}>`.
+     * Prefer this over `class` overrides when the requested look falls outside the
+     * semantic intent palette — presets keep hover/active/dark-mode logic coherent
+     * and make the custom look reusable across the project.
+     */
+    preset?: string;
+}
+export { default as Sidebar } from './Sidebar.svelte';
+export { type SidebarVariants, sidebarVariants } from './sidebar.variants';

package/dist/primitives/Sidebar/index.js

@@ -0,0 +1,2 @@
+export { default as Sidebar } from './Sidebar.svelte';
+export { sidebarVariants } from './sidebar.variants';

package/dist/primitives/Sidebar/sidebar.variants.d.ts

@@ -0,0 +1,57 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const sidebarVariants: (props?: import("../../utils/variants").TVProps<{
+    side: {
+        left: {
+            panel: string;
+        };
+        right: {
+            panel: string;
+        };
+    };
+    mode: {
+        responsive: {
+            backdrop: string;
+        };
+        collapsible: {
+            backdrop: string;
+            panel: string;
+        };
+    };
+}> | undefined) => {
+    backdrop: (props?: ({
+        side?: "right" | "left" | undefined;
+        mode?: "collapsible" | "responsive" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    panel: (props?: ({
+        side?: "right" | "left" | undefined;
+        mode?: "collapsible" | "responsive" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    header: (props?: ({
+        side?: "right" | "left" | undefined;
+        mode?: "collapsible" | "responsive" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    content: (props?: ({
+        side?: "right" | "left" | undefined;
+        mode?: "collapsible" | "responsive" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    footer: (props?: ({
+        side?: "right" | "left" | undefined;
+        mode?: "collapsible" | "responsive" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+};
+export type SidebarVariants = VariantProps<typeof sidebarVariants>;

package/dist/primitives/Sidebar/sidebar.variants.js

@@ -0,0 +1,33 @@
+import { tv } from '../../utils/variants';
+export const sidebarVariants = tv({
+    slots: {
+        backdrop: ['fixed inset-0 z-[var(--z-overlay)]', 'bg-surface-inverted/50 backdrop-blur-sm'],
+        panel: [
+            'fixed inset-y-0 z-[var(--z-sidebar)]',
+            'flex flex-col',
+            'bg-surface-elevated',
+            'border-border-hairline'
+        ],
+        header: [
+            'flex shrink-0 items-center justify-between',
+            'border-border-hairline border-b',
+            'px-5'
+        ],
+        content: ['flex-1 overflow-y-auto'],
+        footer: ['shrink-0', 'border-border-hairline border-t']
+    },
+    variants: {
+        side: {
+            left: { panel: 'left-0 border-r' },
+            right: { panel: 'right-0 border-l' }
+        },
+        mode: {
+            responsive: { backdrop: 'lg:hidden' },
+            collapsible: { backdrop: 'lg:hidden', panel: 'overflow-hidden' }
+        }
+    },
+    defaultVariants: {
+        side: 'left',
+        mode: 'responsive'
+    }
+});

package/dist/primitives/Skeleton/Skeleton.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { skeletonVariants } from './skeleton.variants';
+  import type { SkeletonProps } from './index';
+
+  const bt = useBlocksI18n();
+
+  let {
+    variant = 'text',
+    size = 'md',
+    animation = 'pulse',
+    width,
+    height,
+    count = 1,
+    gap = 'gap-2',
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: SkeletonProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.Skeleton?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'Skeleton', preset),
+      slotClassesProp
+    )
+  );
+
+  const styles = $derived(skeletonVariants({ variant, size, animation }));
+
+  const inlineStyle = $derived(
+    [width ? `width:${width}` : '', height ? `height:${height}` : ''].filter(Boolean).join(';') ||
+      undefined
+  );
+</script>
+
+{#if count > 1}
+  <div
+    class={unstyled
+      ? [slotClasses?.wrapper, gap, className].filter(Boolean).join(' ')
+      : styles.wrapper({ class: [slotClasses?.wrapper, gap, className] })}
+    role="status"
+    aria-label={bt('accessibility.loading')}
+    {...restProps}
+  >
+    {#each Array(count) as _, i (i)}
+      <div
+        class={unstyled ? (slotClasses?.base ?? '') : styles.base({ class: slotClasses?.base })}
+        style={inlineStyle}
+        aria-hidden="true"
+      ></div>
+    {/each}
+    <span class="sr-only">{bt('accessibility.loading')}…</span>
+  </div>
+{:else}
+  <div
+    class={unstyled
+      ? [slotClasses?.base, className].filter(Boolean).join(' ')
+      : styles.base({ class: [slotClasses?.base, className] })}
+    style={inlineStyle}
+    role="status"
+    aria-label={bt('accessibility.loading')}
+    {...restProps}
+  >
+    <span class="sr-only">{bt('accessibility.loading')}…</span>
+  </div>
+{/if}
+
+<style>
+  @keyframes blocks-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+</style>

package/dist/primitives/Skeleton/Skeleton.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SkeletonProps } from './index';
+declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/primitives/Skeleton/index.d.ts

@@ -0,0 +1,63 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { SkeletonVariants } from './skeleton.variants';
+/**
+ * @description Placeholder loading animation that mimics content layout.
+ * Use to reduce perceived loading time and prevent layout shift.
+ *
+ * @tag feedback
+ * @related Spinner
+ * @related Progress
+ *
+ * @example
+ * ```svelte
+ * <Skeleton variant="text" size="lg" />
+ * <Skeleton variant="circular" size="md" />
+ * <Skeleton variant="rectangular" width="100%" height="200px" />
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <div class="flex items-center gap-3">
+ *   <Skeleton variant="circular" size="md" />
+ *   <div class="flex flex-col gap-2 flex-1">
+ *     <Skeleton variant="text" size="sm" />
+ *     <Skeleton variant="text" size="xs" class="w-2/3" />
+ *   </div>
+ * </div>
+ * ```
+ */
+export interface SkeletonProps extends SkeletonVariants, HTMLAttributes<HTMLDivElement> {
+    /** Shape preset. `text` is a slim bar, `circular` for avatars/icons,
+     *  `rectangular` for images/cards, `rounded` like rectangular with softer corners. */
+    variant?: SkeletonVariants['variant'];
+    /** Physical dimensions following the Standard size scale (xs–xl).
+     *  Dimensions vary per variant — text heights range from h-3 (xs) to h-6 (xl),
+     *  circular from 24 px to 64 px. */
+    size?: SkeletonVariants['size'];
+    /** Animation style. `pulse` fades opacity, `wave` sweeps a shimmer gradient,
+     *  `none` renders a static placeholder. All animations respect `prefers-reduced-motion`. */
+    animation?: SkeletonVariants['animation'];
+    /** Custom width (CSS value, e.g. `"200px"` or `"100%"`). Overrides the size preset width. */
+    width?: string;
+    /** Custom height (CSS value, e.g. `"48px"`). Overrides the size preset height. */
+    height?: string;
+    /** Number of skeleton lines to render. Wraps items in a flex-column container when > 1. */
+    count?: number;
+    /** Tailwind gap class between repeated lines (e.g. `"gap-2"`, `"gap-4"`). Only applies when `count > 1`. */
+    gap?: string;
+    /** Extra classes merged onto the root element (or wrapper when `count > 1`). */
+    class?: string;
+    /** Strip all default tv() classes. Combine with `slotClasses` for full control. */
+    unstyled?: boolean;
+    /** Per-slot class overrides merged with (or replacing, when `unstyled`) tv() output. */
+    slotClasses?: Partial<Record<'base' | 'wrapper', string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ Skeleton: {...} }}>`.
+     * Prefer this over `class` overrides when the requested look falls outside the
+     * semantic intent palette — presets keep hover/active/dark-mode logic coherent
+     * and make the custom look reusable across the project.
+     */
+    preset?: string;
+}
+export { default as Skeleton } from './Skeleton.svelte';
+export { type SkeletonVariants, skeletonVariants } from './skeleton.variants';

package/dist/primitives/Skeleton/index.js

@@ -0,0 +1,2 @@
+export { default as Skeleton } from './Skeleton.svelte';
+export { skeletonVariants } from './skeleton.variants';

package/dist/primitives/Skeleton/skeleton.variants.d.ts

@@ -0,0 +1,51 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const skeletonVariants: (props?: import("../../utils/variants").TVProps<{
+    variant: {
+        text: {
+            base: string;
+        };
+        circular: {
+            base: string;
+        };
+        rectangular: {
+            base: string;
+        };
+        rounded: {
+            base: string;
+        };
+    };
+    size: {
+        xs: {};
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+    };
+    animation: {
+        pulse: {
+            base: string;
+        };
+        wave: {
+            base: string[];
+        };
+        none: {};
+    };
+}> | undefined) => {
+    base: (props?: ({
+        variant?: "rounded" | "text" | "circular" | "rectangular" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        animation?: "none" | "pulse" | "wave" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    wrapper: (props?: ({
+        variant?: "rounded" | "text" | "circular" | "rectangular" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        animation?: "none" | "pulse" | "wave" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+};
+export type SkeletonVariants = VariantProps<typeof skeletonVariants>;