sv5ui 0.0.1

package/dist/Card/card.variants.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+export const cardVariants = tv({
+    slots: {
+        root: 'rounded-lg overflow-hidden',
+        header: 'p-4 sm:px-6',
+        body: 'p-4 sm:p-6',
+        footer: 'p-4 sm:px-6'
+    },
+    variants: {
+        variant: {
+            solid: {
+                root: 'bg-inverse-surface text-inverse-on-surface'
+            },
+            outline: {
+                root: 'bg-surface ring ring-outline-variant divide-y divide-outline-variant'
+            },
+            soft: {
+                root: 'bg-surface-container divide-y divide-outline-variant'
+            },
+            subtle: {
+                root: 'bg-surface-container ring ring-outline-variant divide-y divide-outline-variant'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'outline'
+    }
+});
+export const cardDefaults = {
+    defaultVariants: cardVariants.defaultVariants,
+    slots: {}
+};

package/dist/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Card } from './Card.svelte';
+export type { CardProps } from './card.types.js';

package/dist/Card/index.js

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

package/dist/Chip/Chip.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+    import type { ChipProps } from './chip.types.js'
+
+    export type Props = ChipProps
+</script>
+
+<script lang="ts">
+    import { chipVariants, chipDefaults } from './chip.variants.js'
+    import { getComponentConfig } from '../config.js'
+
+    const config = getComponentConfig('chip', chipDefaults)
+
+    let {
+        as = 'div',
+        ui,
+        text,
+        color = config.defaultVariants.color,
+        size = config.defaultVariants.size,
+        position = config.defaultVariants.position,
+        inset = false,
+        standalone = false,
+        show = true,
+        class: className,
+        children,
+        content,
+        ...restProps
+    }: Props = $props()
+
+    const classes = $derived.by(() => {
+        const slots = chipVariants({ color, size, position, inset, standalone })
+        return {
+            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+            base: slots.base({ class: [config.slots.base, ui?.base] })
+        }
+    })
+</script>
+
+<svelte:element this={as} class={classes.root} {...restProps}>
+    {@render children?.()}
+
+    {#if show}
+        <span class={classes.base}>
+            {#if content}
+                {@render content()}
+            {:else if text !== undefined}
+                {text}
+            {/if}
+        </span>
+    {/if}
+</svelte:element>

package/dist/Chip/Chip.svelte.d.ts

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

package/dist/Chip/chip.types.d.ts

@@ -0,0 +1,62 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChipVariantProps, ChipSlots } from './chip.variants.js';
+export type ChipProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * The HTML element to render as.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Override styles for specific chip slots.
+     */
+    ui?: Partial<Record<ChipSlots, ClassNameValue>>;
+    /**
+     * Text or number displayed inside the chip.
+     */
+    text?: string | number;
+    /**
+     * Sets the color scheme applied to the chip.
+     * @default 'primary'
+     */
+    color?: NonNullable<ChipVariantProps['color']>;
+    /**
+     * Controls the dimensions of the chip.
+     * @default 'md'
+     */
+    size?: NonNullable<ChipVariantProps['size']>;
+    /**
+     * Controls the position relative to wrapped content.
+     * @default 'top-right'
+     */
+    position?: NonNullable<ChipVariantProps['position']>;
+    /**
+     * Keeps the chip inside the component bounds.
+     * @default false
+     */
+    inset?: boolean;
+    /**
+     * Renders the chip without absolute positioning.
+     * @default false
+     */
+    standalone?: boolean;
+    /**
+     * Controls the visibility of the chip.
+     * @default true
+     */
+    show?: boolean;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Content to wrap with the chip indicator.
+     */
+    children?: Snippet;
+    /**
+     * Custom content rendered inside the chip.
+     * Takes precedence over text.
+     */
+    content?: Snippet;
+};

package/dist/Chip/chip.types.js

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

package/dist/Chip/chip.variants.d.ts

@@ -0,0 +1,328 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const chipVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        error: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+    size: {
+        '3xs': string;
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    position: {
+        'top-right': {
+            base: string;
+        };
+        'bottom-right': {
+            base: string;
+        };
+        'top-left': {
+            base: string;
+        };
+        'bottom-left': {
+            base: string;
+        };
+    };
+    inset: {
+        false: {};
+    };
+    standalone: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+}, undefined, {
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        error: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+    size: {
+        '3xs': string;
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    position: {
+        'top-right': {
+            base: string;
+        };
+        'bottom-right': {
+            base: string;
+        };
+        'top-left': {
+            base: string;
+        };
+        'bottom-left': {
+            base: string;
+        };
+    };
+    inset: {
+        false: {};
+    };
+    standalone: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        error: {
+            base: string;
+        };
+        info: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+    size: {
+        '3xs': string;
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    position: {
+        'top-right': {
+            base: string;
+        };
+        'bottom-right': {
+            base: string;
+        };
+        'top-left': {
+            base: string;
+        };
+        'bottom-left': {
+            base: string;
+        };
+    };
+    inset: {
+        false: {};
+    };
+    standalone: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ChipVariantProps = VariantProps<typeof chipVariants>;
+export type ChipSlots = keyof ReturnType<typeof chipVariants>;
+export declare const chipDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        color: {
+            primary: {
+                base: string;
+            };
+            secondary: {
+                base: string;
+            };
+            tertiary: {
+                base: string;
+            };
+            success: {
+                base: string;
+            };
+            warning: {
+                base: string;
+            };
+            error: {
+                base: string;
+            };
+            info: {
+                base: string;
+            };
+            surface: {
+                base: string;
+            };
+        };
+        size: {
+            '3xs': string;
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+        };
+        position: {
+            'top-right': {
+                base: string;
+            };
+            'bottom-right': {
+                base: string;
+            };
+            'top-left': {
+                base: string;
+            };
+            'bottom-left': {
+                base: string;
+            };
+        };
+        inset: {
+            false: {};
+        };
+        standalone: {
+            true: {};
+            false: {
+                base: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string;
+    }, {
+        color: {
+            primary: {
+                base: string;
+            };
+            secondary: {
+                base: string;
+            };
+            tertiary: {
+                base: string;
+            };
+            success: {
+                base: string;
+            };
+            warning: {
+                base: string;
+            };
+            error: {
+                base: string;
+            };
+            info: {
+                base: string;
+            };
+            surface: {
+                base: string;
+            };
+        };
+        size: {
+            '3xs': string;
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+        };
+        position: {
+            'top-right': {
+                base: string;
+            };
+            'bottom-right': {
+                base: string;
+            };
+            'top-left': {
+                base: string;
+            };
+            'bottom-left': {
+                base: string;
+            };
+        };
+        inset: {
+            false: {};
+        };
+        standalone: {
+            true: {};
+            false: {
+                base: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string;
+    }>;
+    slots: Partial<Record<ChipSlots, string>>;
+};

package/dist/Chip/chip.variants.js

@@ -0,0 +1,58 @@
+import { tv } from 'tailwind-variants';
+export const chipVariants = tv({
+    slots: {
+        root: 'relative inline-flex items-center justify-center shrink-0',
+        base: 'rounded-full ring ring-surface flex items-center justify-center font-medium whitespace-nowrap'
+    },
+    variants: {
+        color: {
+            primary: { base: 'bg-primary text-on-primary' },
+            secondary: { base: 'bg-secondary text-on-secondary' },
+            tertiary: { base: 'bg-tertiary text-on-tertiary' },
+            success: { base: 'bg-success text-on-success' },
+            warning: { base: 'bg-warning text-on-warning' },
+            error: { base: 'bg-error text-on-error' },
+            info: { base: 'bg-info text-on-info' },
+            surface: { base: 'bg-inverse-surface text-inverse-on-surface' }
+        },
+        size: {
+            '3xs': 'h-[4px] min-w-[4px] text-[4px]',
+            '2xs': 'h-[5px] min-w-[5px] text-[5px]',
+            xs: 'h-[6px] min-w-[6px] text-[6px]',
+            sm: 'h-[7px] min-w-[7px] text-[7px]',
+            md: 'h-[8px] min-w-[8px] text-[8px]',
+            lg: 'h-[9px] min-w-[9px] text-[9px]',
+            xl: 'h-[10px] min-w-[10px] text-[10px]',
+            '2xl': 'h-[11px] min-w-[11px] text-[11px]',
+            '3xl': 'h-[12px] min-w-[12px] text-[12px]'
+        },
+        position: {
+            'top-right': { base: 'top-0 right-0' },
+            'bottom-right': { base: 'bottom-0 right-0' },
+            'top-left': { base: 'top-0 left-0' },
+            'bottom-left': { base: 'bottom-0 left-0' }
+        },
+        inset: {
+            false: {}
+        },
+        standalone: {
+            true: {},
+            false: { base: 'absolute' }
+        }
+    },
+    compoundVariants: [
+        { position: 'top-right', inset: false, class: { base: '-translate-y-1/2 translate-x-1/2' } },
+        { position: 'bottom-right', inset: false, class: { base: 'translate-y-1/2 translate-x-1/2' } },
+        { position: 'top-left', inset: false, class: { base: '-translate-y-1/2 -translate-x-1/2' } },
+        { position: 'bottom-left', inset: false, class: { base: 'translate-y-1/2 -translate-x-1/2' } }
+    ],
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+        position: 'top-right'
+    }
+});
+export const chipDefaults = {
+    defaultVariants: chipVariants.defaultVariants,
+    slots: {}
+};

package/dist/Chip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Chip } from './Chip.svelte';
+export type { ChipProps } from './chip.types.js';

package/dist/Chip/index.js

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

package/dist/Container/Container.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+    import type { ContainerProps } from './container.types.js'
+
+    export type Props = ContainerProps
+</script>
+
+<script lang="ts">
+    import { containerVariants, containerDefaults } from './container.variants.js'
+    import { getComponentConfig } from '../config.js'
+
+    const config = getComponentConfig('container', containerDefaults)
+    const slots = containerVariants()
+
+    let {
+        as = 'div',
+        ui,
+        class: className,
+        children,
+        ...restProps
+    }: Props = $props()
+
+    const rootClass = $derived(slots.root({ class: [config.slots.root, className, ui?.root] }))
+</script>
+
+<svelte:element this={as} class={rootClass} {...restProps}>
+    {@render children?.()}
+</svelte:element>

package/dist/Container/Container.svelte.d.ts

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

package/dist/Container/container.types.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { ContainerSlots } from './container.variants.js';
+export type ContainerProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Sets the HTML element type to render.
+     * @default 'div'
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific container slots.
+     * Available slots: root.
+     */
+    ui?: Partial<Record<ContainerSlots, ClassNameValue>>;
+};

package/dist/Container/container.types.js

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

package/dist/Container/container.variants.d.ts

@@ -0,0 +1,29 @@
+export declare const containerVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            root?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ContainerSlots = keyof ReturnType<typeof containerVariants>;
+export declare const containerDefaults: {
+    slots: Partial<Record<ContainerSlots, string>>;
+};

package/dist/Container/container.variants.js

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+export const containerVariants = tv({
+    slots: {
+        root: 'w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'
+    }
+});
+export const containerDefaults = {
+    slots: {}
+};

package/dist/Container/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Container } from './Container.svelte';
+export type { ContainerProps } from './container.types.js';

package/dist/Container/index.js

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