svelora 2.1.0

package/dist/Popover/popover.variants.d.ts

@@ -0,0 +1,53 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
+    transition: {
+        true: {
+            content: string[];
+        };
+    };
+}, {
+    content: string[];
+    arrow: string;
+}, undefined, {
+    transition: {
+        true: {
+            content: string[];
+        };
+    };
+}, {
+    content: string[];
+    arrow: string;
+}, import("tailwind-variants").TVReturnType<{
+    transition: {
+        true: {
+            content: string[];
+        };
+    };
+}, {
+    content: string[];
+    arrow: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PopoverVariantProps = VariantProps<typeof popoverVariants>;
+export type PopoverSlots = keyof ReturnType<typeof popoverVariants>;
+export declare const popoverDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        transition: {
+            true: {
+                content: string[];
+            };
+        };
+    }, {
+        content: string[];
+        arrow: string;
+    }, {
+        transition: {
+            true: {
+                content: string[];
+            };
+        };
+    }, {
+        content: string[];
+        arrow: string;
+    }>;
+    slots: Partial<Record<PopoverSlots, string>>;
+};

package/dist/Popover/popover.variants.js

@@ -0,0 +1,31 @@
+import { tv } from 'tailwind-variants';
+export const popoverVariants = tv({
+    slots: {
+        content: [
+            'z-50',
+            'bg-surface-container-lowest text-on-surface ring ring-surface-container-highest',
+            'rounded-md shadow-lg',
+            'focus:outline-none pointer-events-auto'
+        ],
+        arrow: ''
+    },
+    variants: {
+        transition: {
+            true: {
+                content: [
+                    'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+                    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+                    'data-[side=top]:slide-in-from-bottom-2 data-[side=right]:slide-in-from-left-2',
+                    'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2'
+                ]
+            }
+        }
+    },
+    defaultVariants: {
+        transition: true
+    }
+});
+export const popoverDefaults = {
+    defaultVariants: popoverVariants.defaultVariants,
+    slots: {}
+};

package/dist/Progress/Progress.svelte

@@ -0,0 +1,135 @@
+<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 { getComponentConfig } from '../config.js'
+    import { progressDefaults, progressVariants } from './progress.variants.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,
+        stepSlot,
+        ...restProps
+    }: Props = $props()
+
+    const isIndeterminate = $derived(value === null)
+    const hasSteps = $derived(Array.isArray(max))
+
+    const realMax = $derived.by(() => {
+        if (isIndeterminate || !max) return undefined
+        if (Array.isArray(max)) return max.length - 1
+        return Number(max)
+    })
+
+    const percent = $derived.by(() => {
+        if (isIndeterminate) return undefined
+        if (value! < 0) return 0
+        if (value! > (realMax ?? 100)) return 100
+        return Math.round((value! / (realMax ?? 100)) * 100)
+    })
+
+    const indicatorStyle = $derived.by(() => {
+        if (percent === undefined) return ''
+        const offset = 100 - percent
+        if (orientation === 'vertical') {
+            return `transform: translateY(${inverted ? '' : '-'}${offset}%);`
+        }
+        return `transform: translateX(${inverted ? '' : '-'}${offset}%);`
+    })
+
+    const statusStyle = $derived.by(() => {
+        const val = `${Math.max(percent ?? 0, 0)}%`
+        return orientation === 'vertical' ? `height: ${val};` : `width: ${val};`
+    })
+
+    function stepVariant(index: number): 'active' | 'first' | 'last' | 'other' {
+        const isActive = index === Number(value)
+        const isFirst = index === 0
+        const isLast = index === realMax
+
+        if (isActive && !isFirst) return 'active'
+        if (isFirst && isActive) return 'first'
+        if (isLast && isActive) return 'last'
+        return 'other'
+    }
+
+    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] }),
+            steps: slots.steps({ class: [config.slots.steps, ui?.steps] })
+        }
+    })
+
+    const stepClasses = $derived.by(() => {
+        const make = (step: 'active' | 'first' | 'last' | 'other') =>
+            progressVariants({ size, orientation, inverted, step }).step({
+                class: [config.slots.step, ui?.step]
+            })
+        return {
+            active: make('active'),
+            first: make('first'),
+            last: make('last'),
+            other: make('other')
+        }
+    })
+
+    const state = $derived(isIndeterminate ? 'indeterminate' : 'determinate')
+</script>
+
+<Progress.Root
+    bind:ref
+    value={value ?? undefined}
+    max={realMax}
+    class={classes.root}
+    data-orientation={orientation}
+    {...restProps}
+>
+    {#if !isIndeterminate && status}
+        <div class={classes.status} style={statusStyle}>
+            {#if statusSlot}
+                {@render statusSlot({ percent: percent ?? 0 })}
+            {:else}
+                {percent}%
+            {/if}
+        </div>
+    {/if}
+
+    <div class={classes.base}>
+        <div class={classes.indicator} data-state={state} style={indicatorStyle}></div>
+    </div>
+
+    {#if hasSteps && Array.isArray(max)}
+        <div class={classes.steps}>
+            {#each max as step, index (index)}
+                {@const stepClass = stepClasses[stepVariant(index)]}
+                <div class={stepClass}>
+                    {#if stepSlot}
+                        {@render stepSlot({ step, index })}
+                    {:else}
+                        {step}
+                    {/if}
+                </div>
+            {/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,71 @@
+import type { Progress } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { ProgressSlots, ProgressVariantProps } 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, step.
+     */
+    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;
+    }]>;
+    /**
+     * Custom content rendered for each step label.
+     * Takes precedence over the default step text.
+     */
+    stepSlot?: Snippet<[{
+        step: string;
+        index: number;
+    }]>;
+};

package/dist/Progress/progress.types.js

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