svelora 2.1.0

package/dist/Table/table.variants.js

@@ -0,0 +1,126 @@
+import { tv } from 'tailwind-variants';
+export const tableVariants = tv({
+    slots: {
+        root: 'relative w-full overflow-x-auto scrollbar-thin rounded-xl border border-outline-variant/50 bg-surface [contain:inline-size]',
+        base: 'min-w-full',
+        caption: 'sr-only',
+        thead: 'relative bg-surface-container-low',
+        tbody: [
+            '[&>tr]:transition-colors [&>tr]:duration-150',
+            '[&>tr]:border-b [&>tr]:border-outline-variant/30',
+            '[&>tr:last-child]:border-b-0'
+        ],
+        tfoot: 'relative bg-surface-container-low border-t border-outline-variant/50',
+        tr: 'data-[selected=true]:bg-primary-container/20 data-[pinned-row=true]:bg-surface-container-lowest',
+        th: [
+            'relative px-4 py-3 text-xs font-semibold uppercase tracking-wider',
+            'text-on-surface-variant text-left rtl:text-right',
+            '[&:has([role=checkbox])]:pe-0 [&:has([role=checkbox])]:w-12'
+        ],
+        td: [
+            'px-4 py-3.5 text-sm text-on-surface',
+            'whitespace-nowrap max-sm:whitespace-normal max-sm:break-words',
+            '[&:has([role=checkbox])]:pe-0 [&:has([role=checkbox])]:w-12'
+        ],
+        separator: 'h-px bg-outline-variant/50',
+        empty: 'py-10 text-center text-sm text-on-surface-variant/70',
+        loading: 'py-10 text-center'
+    },
+    variants: {
+        pinned: {
+            true: {
+                th: 'sticky bg-surface-container-low/95 backdrop-blur-sm z-1',
+                td: 'sticky bg-surface/95 backdrop-blur-sm z-1'
+            }
+        },
+        hoverable: {
+            true: {
+                tbody: '[&>tr]:data-[selectable=true]:cursor-pointer [&>tr]:data-[selectable=true]:hover:bg-surface-container/60 [&>tr]:data-[selectable=true]:focus-visible:outline-2 [&>tr]:data-[selectable=true]:focus-visible:outline-primary [&>tr]:data-[selectable=true]:focus-visible:outline-offset-[-2px]'
+            }
+        },
+        sticky: {
+            true: {
+                thead: 'sticky top-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10 rounded-t-xl',
+                tfoot: 'sticky bottom-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10 rounded-b-xl'
+            },
+            header: {
+                thead: 'sticky top-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10 rounded-t-xl'
+            },
+            footer: {
+                tfoot: 'sticky bottom-0 inset-x-0 bg-surface-container-low/95 backdrop-blur-sm z-10 rounded-b-xl'
+            }
+        },
+        striped: {
+            true: {
+                tbody: '[&>tr:nth-child(even)]:bg-surface-container-lowest/60'
+            }
+        },
+        loading: {
+            true: {
+                thead: 'after:absolute after:top-0 after:left-0 after:z-20 after:h-0.5 after:rounded-full'
+            }
+        },
+        loadingColor: {
+            primary: '',
+            secondary: '',
+            tertiary: '',
+            success: '',
+            warning: '',
+            error: '',
+            info: '',
+            surface: ''
+        },
+        loadingAnimation: {
+            carousel: '',
+            'carousel-inverse': '',
+            swing: '',
+            elastic: ''
+        }
+    },
+    compoundVariants: [
+        // ========== LOADING COLOR ==========
+        { loading: true, loadingColor: 'primary', class: { thead: 'after:bg-primary' } },
+        { loading: true, loadingColor: 'secondary', class: { thead: 'after:bg-secondary' } },
+        { loading: true, loadingColor: 'tertiary', class: { thead: 'after:bg-tertiary' } },
+        { loading: true, loadingColor: 'success', class: { thead: 'after:bg-success' } },
+        { loading: true, loadingColor: 'warning', class: { thead: 'after:bg-warning' } },
+        { loading: true, loadingColor: 'error', class: { thead: 'after:bg-error' } },
+        { loading: true, loadingColor: 'info', class: { thead: 'after:bg-info' } },
+        { loading: true, loadingColor: 'surface', class: { thead: 'after:bg-on-surface' } },
+        // ========== LOADING ANIMATION ==========
+        {
+            loading: true,
+            loadingAnimation: 'carousel',
+            class: { thead: 'after:animate-[carousel_2s_ease-in-out_infinite]' }
+        },
+        {
+            loading: true,
+            loadingAnimation: 'carousel-inverse',
+            class: { thead: 'after:animate-[carousel-inverse_2s_ease-in-out_infinite]' }
+        },
+        {
+            loading: true,
+            loadingAnimation: 'swing',
+            class: { thead: 'after:animate-[swing_2s_ease-in-out_infinite]' }
+        },
+        {
+            loading: true,
+            loadingAnimation: 'elastic',
+            class: { thead: 'after:animate-[elastic_2s_ease-in-out_infinite]' }
+        }
+    ],
+    defaultVariants: {
+        hoverable: true,
+        loadingColor: 'primary',
+        loadingAnimation: 'carousel'
+    }
+});
+export const tableDefaults = {
+    defaultVariants: {
+        ...tableVariants.defaultVariants,
+        hoverable: true,
+        loadingColor: 'primary',
+        loadingAnimation: 'carousel'
+    },
+    slots: {}
+};

