svelora 2.1.0

package/dist/Separator/separator.variants.d.ts

@@ -0,0 +1,509 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const separatorVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        secondary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        tertiary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        success: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        warning: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        error: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        info: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        surface: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+    };
+    size: {
+        xs: {
+            label: string;
+            icon: string;
+        };
+        sm: {
+            label: string;
+            icon: string;
+        };
+        md: {
+            label: string;
+            icon: string;
+        };
+        lg: {
+            label: string;
+            icon: string;
+        };
+        xl: {
+            label: string;
+            icon: string;
+        };
+    };
+    type: {
+        solid: {
+            border: string;
+        };
+        dashed: {
+            border: string;
+        };
+        dotted: {
+            border: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            border: string;
+            container: string;
+        };
+        vertical: {
+            root: string;
+            border: string;
+            container: string;
+        };
+    };
+    position: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, {
+    root: string;
+    border: string;
+    container: string;
+    icon: string;
+    avatar: string;
+    label: string;
+}, undefined, {
+    color: {
+        primary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        secondary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        tertiary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        success: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        warning: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        error: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        info: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        surface: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+    };
+    size: {
+        xs: {
+            label: string;
+            icon: string;
+        };
+        sm: {
+            label: string;
+            icon: string;
+        };
+        md: {
+            label: string;
+            icon: string;
+        };
+        lg: {
+            label: string;
+            icon: string;
+        };
+        xl: {
+            label: string;
+            icon: string;
+        };
+    };
+    type: {
+        solid: {
+            border: string;
+        };
+        dashed: {
+            border: string;
+        };
+        dotted: {
+            border: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            border: string;
+            container: string;
+        };
+        vertical: {
+            root: string;
+            border: string;
+            container: string;
+        };
+    };
+    position: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, {
+    root: string;
+    border: string;
+    container: string;
+    icon: string;
+    avatar: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        secondary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        tertiary: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        success: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        warning: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        error: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        info: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+        surface: {
+            border: string;
+            label: string;
+            icon: string;
+        };
+    };
+    size: {
+        xs: {
+            label: string;
+            icon: string;
+        };
+        sm: {
+            label: string;
+            icon: string;
+        };
+        md: {
+            label: string;
+            icon: string;
+        };
+        lg: {
+            label: string;
+            icon: string;
+        };
+        xl: {
+            label: string;
+            icon: string;
+        };
+    };
+    type: {
+        solid: {
+            border: string;
+        };
+        dashed: {
+            border: string;
+        };
+        dotted: {
+            border: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+            border: string;
+            container: string;
+        };
+        vertical: {
+            root: string;
+            border: string;
+            container: string;
+        };
+    };
+    position: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, {
+    root: string;
+    border: string;
+    container: string;
+    icon: string;
+    avatar: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SeparatorVariantProps = VariantProps<typeof separatorVariants>;
+export type SeparatorSlots = keyof ReturnType<typeof separatorVariants>;
+export declare const separatorDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        color: {
+            primary: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            secondary: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            tertiary: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            success: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            warning: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            error: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            info: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            surface: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+        };
+        size: {
+            xs: {
+                label: string;
+                icon: string;
+            };
+            sm: {
+                label: string;
+                icon: string;
+            };
+            md: {
+                label: string;
+                icon: string;
+            };
+            lg: {
+                label: string;
+                icon: string;
+            };
+            xl: {
+                label: string;
+                icon: string;
+            };
+        };
+        type: {
+            solid: {
+                border: string;
+            };
+            dashed: {
+                border: string;
+            };
+            dotted: {
+                border: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                border: string;
+                container: string;
+            };
+            vertical: {
+                root: string;
+                border: string;
+                container: string;
+            };
+        };
+        position: {
+            start: string;
+            center: string;
+            end: string;
+        };
+    }, {
+        root: string;
+        border: string;
+        container: string;
+        icon: string;
+        avatar: string;
+        label: string;
+    }, {
+        color: {
+            primary: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            secondary: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            tertiary: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            success: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            warning: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            error: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            info: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+            surface: {
+                border: string;
+                label: string;
+                icon: string;
+            };
+        };
+        size: {
+            xs: {
+                label: string;
+                icon: string;
+            };
+            sm: {
+                label: string;
+                icon: string;
+            };
+            md: {
+                label: string;
+                icon: string;
+            };
+            lg: {
+                label: string;
+                icon: string;
+            };
+            xl: {
+                label: string;
+                icon: string;
+            };
+        };
+        type: {
+            solid: {
+                border: string;
+            };
+            dashed: {
+                border: string;
+            };
+            dotted: {
+                border: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                border: string;
+                container: string;
+            };
+            vertical: {
+                root: string;
+                border: string;
+                container: string;
+            };
+        };
+        position: {
+            start: string;
+            center: string;
+            end: string;
+        };
+    }, {
+        root: string;
+        border: string;
+        container: string;
+        icon: string;
+        avatar: string;
+        label: string;
+    }>;
+    slots: Partial<Record<SeparatorSlots, string>>;
+    avatarSize: string;
+};

package/dist/Separator/separator.variants.js

