svelora 3.0.8 → 3.0.11

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

@@ -30,6 +30,18 @@ export declare const navigationMenuVariants: import("tailwind-variants").TVRetur
         };
         false: {};
     };
+    collapsed: {
+        true: {
+            item: string;
+            icon: string;
+        };
+    };
+    tree: {
+        true: {
+            accordionGroupContent: string;
+        };
+        false: {};
+    };
 }, {
     base: string;
     group: string;
@@ -69,6 +81,18 @@ export declare const navigationMenuVariants: import("tailwind-variants").TVRetur
         };
         false: {};
     };
+    collapsed: {
+        true: {
+            item: string;
+            icon: string;
+        };
+    };
+    tree: {
+        true: {
+            accordionGroupContent: string;
+        };
+        false: {};
+    };
 }, {
     base: string;
     group: string;
@@ -108,6 +132,18 @@ export declare const navigationMenuVariants: import("tailwind-variants").TVRetur
         };
         false: {};
     };
+    collapsed: {
+        true: {
+            item: string;
+            icon: string;
+        };
+    };
+    tree: {
+        true: {
+            accordionGroupContent: string;
+        };
+        false: {};
+    };
 }, {
     base: string;
     group: string;

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

@@ -54,11 +54,34 @@ export const navigationMenuVariants = tv({
                 accordionTrigger: 'bg-primary-container text-on-primary-container'
             },
             false: {}
+        },
+        collapsed: {
+            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/Sidebar/Sidebar.svelte

@@ -6,25 +6,25 @@ let styles = $derived(sidebarVariants({
 	collapsed,
 	position
 }));
-// Provide context to children (like Menu) so they know if sidebar is collapsed
-// Useful if we want the Menu to hide labels when collapsed
+// Provide context to children (like Menu) so they know if sidebar is collapsed or right-aligned
 setContext("sidebar-collapsed", () => collapsed);
+setContext("sidebar-position", () => position);
 </script>
 
 <aside class={twMerge(styles.base(), className)} {...restProps}>
     {#if header}
         <div class={styles.header()}>
-            {@render header()}
+            {@render header({ collapsed })}
         </div>
     {/if}
 
     <div class={styles.content()}>
-        {@render children?.()}
+        {@render children?.({ collapsed })}
     </div>
 
     {#if footer}
         <div class={styles.footer()}>
-            {@render footer()}
+            {@render footer({ collapsed })}
         </div>
     {/if}
 </aside>

package/dist/Sidebar/sidebar.types.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { SidebarVariantProps } from './sidebar.variants.js';
-export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+export interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     /**
      * Whether the sidebar is collapsed (icons only).
      * @default false
@@ -19,13 +19,19 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
     /**
      * Snippet for the top header section (e.g. Logo).
      */
-    header?: Snippet;
+    header?: Snippet<[{
+        collapsed: boolean;
+    }]>;
     /**
      * Snippet for the main content (e.g. Navigation Menu).
      */
-    children?: Snippet;
+    children?: Snippet<[{
+        collapsed: boolean;
+    }]>;
     /**
      * Snippet for the bottom footer section (e.g. User Profile).
      */
-    footer?: Snippet;
+    footer?: Snippet<[{
+        collapsed: boolean;
+    }]>;
 }

package/dist/Sidebar/sidebar.variants.d.ts

@@ -11,9 +11,15 @@ export declare const sidebarVariants: import("tailwind-variants").TVReturnType<{
     collapsed: {
         true: {
             base: string;
+            header: string;
+            content: string;
+            footer: string;
         };
         false: {
             base: string;
+            header: string;
+            content: string;
+            footer: string;
         };
     };
 }, {
@@ -33,9 +39,15 @@ export declare const sidebarVariants: import("tailwind-variants").TVReturnType<{
     collapsed: {
         true: {
             base: string;
+            header: string;
+            content: string;
+            footer: string;
         };
         false: {
             base: string;
+            header: string;
+            content: string;
+            footer: string;
         };
     };
 }, {
@@ -55,9 +67,15 @@ export declare const sidebarVariants: import("tailwind-variants").TVReturnType<{
     collapsed: {
         true: {
             base: string;
+            header: string;
+            content: string;
+            footer: string;
         };
         false: {
             base: string;
+            header: string;
+            content: string;
+            footer: string;
         };
     };
 }, {

package/dist/Sidebar/sidebar.variants.js

@@ -1,10 +1,10 @@
 import { tv } from 'tailwind-variants';
 export const sidebarVariants = tv({
     slots: {
-        base: 'flex flex-col h-full bg-surface-50 dark:bg-surface-900 border-outline-variant text-surface-900 dark:text-surface-50 transition-all duration-300',
-        header: 'flex items-center px-4 h-16 shrink-0 border-b border-outline-variant',
-        content: 'flex-1 overflow-y-auto px-3 py-4',
-        footer: 'p-4 mt-auto border-t border-outline-variant shrink-0'
+        base: 'flex flex-col h-full bg-surface-container-low border-outline-variant/60 text-on-surface transition-[width] duration-300 ease-in-out',
+        header: 'flex items-center shrink-0 border-b border-outline-variant/60 transition-[padding] duration-300 h-16',
+        content: 'flex-1 overflow-y-auto py-4 transition-[padding] duration-300',
+        footer: 'mt-auto border-t border-outline-variant/60 shrink-0 transition-[padding] duration-300'
     },
     variants: {
         position: {
@@ -12,8 +12,18 @@ export const sidebarVariants = tv({
             right: { base: 'border-l' }
         },
         collapsed: {
-            true: { base: 'w-16' },
-            false: { base: 'w-64' }
+            true: {
+                base: 'w-[64px]',
+                header: 'px-3 justify-center',
+                content: 'px-3 flex flex-col items-center',
+                footer: 'p-3 flex flex-col items-center justify-center gap-4'
+            },
+            false: {
+                base: 'w-64',
+                header: 'px-4',
+                content: 'px-3',
+                footer: 'p-4'
+            }
         }
     },
     defaultVariants: {

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: {

package/dist/docs/navigation.js

@@ -61,6 +61,7 @@ export const docsThemeItems = [
 export const docsComponentGroups = [
     {
         title: 'General',
+        icon: 'lucide:box',
         items: [
             {
                 title: 'Button',
@@ -84,7 +85,7 @@ export const docsComponentGroups = [
                 title: 'Fonts',
                 href: '/docs/components/fonts',
                 legacyHref: '/google-fonts',
-                icon: 'lucide:font'
+                icon: 'lucide:type'
             },
             {
                 title: 'Icon',
@@ -120,6 +121,7 @@ export const docsComponentGroups = [
     },
     {
         title: 'Layout',
+        icon: 'lucide:layout-panel-top',
         items: [
             {
                 title: 'BentoGrid',
@@ -143,12 +145,12 @@ export const docsComponentGroups = [
                 title: 'Resizable',
                 href: '/docs/components/resizable',
                 legacyHref: '/resizable',
-                icon: 'lucide:layout-panel-left-right'
+                icon: 'lucide:stretch-horizontal'
             },
             {
                 title: 'Modal',
                 href: '/docs/components/modal',
-                icon: 'lucide:layout-panel-left-right'
+                icon: 'lucide:app-window'
             },
             {
                 title: 'Navigation Menu',
@@ -178,6 +180,7 @@ export const docsComponentGroups = [
     },
     {
         title: 'Data Display',
+        icon: 'lucide:table-properties',
         items: [
             {
                 title: 'Accordion',
@@ -279,6 +282,7 @@ export const docsComponentGroups = [
     },
     {
         title: 'Forms',
+        icon: 'lucide:type',
         items: [
             {
                 title: 'Checkbox',
@@ -392,6 +396,7 @@ export const docsComponentGroups = [
     },
     {
         title: 'Feedback',
+        icon: 'lucide:message-square',
         items: [
             {
                 title: 'Alert',
@@ -439,6 +444,7 @@ export const docsComponentGroups = [
     },
     {
         title: 'Navigation',
+        icon: 'lucide:compass',
         items: [
             {
                 title: 'Breadcrumb',
@@ -456,7 +462,7 @@ export const docsComponentGroups = [
                 title: 'Sidebar',
                 href: '/docs/components/sidebar',
                 legacyHref: '/sidebar',
-                icon: 'lucide:layout-sidebar'
+                icon: 'lucide:panel-left'
             },
             {
                 title: 'Stepper',
@@ -474,6 +480,7 @@ export const docsComponentGroups = [
     },
     {
         title: 'Overlay',
+        icon: 'lucide:layers',
         items: [
             {
                 title: 'Collapsible',
@@ -533,6 +540,7 @@ export const docsComponentGroups = [
     },
     {
         title: 'Date & Time',
+        icon: 'lucide:calendar',
         items: [
             {
                 title: 'Calendar',
@@ -656,7 +664,7 @@ export const docsHookItems = [
 export const docsTopNav = [
     { title: 'Docs', href: '/docs', icon: 'lucide:book-open' },
     { title: 'Components', href: '/docs/components/button', icon: 'lucide:blocks' },
-    { title: 'Hooks', href: '/docs/hooks/use-debounce', icon: 'lucide:hook' }
+    { title: 'Hooks', href: '/docs/hooks/use-debounce', icon: 'lucide:webhook' }
 ];
 export const allComponentItems = docsComponentGroups.flatMap((group) => group.items);
 export const allDocsItems = [