sv5ui 0.0.1

package/dist/Link/link.variants.d.ts

@@ -0,0 +1,138 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const linkVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+    raw: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string[];
+}, undefined, {
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+    raw: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+        false: string;
+    };
+    raw: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type LinkVariantProps = VariantProps<typeof linkVariants>;
+export type LinkSlots = keyof ReturnType<typeof linkVariants>;
+export declare const linkDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+        };
+        active: {
+            true: string;
+            false: string;
+        };
+        disabled: {
+            true: {
+                base: string;
+            };
+            false: string;
+        };
+        raw: {
+            true: string;
+            false: string;
+        };
+    }, {
+        base: string[];
+    }, {
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+        };
+        active: {
+            true: string;
+            false: string;
+        };
+        disabled: {
+            true: {
+                base: string;
+            };
+            false: string;
+        };
+        raw: {
+            true: string;
+            false: string;
+        };
+    }, {
+        base: string[];
+    }>;
+    slots: Partial<Record<LinkSlots, string>>;
+};

package/dist/Link/link.variants.js

@@ -0,0 +1,145 @@
+import { tv } from 'tailwind-variants';
+export const linkVariants = tv({
+    slots: {
+        base: [
+            'inline-flex items-center',
+            'transition-colors duration-200',
+            'focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
+        ]
+    },
+    variants: {
+        color: {
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            success: '',
+            warning: '',
+            error: '',
+            info: ''
+        },
+        active: {
+            true: '',
+            false: ''
+        },
+        disabled: {
+            true: {
+                base: 'cursor-not-allowed opacity-75'
+            },
+            false: ''
+        },
+        raw: {
+            true: '',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        // ========== PRIMARY ==========
+        {
+            color: 'primary',
+            active: true,
+            raw: false,
+            class: { base: 'text-primary' }
+        },
+        {
+            color: 'primary',
+            active: false,
+            disabled: false,
+            raw: false,
+            class: { base: 'text-primary/80 hover:text-primary' }
+        },
+        // ========== SECONDARY ==========
+        {
+            color: 'secondary',
+            active: true,
+            raw: false,
+            class: { base: 'text-secondary' }
+        },
+        {
+            color: 'secondary',
+            active: false,
+            disabled: false,
+            raw: false,
+            class: { base: 'text-secondary/80 hover:text-secondary' }
+        },
+        // ========== TERTIARY ==========
+        {
+            color: 'tertiary',
+            active: true,
+            raw: false,
+            class: { base: 'text-tertiary' }
+        },
+        {
+            color: 'tertiary',
+            active: false,
+            disabled: false,
+            raw: false,
+            class: { base: 'text-tertiary/80 hover:text-tertiary' }
+        },
+        // ========== SUCCESS ==========
+        {
+            color: 'success',
+            active: true,
+            raw: false,
+            class: { base: 'text-success' }
+        },
+        {
+            color: 'success',
+            active: false,
+            disabled: false,
+            raw: false,
+            class: { base: 'text-success/80 hover:text-success' }
+        },
+        // ========== WARNING ==========
+        {
+            color: 'warning',
+            active: true,
+            raw: false,
+            class: { base: 'text-warning' }
+        },
+        {
+            color: 'warning',
+            active: false,
+            disabled: false,
+            raw: false,
+            class: { base: 'text-warning/80 hover:text-warning' }
+        },
+        // ========== ERROR ==========
+        {
+            color: 'error',
+            active: true,
+            raw: false,
+            class: { base: 'text-error' }
+        },
+        {
+            color: 'error',
+            active: false,
+            disabled: false,
+            raw: false,
+            class: { base: 'text-error/80 hover:text-error' }
+        },
+        // ========== INFO ==========
+        {
+            color: 'info',
+            active: true,
+            raw: false,
+            class: { base: 'text-info' }
+        },
+        {
+            color: 'info',
+            active: false,
+            disabled: false,
+            raw: false,
+            class: { base: 'text-info/80 hover:text-info' }
+        }
+    ],
+    defaultVariants: {
+        color: 'primary',
+        active: false,
+        disabled: false,
+        raw: false
+    }
+});
+export const linkDefaults = {
+    defaultVariants: linkVariants.defaultVariants,
+    slots: {}
+};

package/dist/Progress/Progress.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" module>
+    import type { ProgressProps } from './progress.types.js'
+
+    export type Props = ProgressProps
+</script>
+
+<script lang="ts">
+    import { Progress } from 'bits-ui'
+    import { progressVariants, progressDefaults } from './progress.variants.js'
+    import { getComponentConfig } from '../config.js'
+
+    const config = getComponentConfig('progress', progressDefaults)
+
+    let {
+        ref = $bindable(null),
+        value = null,
+        max = 100,
+        status = false,
+        color = config.defaultVariants.color,
+        size = config.defaultVariants.size,
+        orientation = config.defaultVariants.orientation,
+        inverted = false,
+        animation = config.defaultVariants.animation,
+        ui,
+        class: className,
+        statusSlot,
+        ...restProps
+    }: Props = $props()
+
+    const maxValue = $derived(Array.isArray(max) ? max.length - 1 : max)
+    const percent = $derived(value != null ? Math.round((Math.min(value, maxValue) / maxValue) * 100) : 0)
+    const isIndeterminate = $derived(value == null)
+    const state = $derived(isIndeterminate ? 'indeterminate' : 'determinate')
+
+    const indicatorStyle = $derived.by(() => {
+        if (isIndeterminate) return ''
+        const offset = 100 - percent
+        if (orientation === 'horizontal') {
+            return inverted ? `transform: translateX(${offset}%);` : `transform: translateX(-${offset}%);`
+        }
+        // Vertical: fill from bottom to top (positive Y = down)
+        return inverted ? `transform: translateY(-${offset}%);` : `transform: translateY(${offset}%);`
+    })
+
+    const classes = $derived.by(() => {
+        const slots = progressVariants({ animation, color, size, orientation, inverted })
+        return {
+            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+            base: slots.base({ class: [config.slots.base, ui?.base] }),
+            indicator: slots.indicator({ class: [config.slots.indicator, ui?.indicator] }),
+            status: slots.status({ class: [config.slots.status, ui?.status] }),
+            stepsBase: slots.steps({ class: [config.slots.steps, ui?.steps] }),
+            stepActive: progressVariants({ size, step: 'active' }).steps(),
+            stepOther: progressVariants({ size, step: 'other' }).steps()
+        }
+    })
+</script>
+
+<Progress.Root
+    bind:ref
+    value={value ?? undefined}
+    max={maxValue}
+    class={classes.root}
+    {...restProps}
+>
+    {#if status && !Array.isArray(max)}
+        <div class={classes.status} style={isIndeterminate ? '' : `width: ${percent}%;`}>
+            {#if statusSlot}
+                {@render statusSlot({ percent })}
+            {:else}
+                {percent}%
+            {/if}
+        </div>
+    {/if}
+
+    <div class={classes.base}>
+        <div class={classes.indicator} data-state={state} style={indicatorStyle}></div>
+    </div>
+
+    {#if Array.isArray(max)}
+        <div class={classes.stepsBase}>
+            {#each max as step, index (index)}
+                <span class={value != null && index <= value ? classes.stepActive : classes.stepOther}>
+                    {step}
+                </span>
+            {/each}
+        </div>
+    {/if}
+</Progress.Root>

package/dist/Progress/Progress.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ProgressProps } from './progress.types.js';
+export type Props = ProgressProps;
+import { Progress } from 'bits-ui';
+declare const Progress: import("svelte").Component<ProgressProps, {}, "ref">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/Progress/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Progress } from './Progress.svelte';
+export type { ProgressProps } from './progress.types.js';

package/dist/Progress/index.js

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

package/dist/Progress/progress.types.d.ts

@@ -0,0 +1,63 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { Progress } from 'bits-ui';
+import type { ProgressVariantProps, ProgressSlots } from './progress.variants.js';
+export type ProgressProps = Omit<Progress.RootProps, 'max'> & {
+    /**
+     * The current progress value.
+     * When undefined or null, displays an indeterminate state.
+     */
+    value?: number | null;
+    /**
+     * The maximum value of the progress.
+     * Accepts a number or an array of strings for step-based display.
+     * @default 100
+     */
+    max?: number | string[];
+    /**
+     * Displays the status text showing current value relative to max.
+     * @default false
+     */
+    status?: boolean;
+    /**
+     * Sets the color scheme applied to the progress indicator.
+     * @default 'primary'
+     */
+    color?: NonNullable<ProgressVariantProps['color']>;
+    /**
+     * Controls the thickness of the progress bar.
+     * @default 'md'
+     */
+    size?: NonNullable<ProgressVariantProps['size']>;
+    /**
+     * Controls the layout direction of the progress bar.
+     * @default 'horizontal'
+     */
+    orientation?: NonNullable<ProgressVariantProps['orientation']>;
+    /**
+     * Inverts the fill direction of the progress bar.
+     * @default false
+     */
+    inverted?: boolean;
+    /**
+     * Sets the animation style for the indeterminate state.
+     * @default 'carousel'
+     */
+    animation?: NonNullable<ProgressVariantProps['animation']>;
+    /**
+     * Override styles for specific progress slots.
+     * Available slots: root, base, indicator, status, steps.
+     */
+    ui?: Partial<Record<ProgressSlots, ClassNameValue>>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Custom content rendered in the status area.
+     * Takes precedence over the default status display.
+     */
+    statusSlot?: Snippet<[{
+        percent: number;
+    }]>;
+};

package/dist/Progress/progress.types.js

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