svelora 2.1.0

package/dist/Empty/empty.variants.d.ts

@@ -0,0 +1,308 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const emptyVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        sm: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        md: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        lg: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        xl: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {
+            root: string;
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        outline: {
+            root: string;
+            description: string;
+        };
+        soft: {
+            root: string;
+            description: string;
+        };
+        subtle: {
+            root: string;
+            description: string;
+        };
+        naked: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    avatar: string;
+    title: string;
+    description: string;
+    body: string;
+    actions: string;
+    footer: string;
+}, undefined, {
+    size: {
+        xs: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        sm: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        md: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        lg: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        xl: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {
+            root: string;
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        outline: {
+            root: string;
+            description: string;
+        };
+        soft: {
+            root: string;
+            description: string;
+        };
+        subtle: {
+            root: string;
+            description: string;
+        };
+        naked: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    avatar: string;
+    title: string;
+    description: string;
+    body: string;
+    actions: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        sm: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        md: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        lg: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        xl: {
+            avatar: string;
+            title: string;
+            description: string;
+        };
+    };
+    variant: {
+        solid: {
+            root: string;
+            avatar: string;
+            title: string;
+            description: string;
+        };
+        outline: {
+            root: string;
+            description: string;
+        };
+        soft: {
+            root: string;
+            description: string;
+        };
+        subtle: {
+            root: string;
+            description: string;
+        };
+        naked: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    avatar: string;
+    title: string;
+    description: string;
+    body: string;
+    actions: string;
+    footer: string;
+}, undefined, unknown, unknown, undefined>>;
+export type EmptyVariantProps = VariantProps<typeof emptyVariants>;
+export type EmptySlots = keyof ReturnType<typeof emptyVariants>;
+export declare const emptyDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        size: {
+            xs: {
+                avatar: string;
+                title: string;
+                description: string;
+            };
+            sm: {
+                avatar: string;
+                title: string;
+                description: string;
+            };
+            md: {
+                avatar: string;
+                title: string;
+                description: string;
+            };
+            lg: {
+                avatar: string;
+                title: string;
+                description: string;
+            };
+            xl: {
+                avatar: string;
+                title: string;
+                description: string;
+            };
+        };
+        variant: {
+            solid: {
+                root: string;
+                avatar: string;
+                title: string;
+                description: string;
+            };
+            outline: {
+                root: string;
+                description: string;
+            };
+            soft: {
+                root: string;
+                description: string;
+            };
+            subtle: {
+                root: string;
+                description: string;
+            };
+            naked: {
+                description: string;
+            };
+        };
+    }, {
+        root: string;
+        header: string;
+        avatar: string;
+        title: string;
+        description: string;
+        body: string;
+        actions: string;
+        footer: string;
+    }, {
+        size: {
+            xs: {
+                avatar: string;
+                title: string;
+                description: string;
+            };
+            sm: {
+                avatar: string;
+                title: string;
+                description: string;
+            };
+            md: {
+                avatar: string;
+                title: string;
+                description: string;
+            };
+            lg: {
+                avatar: string;
+                title: string;
+                description: string;
+            };
+            xl: {
+                avatar: string;
+                title: string;
+                description: string;
+            };
+        };
+        variant: {
+            solid: {
+                root: string;
+                avatar: string;
+                title: string;
+                description: string;
+            };
+            outline: {
+                root: string;
+                description: string;
+            };
+            soft: {
+                root: string;
+                description: string;
+            };
+            subtle: {
+                root: string;
+                description: string;
+            };
+            naked: {
+                description: string;
+            };
+        };
+    }, {
+        root: string;
+        header: string;
+        avatar: string;
+        title: string;
+        description: string;
+        body: string;
+        actions: string;
+        footer: string;
+    }>;
+    slots: Partial<Record<EmptySlots, string>>;
+};

package/dist/Empty/empty.variants.js