package/dist/Tabs/Tabs.svelte

@@ -0,0 +1,188 @@
+<script lang="ts" module>
+    import type { TabsItem, TabsProps } from './tabs.types.js'
+
+    export type Props = TabsProps
+</script>
+
+<script lang="ts">
+    import { Tabs } from 'bits-ui'
+    import { tick, untrack } from 'svelte'
+    import { getComponentConfig } from '../config.js'
+    import Icon from '../Icon/Icon.svelte'
+    import { tabsDefaults, tabsVariants } from './tabs.variants.js'
+
+    const config = getComponentConfig('tabs', tabsDefaults)
+
+    let {
+        ref = $bindable(null),
+        items = [],
+        value = $bindable(),
+        defaultValue,
+        onValueChange,
+        variant = config.defaultVariants.variant ?? 'pill',
+        color = config.defaultVariants.color ?? 'primary',
+        size = config.defaultVariants.size ?? 'md',
+        orientation = config.defaultVariants.orientation ?? 'horizontal',
+        activationMode = 'automatic',
+        disabled = false,
+        loop = true,
+        content: showContent = true,
+        ui,
+        class: className,
+        leading,
+        label: labelSlot,
+        trailing,
+        body: bodySlot,
+        ...restProps
+    }: Props = $props()
+
+    // Initialize value if not provided (intentionally reads initial values only)
+    if (value === undefined) {
+        value = untrack(
+            () => defaultValue ?? (items.length > 0 ? (items[0].value ?? '0') : undefined)
+        )
+    }
+
+    let listEl: HTMLElement | null = $state(null)
+    let indicatorStyle = $state('')
+
+    const variantSlots = $derived(tabsVariants({ variant, color, size, orientation }))
+
+    const classes = $derived({
+        root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
+        list: variantSlots.list({ class: [config.slots.list, ui?.list] }),
+        indicator: variantSlots.indicator({
+            class: [config.slots.indicator, ui?.indicator]
+        }),
+        trigger: variantSlots.trigger({ class: [config.slots.trigger, ui?.trigger] }),
+        leadingIcon: variantSlots.leadingIcon({
+            class: [config.slots.leadingIcon, ui?.leadingIcon]
+        }),
+        label: variantSlots.label({ class: [config.slots.label, ui?.label] }),
+        content: variantSlots.content({ class: [config.slots.content, ui?.content] })
+    })
+
+    let rafId = 0
+
+    function getItemValue(item: TabsItem, index: number): string {
+        return item.value ?? String(index)
+    }
+
+    function getTriggerClass(item: TabsItem) {
+        if (!item.ui?.trigger && !item.class) return classes.trigger
+        return variantSlots.trigger({
+            class: [config.slots.trigger, ui?.trigger, item.ui?.trigger, item.class]
+        })
+    }
+
+    function getIconClass(item: TabsItem) {
+        if (!item.ui?.leadingIcon) return classes.leadingIcon
+        return variantSlots.leadingIcon({
+            class: [config.slots.leadingIcon, ui?.leadingIcon, item.ui?.leadingIcon]
+        })
+    }
+
+    function getLabelClass(item: TabsItem) {
+        if (!item.ui?.label) return classes.label
+        return variantSlots.label({
+            class: [config.slots.label, ui?.label, item.ui?.label]
+        })
+    }
+
+    function updateIndicator() {
+        if (!listEl) return
+        const activeTrigger = listEl.querySelector('[data-state="active"]') as HTMLElement
+        if (!activeTrigger) {
+            indicatorStyle = 'opacity: 0;'
+            return
+        }
+
+        if (orientation === 'horizontal') {
+            indicatorStyle = `left: ${activeTrigger.offsetLeft}px; width: ${activeTrigger.offsetWidth}px;`
+        } else {
+            indicatorStyle = `top: ${activeTrigger.offsetTop}px; height: ${activeTrigger.offsetHeight}px;`
+        }
+    }
+
+    function scheduleIndicatorUpdate() {
+        cancelAnimationFrame(rafId)
+        rafId = requestAnimationFrame(updateIndicator)
+    }
+
+    // Update indicator on mount and when dependencies change
+    $effect(() => {
+        void value
+        void orientation
+        void items
+        tick().then(updateIndicator)
+    })
+
+    // Handle resize with rAF debouncing
+    $effect(() => {
+        if (!listEl) return
+
+        const observer = new ResizeObserver(scheduleIndicatorUpdate)
+        observer.observe(listEl)
+
+        return () => {
+            observer.disconnect()
+            cancelAnimationFrame(rafId)
+        }
+    })
+</script>
+
+<Tabs.Root
+    {...restProps}
+    bind:ref
+    bind:value
+    {onValueChange}
+    {orientation}
+    {activationMode}
+    {disabled}
+    {loop}
+    class={classes.root}
+>
+    <Tabs.List bind:ref={listEl} class={classes.list}>
+        <div class={classes.indicator} style={indicatorStyle} aria-hidden="true"></div>
+
+        {#each items as item, index (item.value ?? index)}
+            {@const itemValue = getItemValue(item, index)}
+            {@const active = value === itemValue}
+            <Tabs.Trigger value={itemValue} disabled={item.disabled} class={getTriggerClass(item)}>
+                {#if leading}
+                    {@render leading({ item, index, active })}
+                {:else if item.icon}
+                    <Icon name={item.icon} class={getIconClass(item)} />
+                {/if}
+
+                {#if item.label || labelSlot}
+                    <span class={getLabelClass(item)}>
+                        {#if labelSlot}
+                            {@render labelSlot({ item, index, active })}
+                        {:else}
+                            {item.label}
+                        {/if}
+                    </span>
+                {/if}
+
+                {#if trailing}
+                    {@render trailing({ item, index, active })}
+                {/if}
+            </Tabs.Trigger>
+        {/each}
+    </Tabs.List>
+
+    {#if showContent}
+        {#each items as item, index (item.value ?? index)}
+            {@const itemValue = getItemValue(item, index)}
+            {@const active = value === itemValue}
+            <Tabs.Content value={itemValue} class={classes.content}>
+                {#if bodySlot}
+                    {@render bodySlot({ item, index, active })}
+                {:else if item.content}
+                    {item.content}
+                {/if}
+            </Tabs.Content>
+        {/each}
+    {/if}
+</Tabs.Root>

package/dist/Tabs/Tabs.svelte.d.ts

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

package/dist/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tabs } from './Tabs.svelte';
+export type { TabsItem, TabsProps } from './tabs.types.js';

package/dist/Tabs/index.js

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

package/dist/Tabs/tabs.types.d.ts

@@ -0,0 +1,207 @@
+import type { TabsRootProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { TabsSlots, TabsVariantProps } from './tabs.variants.js';
+/**
+ * Configuration for an individual tab item.
+ *
+ * @example
+ * ```ts
+ * const item: TabsItem = {
+ *   label: 'Account',
+ *   icon: 'lucide:user',
+ *   value: 'account',
+ *   content: 'Manage your account settings here.'
+ * }
+ * ```
+ */
+export interface TabsItem {
+    /**
+     * The visible text displayed in the tab trigger.
+     */
+    label?: string;
+    /**
+     * Icon displayed before the label (leading position).
+     * Supports any Iconify icon name (e.g., 'lucide:home', 'mdi:account').
+     */
+    icon?: string;
+    /**
+     * Unique identifier for this tab.
+     * Used to control which tab is active via the `value` prop.
+     * @default String(index) - Falls back to the item's index as a string
+     */
+    value?: string;
+    /**
+     * Whether this specific tab trigger is disabled.
+     * Disabled tabs cannot be activated by the user.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The text content shown in the tab panel when this tab is active.
+     * For complex content, use the `body` snippet instead.
+     */
+    content?: string;
+    /**
+     * Additional CSS classes applied to this item's trigger element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override classes for specific slots within this item's trigger.
+     * Allows fine-grained styling control per item.
+     */
+    ui?: Partial<Pick<Record<TabsSlots, ClassNameValue>, 'trigger' | 'leadingIcon' | 'label'>>;
+}
+/**
+ * Props passed to tabs snippet slots.
+ * Provides context about the current item and its state.
+ */
+export interface TabsSlotProps {
+    /** The current tab item data */
+    item: TabsItem;
+    /** Zero-based index of the item in the items array */
+    index: number;
+    /** Whether this tab is currently active */
+    active: boolean;
+}
+/**
+ * Props for the Tabs component.
+ *
+ * Wraps bits-ui's Tabs primitives with enhanced styling,
+ * data-driven rendering, and animated indicator support.
+ *
+ * @example
+ * ```svelte
+ * <Tabs
+ *   items={tabItems}
+ *   bind:value={activeTab}
+ *   variant="pill"
+ *   color="primary"
+ * />
+ * ```
+ *
+ * @see https://bits-ui.com/docs/components/tabs
+ */
+export interface TabsProps extends Pick<TabsRootProps, 'id' | 'style' | 'title' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'onclick' | 'onkeydown' | 'onmouseenter' | 'onmouseleave' | 'onfocus' | 'onblur'> {
+    /** Custom data attributes are forwarded to the root element. */
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * Array of tab items to render.
+     * Each item can have a label, icon, content, and optional styling overrides.
+     */
+    items?: TabsItem[];
+    /**
+     * The currently active tab value.
+     * Use `bind:value` for two-way binding.
+     * @default First item's value or '0'
+     */
+    value?: string;
+    /**
+     * The default active tab value when uncontrolled.
+     * Used as the initial value when `value` is not provided.
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the active tab changes.
+     * Receives the new active tab value.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Visual style variant for the tabs.
+     * - `'pill'`: Rounded background indicator with shadow
+     * - `'link'`: Thin line indicator (bottom for horizontal, side for vertical)
+     * @default 'pill'
+     */
+    variant?: NonNullable<TabsVariantProps['variant']>;
+    /**
+     * Color theme for the active tab indicator and text.
+     * @default 'primary'
+     */
+    color?: NonNullable<TabsVariantProps['color']>;
+    /**
+     * Size variant controlling padding, text size, and icon dimensions.
+     * @default 'md'
+     */
+    size?: NonNullable<TabsVariantProps['size']>;
+    /**
+     * Layout orientation of the tabs.
+     * - `'horizontal'`: Tabs arranged in a row, content below
+     * - `'vertical'`: Tabs arranged in a column, content to the side
+     * @default 'horizontal'
+     */
+    orientation?: NonNullable<TabsVariantProps['orientation']>;
+    /**
+     * Controls how tabs are activated.
+     * - `'automatic'`: Tab activates on focus (arrow key navigation)
+     * - `'manual'`: Tab activates on explicit click/enter
+     * @default 'automatic'
+     */
+    activationMode?: 'automatic' | 'manual';
+    /**
+     * Whether all tabs are disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether keyboard navigation wraps around at the edges.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Whether to render content panels for each tab.
+     * Set to `false` when using tabs purely for navigation.
+     * @default true
+     */
+    content?: boolean;
+    /**
+     * Additional CSS classes for the root tabs container.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override classes for tabs component slots.
+     * Allows customization of root, list, indicator, trigger, content,
+     * leadingIcon, and label elements.
+     *
+     * @example
+     * ```ts
+     * ui={{
+     *   list: 'bg-surface-container-high',
+     *   trigger: 'font-semibold',
+     *   content: 'p-4'
+     * }}
+     * ```
+     */
+    ui?: Partial<Record<TabsSlots, ClassNameValue>>;
+    /**
+     * Custom snippet for the leading section of all tab triggers.
+     * Replaces the default leading icon when provided.
+     *
+     * @param props - Contains `{ item, index, active }`
+     */
+    leading?: Snippet<[TabsSlotProps]>;
+    /**
+     * Custom snippet for the label section of all tab triggers.
+     * Replaces the default `item.label` text when provided.
+     *
+     * @param props - Contains `{ item, index, active }`
+     */
+    label?: Snippet<[TabsSlotProps]>;
+    /**
+     * Custom snippet for the trailing section of all tab triggers.
+     * Rendered after the label.
+     *
+     * @param props - Contains `{ item, index, active }`
+     */
+    trailing?: Snippet<[TabsSlotProps]>;
+    /**
+     * Custom snippet for tab content body.
+     * Replaces `item.content` text when provided.
+     *
+     * @param props - Contains `{ item, index, active }`
+     */
+    body?: Snippet<[TabsSlotProps]>;
+}

package/dist/Tabs/tabs.types.js

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