@@ -0,0 +1,110 @@
+import { tv } from 'tailwind-variants';
+export const separatorVariants = tv({
+    slots: {
+        root: 'flex items-center text-center',
+        border: '',
+        container: 'font-medium flex',
+        icon: 'shrink-0',
+        avatar: 'shrink-0',
+        label: ''
+    },
+    variants: {
+        color: {
+            primary: {
+                border: 'border-primary',
+                label: 'text-primary',
+                icon: 'text-primary'
+            },
+            secondary: {
+                border: 'border-secondary',
+                label: 'text-secondary',
+                icon: 'text-secondary'
+            },
+            tertiary: {
+                border: 'border-tertiary',
+                label: 'text-tertiary',
+                icon: 'text-tertiary'
+            },
+            success: {
+                border: 'border-success',
+                label: 'text-success',
+                icon: 'text-success'
+            },
+            warning: {
+                border: 'border-warning',
+                label: 'text-warning',
+                icon: 'text-warning'
+            },
+            error: {
+                border: 'border-error',
+                label: 'text-error',
+                icon: 'text-error'
+            },
+            info: {
+                border: 'border-info',
+                label: 'text-info',
+                icon: 'text-info'
+            },
+            surface: {
+                border: 'border-outline-variant',
+                label: 'text-on-surface-variant',
+                icon: 'text-on-surface-variant'
+            }
+        },
+        size: {
+            xs: { label: 'text-xs', icon: 'size-3' },
+            sm: { label: 'text-xs', icon: 'size-3.5' },
+            md: { label: 'text-sm', icon: 'size-4' },
+            lg: { label: 'text-sm', icon: 'size-5' },
+            xl: { label: 'text-base', icon: 'size-6' }
+        },
+        type: {
+            solid: { border: 'border-solid' },
+            dashed: { border: 'border-dashed' },
+            dotted: { border: 'border-dotted' }
+        },
+        orientation: {
+            horizontal: {
+                root: 'w-full flex-row',
+                border: 'w-full flex-1',
+                container: 'mx-3 whitespace-nowrap'
+            },
+            vertical: {
+                root: 'h-full flex-col',
+                border: 'h-full flex-1',
+                container: 'my-2'
+            }
+        },
+        position: {
+            start: '',
+            center: '',
+            end: ''
+        }
+    },
+    compoundVariants: [
+        // Horizontal border sizes
+        { orientation: 'horizontal', size: 'xs', class: { border: 'border-t' } },
+        { orientation: 'horizontal', size: 'sm', class: { border: 'border-t-2' } },
+        { orientation: 'horizontal', size: 'md', class: { border: 'border-t-[3px]' } },
+        { orientation: 'horizontal', size: 'lg', class: { border: 'border-t-4' } },
+        { orientation: 'horizontal', size: 'xl', class: { border: 'border-t-[5px]' } },
+        // Vertical border sizes
+        { orientation: 'vertical', size: 'xs', class: { border: 'border-s' } },
+        { orientation: 'vertical', size: 'sm', class: { border: 'border-s-2' } },
+        { orientation: 'vertical', size: 'md', class: { border: 'border-s-[3px]' } },
+        { orientation: 'vertical', size: 'lg', class: { border: 'border-s-4' } },
+        { orientation: 'vertical', size: 'xl', class: { border: 'border-s-[5px]' } }
+    ],
+    defaultVariants: {
+        color: 'surface',
+        size: 'xs',
+        type: 'solid',
+        orientation: 'horizontal',
+        position: 'center'
+    }
+});
+export const separatorDefaults = {
+    defaultVariants: separatorVariants.defaultVariants,
+    slots: {},
+    avatarSize: '2xs'
+};

package/dist/Skeleton/Skeleton.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+    import type { SkeletonProps } from './skeleton.types.js'
+
+    export type Props = SkeletonProps
+</script>
+
+<script lang="ts">
+    import { getComponentConfig } from '../config.js'
+    import { skeletonDefaults, skeletonVariants } from './skeleton.variants.js'
+
+    const config = getComponentConfig('skeleton', skeletonDefaults)
+
+    let {
+        ref = $bindable(null),
+        as = 'div',
+        ui,
+        class: className,
+        children,
+        ...restProps
+    }: Props = $props()
+
+    const slots = skeletonVariants()
+    const classes = $derived({
+        root: slots.root({ class: [config.slots.root, className, ui?.root] })
+    })
+</script>
+
+<svelte:element
+    this={as}
+    bind:this={ref}
+    class={classes.root}
+    role="alert"
+    aria-busy="true"
+    aria-label="loading"
+    aria-live="polite"
+    {...restProps}
+>
+    {@render children?.()}
+</svelte:element>

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

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

package/dist/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Skeleton } from './Skeleton.svelte';
+export type { SkeletonProps } from './skeleton.types.js';

package/dist/Skeleton/index.js

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

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { SkeletonSlots } from './skeleton.variants.js';
+export type SkeletonProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Renders the skeleton as a different HTML element.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific skeleton slots.
+     */
+    ui?: Partial<Record<SkeletonSlots, ClassNameValue>>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Default slot content.
+     */
+    children?: Snippet;
+};

package/dist/Skeleton/skeleton.types.js

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