svelora 2.1.0

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

@@ -0,0 +1,18 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const skeletonVariants: import("tailwind-variants").TVReturnType<{}, {
+    root: string;
+}, undefined, {}, {
+    root: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    root: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;
+export type SkeletonSlots = keyof ReturnType<typeof skeletonVariants>;
+export declare const skeletonDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{}, {
+        root: string;
+    }, {}, {
+        root: string;
+    }>;
+    slots: Partial<Record<SkeletonSlots, string>>;
+};

package/dist/Skeleton/skeleton.variants.js

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+export const skeletonVariants = tv({
+    slots: {
+        root: 'animate-pulse rounded-md bg-surface-container-highest'
+    },
+    variants: {},
+    defaultVariants: {}
+});
+export const skeletonDefaults = {
+    defaultVariants: skeletonVariants.defaultVariants,
+    slots: {}
+};

package/dist/Slideover/Slideover.svelte

@@ -0,0 +1,212 @@
+<script lang="ts" module>
+    import type { SlideoverProps } from './slideover.types.js'
+
+    export type Props = SlideoverProps
+</script>
+
+<script lang="ts">
+    import { Dialog } from 'bits-ui'
+    import Button from '../Button/Button.svelte'
+    import { getComponentConfig } from '../config.js'
+    import { slideoverDefaults, slideoverVariants } from './slideover.variants.js'
+
+    const config = getComponentConfig('slideover', slideoverDefaults)
+
+    let {
+        open = $bindable(false),
+        onOpenChange,
+        onOpenChangeComplete,
+        trapFocus = true,
+        preventScroll = true,
+        onOpenAutoFocus,
+        onCloseAutoFocus,
+        onEscapeKeydown,
+        onInteractOutside,
+        forceMount,
+        restoreScrollDelay,
+        title,
+        description,
+        side = config.defaultVariants.side ?? 'right',
+        overlay: showOverlay = config.defaultVariants.overlay ?? true,
+        transition = config.defaultVariants.transition ?? 'slide',
+        size = config.defaultVariants.size ?? 'md',
+        inset = config.defaultVariants.inset ?? false,
+        portal = true,
+        close: closeProp = true,
+        dismissible = true,
+        ui,
+        class: className,
+        children,
+        content: contentSlot,
+        header: headerSlot,
+        titleSlot,
+        descriptionSlot,
+        actions: actionsSlot,
+        body: bodySlot,
+        footer: footerSlot,
+        closeSlot
+    }: Props = $props()
+
+    const showClose = $derived(!!closeProp)
+    const closeProps = $derived(typeof closeProp === 'object' ? closeProp : {})
+
+    const hasTitle = $derived(!!title || !!titleSlot)
+    const hasDescription = $derived(!!description || !!descriptionSlot)
+    const hasHeading = $derived(hasTitle || hasDescription)
+    const hasHeader = $derived(
+        !!headerSlot || hasHeading || !!actionsSlot || showClose || !!closeSlot
+    )
+
+    const resolvedTransition = $derived(
+        transition === false ? 'none' : transition === true ? 'slide' : transition
+    )
+
+    const variantSlots = $derived(
+        slideoverVariants({
+            transition: resolvedTransition,
+            side,
+            size,
+            inset,
+            overlay: showOverlay
+        })
+    )
+
+    const classes = $derived({
+        overlay: variantSlots.overlay({ class: [config.slots.overlay, ui?.overlay] }),
+        content: variantSlots.content({ class: [config.slots.content, ui?.content] }),
+        header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
+        wrapper: variantSlots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+        title: variantSlots.title({ class: [config.slots.title, ui?.title] }),
+        description: variantSlots.description({
+            class: [config.slots.description, ui?.description]
+        }),
+        actions: variantSlots.actions({ class: [config.slots.actions, ui?.actions] }),
+        body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
+        footer: variantSlots.footer({ class: [config.slots.footer, ui?.footer] }),
+        close: variantSlots.close({ class: [config.slots.close, ui?.close] })
+    })
+
+    const contentProps = $derived.by(() => {
+        const behavior = dismissible ? ('close' as const) : ('ignore' as const)
+        return {
+            trapFocus,
+            preventScroll,
+            escapeKeydownBehavior: behavior,
+            interactOutsideBehavior: behavior,
+            onOpenAutoFocus,
+            onCloseAutoFocus,
+            onEscapeKeydown,
+            onInteractOutside,
+            forceMount,
+            restoreScrollDelay
+        }
+    })
+
+    function handleOpenChange(value: boolean) {
+        open = value
+        onOpenChange?.(value)
+    }
+</script>
+
+{#snippet titleEl()}
+    {#if titleSlot}{@render titleSlot()}{:else}{title}{/if}
+{/snippet}
+
+{#snippet descriptionEl()}
+    {#if descriptionSlot}{@render descriptionSlot()}{:else}{description}{/if}
+{/snippet}
+
+{#snippet slideoverContentInner()}
+    <Dialog.Content {...contentProps} class={[classes.content, !children ? className : undefined]}>
+        {#if contentSlot}
+            {#if hasHeading}
+                <div class="sr-only">
+                    {#if hasTitle}<Dialog.Title>{@render titleEl()}</Dialog.Title>{/if}
+                    {#if hasDescription}<Dialog.Description
+                            >{@render descriptionEl()}</Dialog.Description
+                        >{/if}
+                </div>
+            {/if}
+            {@render contentSlot()}
+        {:else}
+            {#if hasHeader}
+                <div class={classes.header}>
+                    {#if headerSlot}
+                        {@render headerSlot()}
+                    {:else}
+                        <div class={classes.wrapper}>
+                            {#if hasTitle}
+                                <Dialog.Title class={classes.title}
+                                    >{@render titleEl()}</Dialog.Title
+                                >
+                            {/if}
+                            {#if hasDescription}
+                                <Dialog.Description class={classes.description}
+                                    >{@render descriptionEl()}</Dialog.Description
+                                >
+                            {/if}
+                        </div>
+
+                        {#if actionsSlot}
+                            <div class={classes.actions}>{@render actionsSlot()}</div>
+                        {/if}
+
+                        {#if showClose || closeSlot}
+                            <Dialog.Close>
+                                {#snippet child({ props })}
+                                    {#if closeSlot}
+                                        <span {...props} class={classes.close}
+                                            >{@render closeSlot()}</span
+                                        >
+                                    {:else}
+                                        <Button
+                                            {...props}
+                                            leadingIcon={closeProps.icon ?? 'lucide:x'}
+                                            color={closeProps.color ?? 'surface'}
+                                            variant={closeProps.variant ?? 'ghost'}
+                                            size={closeProps.size ?? 'sm'}
+                                            square
+                                            aria-label="Close"
+                                            class={classes.close}
+                                        />
+                                    {/if}
+                                {/snippet}
+                            </Dialog.Close>
+                        {/if}
+                    {/if}
+                </div>
+            {/if}
+
+            {#if bodySlot}
+                <div class={classes.body}>{@render bodySlot()}</div>
+            {/if}
+
+            {#if footerSlot}
+                <div class={classes.footer}>{@render footerSlot()}</div>
+            {/if}
+        {/if}
+    </Dialog.Content>
+{/snippet}
+
+{#snippet slideoverPortalContent()}
+    {#if showOverlay}
+        <Dialog.Overlay class={classes.overlay} />
+    {/if}
+    {@render slideoverContentInner()}
+{/snippet}
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange} {onOpenChangeComplete}>
+    {#if children}
+        <Dialog.Trigger>
+            {#snippet child({ props })}
+                {@render children({ props })}
+            {/snippet}
+        </Dialog.Trigger>
+    {/if}
+
+    {#if portal}
+        <Dialog.Portal>{@render slideoverPortalContent()}</Dialog.Portal>
+    {:else}
+        {@render slideoverPortalContent()}
+    {/if}
+</Dialog.Root>

package/dist/Slideover/Slideover.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { SlideoverProps } from './slideover.types.js';
+export type Props = SlideoverProps;
+declare const Slideover: import("svelte").Component<SlideoverProps, {}, "open">;
+type Slideover = ReturnType<typeof Slideover>;
+export default Slideover;

package/dist/Slideover/SlideoverTriggerTestWrapper.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import Slideover from './Slideover.svelte'
+</script>
+
+<Slideover title="Trigger test" description="D">
+    {#snippet children({ props })}
+        <button data-testid="trigger" {...props}>Open</button>
+    {/snippet}
+    {#snippet body()}<p>Body</p>{/snippet}
+</Slideover>

package/dist/Slideover/SlideoverTriggerTestWrapper.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 SlideoverTriggerTestWrapper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SlideoverTriggerTestWrapper = InstanceType<typeof SlideoverTriggerTestWrapper>;
+export default SlideoverTriggerTestWrapper;

package/dist/Slideover/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Slideover } from './Slideover.svelte';
+export type { SlideoverProps } from './slideover.types.js';

package/dist/Slideover/index.js

@@ -0,0 +1 @@
+export { default as Slideover } from './Slideover.svelte';

package/dist/Slideover/slideover.types.d.ts

@@ -0,0 +1,154 @@
+import type { DialogContentPropsWithoutHTML, DialogRootPropsWithoutHTML } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { ButtonVariantProps } from '../Button/button.variants.js';
+import type { SlideoverSlots, SlideoverVariantProps } from './slideover.variants.js';
+/**
+ * Props inherited from bits-ui's Dialog root.
+ */
+type RootProps = Pick<DialogRootPropsWithoutHTML, 'open' | 'onOpenChange' | 'onOpenChangeComplete'>;
+/**
+ * Props inherited from bits-ui's Dialog content.
+ */
+type ContentProps = Pick<DialogContentPropsWithoutHTML, 'trapFocus' | 'preventScroll' | 'onOpenAutoFocus' | 'onCloseAutoFocus' | 'onEscapeKeydown' | 'onInteractOutside' | 'forceMount' | 'restoreScrollDelay'>;
+/**
+ * Props for customizing the close button appearance.
+ */
+export interface SlideoverCloseProps {
+    color?: NonNullable<ButtonVariantProps['color']>;
+    variant?: NonNullable<ButtonVariantProps['variant']>;
+    size?: NonNullable<ButtonVariantProps['size']>;
+    icon?: string;
+}
+export interface SlideoverProps extends RootProps, ContentProps {
+    /**
+     * Title text displayed in the slideover header.
+     * Rendered inside an accessible `Dialog.Title` element.
+     */
+    title?: string;
+    /**
+     * Description text displayed below the title.
+     * Rendered inside an accessible `Dialog.Description` element.
+     */
+    description?: string;
+    /**
+     * The side of the screen the slideover appears from.
+     * @default 'right'
+     */
+    side?: SlideoverVariantProps['side'];
+    /**
+     * Render a backdrop overlay behind the slideover.
+     * @default true
+     */
+    overlay?: SlideoverVariantProps['overlay'];
+    /**
+     * Controls the entrance/exit animation.
+     * - `'none'` / `false`: no animation
+     * - `'fade'`: overlay + content fade
+     * - `'slide'` / `true`: overlay fade + content slide-in from the chosen side (default)
+     * - `'scale'`: overlay fade + content scale-in
+     * @default 'slide'
+     */
+    transition?: SlideoverVariantProps['transition'] | boolean;
+    /**
+     * Controls the panel dimension along its axis. For `side="left"` /
+     * `side="right"` this sets `max-width`; for `side="top"` / `side="bottom"`
+     * this sets `max-height`.
+     * @default 'md'
+     */
+    size?: SlideoverVariantProps['size'];
+    /**
+     * Display the slideover with inset margins and rounded corners.
+     * @default false
+     */
+    inset?: SlideoverVariantProps['inset'];
+    /**
+     * Render the slideover content in a portal appended to `<body>`.
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * Display a close button in the slideover header.
+     * Pass `true` for the default close button, or an object
+     * to customize the button appearance.
+     *
+     * @example
+     * ```svelte
+     * <!-- Default close button -->
+     * <Slideover close title="Title" />
+     *
+     * <!-- Customized close button -->
+     * <Slideover close={{ color: 'error', size: 'xs' }} title="Title" />
+     * ```
+     *
+     * @default true
+     */
+    close?: boolean | SlideoverCloseProps;
+    /**
+     * Allow dismissing the slideover by clicking outside or pressing Escape.
+     * When `false`, only programmatic close or the close button can dismiss.
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Override classes for specific slideover slots.
+     */
+    ui?: Partial<Record<SlideoverSlots, ClassNameValue>>;
+    /**
+     * Additional CSS classes for the trigger element,
+     * or the content element when no trigger is provided.
+     */
+    class?: ClassNameValue;
+    /**
+     * Trigger content. Spread the provided `props` onto your own focusable
+     * element (e.g. a `<Button>`) so the dialog's trigger ARIA and event
+     * handlers land on the real control instead of a nested wrapper button.
+     *
+     * @example
+     * ```svelte
+     * {#snippet children({ props })}
+     *   <Button {...props}>Open</Button>
+     * {/snippet}
+     * ```
+     */
+    children?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    /**
+     * Custom content slot that replaces the entire default layout
+     * (header, body, footer). Title and description are rendered
+     * in a screen-reader-only container for accessibility.
+     */
+    content?: Snippet;
+    /**
+     * Custom header slot that replaces the default header
+     * containing title, description, and close button.
+     */
+    header?: Snippet;
+    /**
+     * Custom title slot. Overrides the `title` prop when provided.
+     */
+    titleSlot?: Snippet;
+    /**
+     * Custom description slot. Overrides the `description` prop when provided.
+     */
+    descriptionSlot?: Snippet;
+    /**
+     * Actions slot rendered between the title/description wrapper
+     * and the close button inside the header.
+     */
+    actions?: Snippet;
+    /**
+     * Body content rendered between the header and footer.
+     */
+    body?: Snippet;
+    /**
+     * Footer content rendered at the bottom of the slideover.
+     */
+    footer?: Snippet;
+    /**
+     * Custom close button slot. Overrides the default close button entirely.
+     */
+    closeSlot?: Snippet;
+}
+export {};

package/dist/Slideover/slideover.types.js

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