svelora 3.0.10 → 3.0.11

package/dist/LocaleButton/LocaleButton.svelte

@@ -9,28 +9,30 @@ import Link from "../Link/Link.svelte";
 import { localeButtonDefaults, localeButtonVariants } from "./locale-button.variants.js";
 const config = getComponentConfig("localeButton", localeButtonDefaults);
 const icons = getComponentConfig("icons", iconsDefaults);
-let { locales = [], locale, variant = config.defaultVariants.variant ?? "outline", color = config.defaultVariants.color ?? "surface", size = config.defaultVariants.size ?? "md", loading = false, disabled = false, block = false, square = false, placeholder = "Select language", ariaLabel = "Change language", menuLabel = "Language", icon = "lucide:languages", chevronIcon = icons.chevronDown, showIcon = true, showChevron = true, showCode = true, showIndicator = true, disableCurrentLocale = true, closeOnSelect = true, getLocaleHref, onLocaleChange, open = $bindable(false), onOpenChange, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0, avoidCollisions = true, collisionBoundary, collisionPadding = 8, sticky = "partial", hideWhenDetached = false, onEscapeKeydown, onInteractOutside, onCloseAutoFocus, forceMount, loop = true, portal = true, arrow = false, ui, children: triggerContent, class: className, ...restProps } = $props();
-const slots = localeButtonVariants();
-const classes = $derived({
-	base: slots.base({ class: [
-		config.slots.base,
-		className,
-		ui?.base
-	] }),
-	triggerLabel: slots.triggerLabel({ class: [config.slots.triggerLabel, ui?.triggerLabel] }),
-	triggerIcon: slots.triggerIcon({ class: [config.slots.triggerIcon, ui?.triggerIcon] }),
-	triggerChevron: slots.triggerChevron({ class: [config.slots.triggerChevron, ui?.triggerChevron] }),
-	menu: slots.menu({ class: [config.slots.menu, ui?.menu] }),
-	menuLabel: slots.menuLabel({ class: [config.slots.menuLabel, ui?.menuLabel] }),
-	item: slots.item({ class: [config.slots.item, ui?.item] }),
-	itemIdle: slots.itemIdle({ class: [config.slots.itemIdle, ui?.itemIdle] }),
-	itemCurrent: slots.itemCurrent({ class: [config.slots.itemCurrent, ui?.itemCurrent] }),
-	itemLeading: slots.itemLeading({ class: [config.slots.itemLeading, ui?.itemLeading] }),
-	itemText: slots.itemText({ class: [config.slots.itemText, ui?.itemText] }),
-	itemLabel: slots.itemLabel({ class: [config.slots.itemLabel, ui?.itemLabel] }),
-	itemDescription: slots.itemDescription({ class: [config.slots.itemDescription, ui?.itemDescription] }),
-	itemCode: slots.itemCode({ class: [config.slots.itemCode, ui?.itemCode] }),
-	itemIndicator: slots.itemIndicator({ class: [config.slots.itemIndicator, ui?.itemIndicator] })
+let { locales = [], locale, variant = config.defaultVariants.variant ?? "outline", color = config.defaultVariants.color ?? "surface", size = config.defaultVariants.size ?? "md", loading = false, disabled = false, block = false, square = false, placeholder = "Select language", ariaLabel = "Change language", menuLabel = "Language", icon = "lucide:languages", chevronIcon = icons.chevronDown, showIcon = true, showChevron = true, showCode = true, showIndicator = true, disableCurrentLocale = true, closeOnSelect = true, getLocaleHref, onLocaleChange, open = $bindable(false), onOpenChange, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0, avoidCollisions = true, collisionBoundary, collisionPadding = 8, sticky = "partial", hideWhenDetached = false, onEscapeKeydown, onInteractOutside, onCloseAutoFocus, forceMount, loop = true, portal = true, arrow = false, ui, children: triggerContent, item: itemSnippet, menu: menuSnippet, class: className, ...restProps } = $props();
+const classes = $derived.by(() => {
+	const slots = localeButtonVariants({ size });
+	return {
+		base: slots.base({ class: [
+			config.slots.base,
+			className,
+			ui?.base
+		] }),
+		triggerLabel: slots.triggerLabel({ class: [config.slots.triggerLabel, ui?.triggerLabel] }),
+		triggerIcon: slots.triggerIcon({ class: [config.slots.triggerIcon, ui?.triggerIcon] }),
+		triggerChevron: slots.triggerChevron({ class: [config.slots.triggerChevron, ui?.triggerChevron] }),
+		menu: slots.menu({ class: [config.slots.menu, ui?.menu] }),
+		menuLabel: slots.menuLabel({ class: [config.slots.menuLabel, ui?.menuLabel] }),
+		item: slots.item({ class: [config.slots.item, ui?.item] }),
+		itemIdle: slots.itemIdle({ class: [config.slots.itemIdle, ui?.itemIdle] }),
+		itemCurrent: slots.itemCurrent({ class: [config.slots.itemCurrent, ui?.itemCurrent] }),
+		itemLeading: slots.itemLeading({ class: [config.slots.itemLeading, ui?.itemLeading] }),
+		itemText: slots.itemText({ class: [config.slots.itemText, ui?.itemText] }),
+		itemLabel: slots.itemLabel({ class: [config.slots.itemLabel, ui?.itemLabel] }),
+		itemDescription: slots.itemDescription({ class: [config.slots.itemDescription, ui?.itemDescription] }),
+		itemCode: slots.itemCode({ class: [config.slots.itemCode, ui?.itemCode] }),
+		itemIndicator: slots.itemIndicator({ class: [config.slots.itemIndicator, ui?.itemIndicator] })
+	};
 });
 const currentLocale = $derived(locales.find((item) => item.code === locale) ?? locales[0]);
 const triggerLabel = $derived(currentLocale?.shortLabel ?? currentLocale?.label ?? placeholder);
@@ -112,54 +114,62 @@ async function handleItemClick(event, item, close) {
     {/snippet}
 
     {#snippet content({ close })}
-        <div class={classes.menu}>
-            {#if menuLabel}
-                <p class={classes.menuLabel}>{menuLabel}</p>
-            {/if}
+        {#if menuSnippet}
+            {@render menuSnippet({ close })}
+        {:else}
+            <div class={classes.menu}>
+                {#if menuLabel}
+                    <p class={classes.menuLabel}>{menuLabel}</p>
+                {/if}
 
-            {#each locales as item (item.code)}
-                {@const current = isCurrentLocale(item)}
-                {@const href = getResolvedHref(item)}
-                {@const itemDisabled = isItemDisabled(item)}
+                {#each locales as item (item.code)}
+                    {@const current = isCurrentLocale(item)}
+                    {@const href = getResolvedHref(item)}
+                    {@const itemDisabled = isItemDisabled(item)}
 
-                <Link
-                    href={href}
-                    hreflang={item.hreflang ?? item.code}
-                    raw
-                    role="menuitemradio"
-                    aria-checked={current}
-                    disabled={itemDisabled}
-                    class={[
-                        classes.item,
-                        current ? classes.itemCurrent : classes.itemIdle,
-                        item.class
-                    ]}
-                    onclick={(event) => handleItemClick(event, item, close)}
-                >
-                    <span class={classes.itemLeading}>
-                        {#if item.icon}
-                            <Icon name={item.icon} />
-                        {/if}
-                        <span class={classes.itemText}>
-                            <span class={classes.itemLabel}>{item.label}</span>
-                            {#if item.description}
-                                <span class={classes.itemDescription}>{item.description}</span>
-                            {/if}
-                        </span>
-                    </span>
+                    {#if itemSnippet}
+                        {@render itemSnippet({ item, current, disabled: itemDisabled, close })}
+                    {:else}
+                        <Link
+                            href={href}
+                            hreflang={item.hreflang ?? item.code}
+                            raw
+                            role="menuitemradio"
+                            aria-checked={current}
+                            disabled={itemDisabled}
+                            class={[
+                                classes.item,
+                                current ? classes.itemCurrent : classes.itemIdle,
+                                item.class
+                            ]}
+                            onclick={(event) => handleItemClick(event, item, close)}
+                        >
+                            <span class={classes.itemLeading}>
+                                {#if item.icon}
+                                    <Icon name={item.icon} />
+                                {/if}
+                                <span class={classes.itemText}>
+                                    <span class={classes.itemLabel}>{item.label}</span>
+                                    {#if item.description}
+                                        <span class={classes.itemDescription}>{item.description}</span>
+                                    {/if}
+                                </span>
+                            </span>
 
-                    <span class="flex items-center gap-2">
-                        {#if showCode}
-                            <span class={classes.itemCode}>{item.shortLabel ?? item.code}</span>
-                        {/if}
-                        {#if showIndicator && current}
-                            <span class={classes.itemIndicator}>
-                                <Icon name={icons.check} />
+                            <span class="flex items-center gap-2">
+                                {#if showCode}
+                                    <span class={classes.itemCode}>{item.shortLabel ?? item.code}</span>
+                                {/if}
+                                {#if showIndicator && current}
+                                    <span class={classes.itemIndicator}>
+                                        <Icon name={icons.check} />
+                                    </span>
+                                {/if}
                             </span>
-                        {/if}
-                    </span>
-                </Link>
-            {/each}
-        </div>
+                        </Link>
+                    {/if}
+                {/each}
+            </div>
+        {/if}
     {/snippet}
 </DropdownMenu>

package/dist/LocaleButton/locale-button.types.d.ts

@@ -160,6 +160,23 @@ export type LocaleButtonProps = Omit<HTMLAttributes<HTMLElement>, 'children' | '
         open: boolean;
         currentLocale: LocaleButtonLocale | undefined;
     }]>;
+    /**
+     * Render custom content for each locale item in the menu.
+     */
+    item?: Snippet<[
+        {
+            item: LocaleButtonLocale;
+            current: boolean;
+            disabled: boolean;
+            close: () => void;
+        }
+    ]>;
+    /**
+     * Render a custom menu layout entirely.
+     */
+    menu?: Snippet<[{
+        close: () => void;
+    }]>;
     /**
      * Whether to render the menu in a portal.
      * @default true

package/dist/LocaleButton/locale-button.variants.d.ts

@@ -1,6 +1,29 @@
 import { type VariantProps } from 'tailwind-variants';
 import type { ButtonVariantProps } from '../Button/button.variants.js';
-export declare const localeButtonVariants: import("tailwind-variants").TVReturnType<{}, {
+export declare const localeButtonVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+        sm: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+        md: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+        lg: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+        xl: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+    };
+}, {
     base: string;
     triggerLabel: string;
     triggerIcon: string;
@@ -16,7 +39,30 @@ export declare const localeButtonVariants: import("tailwind-variants").TVReturnT
     itemDescription: string;
     itemCode: string;
     itemIndicator: string;
-}, undefined, {}, {
+}, undefined, {
+    size: {
+        xs: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+        sm: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+        md: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+        lg: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+        xl: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+    };
+}, {
     base: string;
     triggerLabel: string;
     triggerIcon: string;
@@ -32,7 +78,30 @@ export declare const localeButtonVariants: import("tailwind-variants").TVReturnT
     itemDescription: string;
     itemCode: string;
     itemIndicator: string;
-}, import("tailwind-variants").TVReturnType<{}, {
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+        sm: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+        md: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+        lg: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+        xl: {
+            triggerIcon: string;
+            triggerChevron: string;
+        };
+    };
+}, {
     base: string;
     triggerLabel: string;
     triggerIcon: string;

package/dist/LocaleButton/locale-button.variants.js

@@ -20,7 +20,30 @@ export const localeButtonVariants = tv({
         itemCode: 'shrink-0 rounded-md bg-surface-container px-1.5 py-0.5 text-[11px] font-medium text-on-surface-variant uppercase',
         itemIndicator: 'shrink-0 text-primary'
     },
-    variants: {},
+    variants: {
+        size: {
+            xs: {
+                triggerIcon: 'size-3.5',
+                triggerChevron: 'size-3.5'
+            },
+            sm: {
+                triggerIcon: 'size-4',
+                triggerChevron: 'size-4'
+            },
+            md: {
+                triggerIcon: 'size-5',
+                triggerChevron: 'size-5'
+            },
+            lg: {
+                triggerIcon: 'size-5',
+                triggerChevron: 'size-5'
+            },
+            xl: {
+                triggerIcon: 'size-6',
+                triggerChevron: 'size-6'
+            }
+        }
+    },
     defaultVariants: {}
 });
 export const localeButtonDefaults = {

package/dist/NavigationMenu/NavigationMenu.svelte

@@ -6,7 +6,7 @@ import Kbd from "../Kbd/Kbd.svelte";
 import { DropdownMenu } from "../DropdownMenu/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { navigationMenuVariants } from "./navigation-menu.variants.js";
-let { items = [], variant = "default", orientation = "horizontal", accordion = false, class: className, ui, children } = $props();
+let { items = [], variant = "default", orientation = "horizontal", accordion = false, tree = false, class: className, ui, children } = $props();
 const sidebarCollapsedFn = getContext("sidebar-collapsed");
 let isCollapsed = $derived(sidebarCollapsedFn ? sidebarCollapsedFn() : false);
 const sidebarPositionFn = getContext("sidebar-position");
@@ -14,7 +14,8 @@ let sidebarPosition = $derived(sidebarPositionFn ? sidebarPositionFn() : "left")
 let styles = $derived(navigationMenuVariants({
 	variant,
 	orientation,
-	collapsed: isCollapsed
+	collapsed: isCollapsed,
+	tree
 }));
 let normalizedItems = $derived.by(() => {
 	if (!items || items.length === 0) return [];
@@ -52,22 +53,53 @@ function isGroupOpen(item) {
 	if (!item.label) return false;
 	return openGroups.includes(item.label);
 }
+import { LINK_LOCATION_CONTEXT_KEY } from "../Link/location-context.js";
+const linkLocation = getContext(LINK_LOCATION_CONTEXT_KEY);
 // --- Auto Active State ---
-let currentPath = $state("");
+let windowPath = $state("");
 $effect(() => {
-	if (typeof window !== "undefined") {
-		currentPath = window.location.pathname;
+	if (!linkLocation && typeof window !== "undefined") {
+		windowPath = window.location.pathname;
 		const onPopState = () => {
-			currentPath = window.location.pathname;
+			windowPath = window.location.pathname;
 		};
 		window.addEventListener("popstate", onPopState);
 		return () => window.removeEventListener("popstate", onPopState);
 	}
 });
+const currentPath = $derived(linkLocation ? linkLocation.currentUrl().pathname : windowPath);
+const bestMatchHref = $derived.by(() => {
+	let best = "";
+	const search = (menuItems) => {
+		for (const item of menuItems) {
+			const target = item.matchPattern || item.href;
+			if (target) {
+				const isExact = item.exact !== false;
+				if (isExact && currentPath === target) {
+					return target;
+				} else if (!isExact && (currentPath === target || currentPath.startsWith(target + "/"))) {
+					if (target.length > best.length) {
+						best = target;
+					}
+				}
+			}
+			const children = item.items || item.children || [];
+			if (children.length > 0) {
+				const childBest = search(children);
+				if (childBest && childBest.length > best.length) best = childBest;
+			}
+		}
+		return best;
+	};
+	return search(normalizedItems.flat());
+});
 function isActive(item) {
 	if (item.active) return true;
-	if (item.href) {
-		return currentPath === item.href || currentPath.startsWith(item.href + "/");
+	const target = item.matchPattern || item.href;
+	if (target && target === bestMatchHref) return true;
+	const children = item.items || item.children || [];
+	if (children.some((child) => isActive(child))) {
+		return true;
 	}
 	return false;
 }

package/dist/NavigationMenu/navigation-menu.types.d.ts

@@ -16,6 +16,18 @@ export type NavigationMenuItemType = {
      * Optional icon to display before the label.
      */
     icon?: string;
+    /**
+     * If true, the item will only be active if the current path matches the item's href exactly.
+     * If false, it will be active if the current path starts with the item's href.
+     * Defaults to true.
+     */
+    exact?: boolean;
+    /**
+     * Optional pattern to use for active state matching instead of the href.
+     * Useful when href points to a subpage (e.g. /docs/components/button)
+     * but you want it to match any page in the section (e.g. /docs/components).
+     */
+    matchPattern?: string;
     /**
      * Optional badge text/number to display after the label.
      */
@@ -88,6 +100,11 @@ export type NavigationMenuProps = {
      * @default false
      */
     accordion?: boolean;
+    /**
+     * Enable tree line styling for vertical accordion mode.
+     * @default false
+     */
+    tree?: boolean;
     /**
      * Additional CSS classes.
      */

package/dist/NavigationMenu/navigation-menu.variants.d.ts

@@ -35,6 +35,11 @@ export declare const navigationMenuVariants: import("tailwind-variants").TVRetur
             item: string;
             icon: string;
         };
+    };
+    tree: {
+        true: {
+            accordionGroupContent: string;
+        };
         false: {};
     };
 }, {
@@ -81,6 +86,11 @@ export declare const navigationMenuVariants: import("tailwind-variants").TVRetur
             item: string;
             icon: string;
         };
+    };
+    tree: {
+        true: {
+            accordionGroupContent: string;
+        };
         false: {};
     };
 }, {
@@ -127,6 +137,11 @@ export declare const navigationMenuVariants: import("tailwind-variants").TVRetur
             item: string;
             icon: string;
         };
+    };
+    tree: {
+        true: {
+            accordionGroupContent: string;
+        };
         false: {};
     };
 }, {

package/dist/NavigationMenu/navigation-menu.variants.js

@@ -59,13 +59,29 @@ export const navigationMenuVariants = tv({
             true: {
                 item: 'w-10 h-10 justify-center p-0 aspect-square shrink-0',
                 icon: 'text-[1.25rem] m-0'
+            }
+        },
+        tree: {
+            true: {
+                accordionGroupContent: 'pl-2 ml-6 border-l border-outline-variant/50 relative'
             },
             false: {}
         }
     },
+    compoundVariants: [
+        {
+            active: true,
+            tree: true,
+            class: {
+                item: 'border-primary',
+                accordionTrigger: 'border-primary bg-primary/10 text-primary'
+            }
+        }
+    ],
     defaultVariants: {
         variant: 'default',
         active: false,
-        orientation: 'horizontal'
+        orientation: 'horizontal',
+        tree: false
     }
 });

package/dist/Table/TableBulkActionBar.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { fly } from "svelte/transition";
+import { tableBulkActionBarVariants } from "./table-bulk-action-bar.variants.js";
+import Button from "../Button/Button.svelte";
+let { count, onClear, text = "items selected", class: className, ui, children, ...restProps } = $props();
+const slots = $derived(tableBulkActionBarVariants());
+</script>
+
+<div
+    class={slots.root({ class: [ui?.root, className] })}
+    transition:fly={{ y: 20, duration: 250 }}
+    {...restProps}
+>
+    <div class={slots.content({ class: ui?.content })}>
+        <span class={slots.countBadge({ class: ui?.countBadge })}>{count}</span>
+        <span class="opacity-90">{text}</span>
+    </div>
+
+    {#if children}
+        <div class={slots.actions({ class: ui?.actions })}>
+            {@render children()}
+        </div>
+    {/if}
+
+    <div class={slots.clearButton({ class: ui?.clearButton })}>
+        <Button 
+            variant="ghost" 
+            color="surface" 
+            size="sm" 
+            icon="lucide:x" 
+            onclick={onClear} 
+            class="h-8 w-8 !p-0 rounded-full"
+            aria-label="Clear selection"
+        />
+    </div>
+</div>

package/dist/Table/TableBulkActionBar.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { TableBulkActionBarProps } from './table-bulk-action-bar.types.js';
+export type Props = TableBulkActionBarProps;
+declare const TableBulkActionBar: import("svelte").Component<TableBulkActionBarProps, {}, "">;
+type TableBulkActionBar = ReturnType<typeof TableBulkActionBar>;
+export default TableBulkActionBar;

package/dist/Table/index.d.ts

@@ -1,2 +1,4 @@
 export { default as Table } from './Table.svelte';
+export { default as TableBulkActionBar } from './TableBulkActionBar.svelte';
 export type { SortState, TableCellSlotProps, TableColumn, TableFooterSlotProps, TableHeaderSlotProps, TableProps } from './table.types.js';
+export type { TableBulkActionBarProps } from './table-bulk-action-bar.types.js';

package/dist/Table/index.js

@@ -1 +1,2 @@
 export { default as Table } from './Table.svelte';
+export { default as TableBulkActionBar } from './TableBulkActionBar.svelte';

package/dist/Table/table-bulk-action-bar.types.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { TableBulkActionBarSlots } from './table-bulk-action-bar.variants.js';
+export type TableBulkActionBarProps = {
+    /**
+     * The number of selected items to display.
+     */
+    count: number;
+    /**
+     * Callback when the clear/close button is clicked.
+     * This is usually where you clear the selection state (`selectedRows = []`).
+     */
+    onClear?: () => void;
+    /**
+     * Text to display next to the count.
+     * @default 'items selected'
+     */
+    text?: string;
+    /**
+     * Additional CSS classes.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override specific slot classes.
+     */
+    ui?: Partial<Record<TableBulkActionBarSlots, ClassNameValue>>;
+    /**
+     * The action buttons to display.
+     */
+    children?: Snippet;
+};

package/dist/Table/table-bulk-action-bar.types.js

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

package/dist/Table/table-bulk-action-bar.variants.d.ts

@@ -0,0 +1,52 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const tableBulkActionBarVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            content?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            actions?: import("tailwind-merge").ClassNameValue;
+            countBadge?: import("tailwind-merge").ClassNameValue;
+            clearButton?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            content?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            actions?: import("tailwind-merge").ClassNameValue;
+            countBadge?: import("tailwind-merge").ClassNameValue;
+            clearButton?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    content: string;
+    countBadge: string;
+    actions: string;
+    clearButton: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            content?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            actions?: import("tailwind-merge").ClassNameValue;
+            countBadge?: import("tailwind-merge").ClassNameValue;
+            clearButton?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    content: string;
+    countBadge: string;
+    actions: string;
+    clearButton: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    content: string;
+    countBadge: string;
+    actions: string;
+    clearButton: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TableBulkActionBarVariantProps = VariantProps<typeof tableBulkActionBarVariants>;
+export type TableBulkActionBarSlots = keyof ReturnType<typeof tableBulkActionBarVariants>;

package/dist/Table/table-bulk-action-bar.variants.js

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+export const tableBulkActionBarVariants = tv({
+    slots: {
+        root: 'fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center justify-between gap-6 rounded-2xl border border-outline-variant/50 bg-surface/95 px-4 py-3 shadow-xl shadow-surface-container-highest/20 backdrop-blur-md',
+        content: 'flex items-center gap-3 text-sm text-on-surface whitespace-nowrap',
+        countBadge: 'font-semibold bg-primary text-on-primary px-2 py-0.5 rounded-full text-xs flex items-center justify-center min-w-[20px]',
+        actions: 'flex items-center gap-2 border-l border-outline-variant/50 pl-4',
+        clearButton: ''
+    }
+});

package/dist/docs/navigation.d.ts

@@ -7,6 +7,7 @@ export type DocsItem = {
 };
 export type DocsGroup = {
     title: string;
+    icon?: string;
     items: DocsItem[];
 };
 export declare const docsMeta: {