@@ -0,0 +1,73 @@
+import { tv } from 'tailwind-variants';
+export const emptyVariants = tv({
+    slots: {
+        root: 'relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0',
+        header: 'flex flex-col items-center gap-2 max-w-sm text-center',
+        avatar: 'shrink-0 mb-2',
+        title: 'text-on-surface text-pretty font-medium',
+        description: 'text-balance text-center',
+        body: 'flex flex-col items-center gap-4 max-w-sm',
+        actions: 'flex flex-wrap justify-center gap-2 shrink-0',
+        footer: 'flex flex-col items-center gap-2 max-w-sm'
+    },
+    variants: {
+        size: {
+            xs: {
+                avatar: 'size-8 text-base',
+                title: 'text-sm',
+                description: 'text-xs'
+            },
+            sm: {
+                avatar: 'size-9 text-lg',
+                title: 'text-sm',
+                description: 'text-xs'
+            },
+            md: {
+                avatar: 'size-10 text-xl',
+                title: 'text-base',
+                description: 'text-sm'
+            },
+            lg: {
+                avatar: 'size-11 text-[22px]',
+                title: 'text-base',
+                description: 'text-sm'
+            },
+            xl: {
+                avatar: 'size-12 text-2xl',
+                title: 'text-lg',
+                description: 'text-base'
+            }
+        },
+        variant: {
+            solid: {
+                root: 'bg-inverse-surface',
+                avatar: 'text-inverse-on-surface/70',
+                title: 'text-inverse-on-surface',
+                description: 'text-inverse-on-surface/80'
+            },
+            outline: {
+                root: 'ring ring-outline-variant',
+                description: 'text-on-surface-variant'
+            },
+            soft: {
+                root: 'bg-surface-container-highest/50',
+                description: 'text-on-surface-variant'
+            },
+            subtle: {
+                root: 'bg-surface-container-highest/50 ring ring-outline-variant',
+                description: 'text-on-surface-variant'
+            },
+            naked: {
+                description: 'text-on-surface-variant'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'outline',
+        size: 'md'
+    }
+});
+export const emptyDefaults = {
+    defaultVariants: emptyVariants.defaultVariants,
+    slots: {}
+};

package/dist/Empty/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Empty } from './Empty.svelte';
+export type { EmptyProps } from './empty.types.js';

package/dist/Empty/index.js

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

package/dist/FieldGroup/FieldGroup.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+    import type { FieldGroupProps } from './field-group.types.js'
+
+    export type Props = FieldGroupProps
+</script>
+
+<script lang="ts">
+    import { setContext } from 'svelte'
+    import { getComponentConfig } from '../config.js'
+    import { fieldGroupDefaults, fieldGroupVariants } from './field-group.variants.js'
+
+    const config = getComponentConfig('fieldGroup', fieldGroupDefaults)
+
+    let {
+        ref = $bindable(null),
+        as = 'div',
+        ui,
+        size = config.defaultVariants.size ?? 'md',
+        orientation = config.defaultVariants.orientation ?? 'horizontal',
+        class: className,
+        children,
+        ...restProps
+    }: Props = $props()
+
+    const variantSlots = $derived(fieldGroupVariants({ size, orientation }))
+    const classes = $derived({
+        root: variantSlots.root({ class: [config.slots.root, className, ui?.root] })
+    })
+
+    setContext<{
+        orientation: NonNullable<Props['orientation']>
+        size: NonNullable<Props['size']>
+    }>('fieldGroup', {
+        get orientation() {
+            return orientation
+        },
+        get size() {
+            return size
+        }
+    })
+</script>
+
+<svelte:element
+    this={as}
+    bind:this={ref}
+    class={classes.root}
+    data-orientation={orientation}
+    {...restProps}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</svelte:element>

package/dist/FieldGroup/FieldGroup.svelte.d.ts

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

package/dist/FieldGroup/field-group.types.d.ts

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { FieldGroupSlots, FieldGroupVariantProps } from './field-group.variants.js';
+export type FieldGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * The HTML element to render as.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Controls the size of all child components in the group.
+     * @default 'md'
+     */
+    size?: NonNullable<FieldGroupVariantProps['size']>;
+    /**
+     * Controls the layout direction of the group.
+     * @default 'horizontal'
+     */
+    orientation?: NonNullable<FieldGroupVariantProps['orientation']>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific field group slots.
+     */
+    ui?: Partial<Record<FieldGroupSlots, ClassNameValue>>;
+    /**
+     * The child content of the field group.
+     */
+    children?: Snippet;
+};

package/dist/FieldGroup/field-group.types.js

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

package/dist/FieldGroup/field-group.variants.d.ts

@@ -0,0 +1,116 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const fieldGroupVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const fieldGroupVariant: {
+    fieldGroup: {
+        horizontal: string;
+        vertical: string;
+    };
+};
+export declare const fieldGroupVariantWithRoot: {
+    fieldGroup: {
+        horizontal: {
+            root: string;
+            base: string;
+        };
+        vertical: {
+            root: string;
+            base: string;
+        };
+    };
+};
+export type FieldGroupVariantProps = VariantProps<typeof fieldGroupVariants>;
+export type FieldGroupSlots = keyof ReturnType<typeof fieldGroupVariants>;
+export declare const fieldGroupDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        size: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+            };
+            vertical: {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+    }, {
+        size: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+            };
+            vertical: {
+                root: string;
+            };
+        };
+    }, {
+        root: string;
+    }>;
+    slots: Partial<Record<FieldGroupSlots, string>>;
+};

package/dist/FieldGroup/field-group.variants.js

@@ -0,0 +1,49 @@
+import { tv } from 'tailwind-variants';
+export const fieldGroupVariants = tv({
+    slots: {
+        root: 'relative'
+    },
+    variants: {
+        size: {
+            xs: '',
+            sm: '',
+            md: '',
+            lg: '',
+            xl: ''
+        },
+        orientation: {
+            horizontal: {
+                root: 'inline-flex -space-x-px'
+            },
+            vertical: {
+                root: 'flex flex-col -space-y-px'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        orientation: 'horizontal'
+    }
+});
+export const fieldGroupVariant = {
+    fieldGroup: {
+        horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]',
+        vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]'
+    }
+};
+export const fieldGroupVariantWithRoot = {
+    fieldGroup: {
+        horizontal: {
+            root: 'group has-focus-visible:z-[1]',
+            base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
+        },
+        vertical: {
+            root: 'group has-focus-visible:z-[1]',
+            base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
+        }
+    }
+};
+export const fieldGroupDefaults = {
+    defaultVariants: fieldGroupVariants.defaultVariants,
+    slots: {}
+};

package/dist/FieldGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FieldGroup } from './FieldGroup.svelte';
+export type { FieldGroupProps } from './field-group.types.js';

package/dist/FieldGroup/index.js

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