zabi-components 5.0.20 → 5.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zabi-components",
-  "version": "5.0.20",
+  "version": "5.0.22",
   "description": "A modern Svelte 5 component library with TypeScript, Tailwind CSS v4, and 100% SSR-safe components",
   "type": "module",
   "main": "dist/index.js",
@@ -74,7 +74,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/zabi-components/zabi-components.git"
+    "url": "https://github.com/sabnor/zabi-components.git"
   },
   "scripts": {
     "dev": "vite dev",
@@ -84,6 +84,7 @@
     "build:fix-imports": "node scripts/fix-modal-import.js",
     "build:lib": "npm run build:css && npm run build:components && npm run build:lib-files && npm run build:fix-imports && npm run build:types && npm run build:css && node scripts/verify-build.js",
     "build:css": "node scripts/build-css.js && node scripts/validate-theme.js && node scripts/cleanup-css.js",
+    "check:tokens": "node scripts/check-token-violations.js",
     "build:types": "tsc --project tsconfig.lib.json",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
@@ -92,8 +93,8 @@
     "prepublishOnly": "npm run build:lib"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^10.0.7",
-    "@storybook/sveltekit": "^10.0.7",
+    "@storybook/addon-docs": "^10.2.19",
+    "@storybook/sveltekit": "^10.2.19",
     "@sveltejs/adapter-auto": "^7.0.0",
     "@sveltejs/kit": "^2.47.2",
     "@sveltejs/package": "^2.5.4",
@@ -104,7 +105,7 @@
     "@types/react": "^19.2.2",
     "autoprefixer": "^10.4.17",
     "postcss": "^8.4.35",
-    "storybook": "^10.0.7",
+    "storybook": "^10.2.19",
     "svelte": "^5.43.8",
     "svelte-check": "^4.3.1",
     "tailwindcss": "^4.1.13",
@@ -112,9 +113,7 @@
     "vite": "^7.1.6"
   },
   "dependencies": {
-    "@lucide/svelte": "^0.544.0",
-    "@opentelemetry/api": "^1.9.0",
-    "glob": "^11.0.3"
+    "@lucide/svelte": "^0.544.0"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.0.0",

package/dist/molecules/Sidebar.svelte

@@ -1,324 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-    import { onMount, onDestroy } from "svelte";
-
-    interface SidebarItem {
-        id: string;
-        label: string;
-        description?: string;
-        icon?: any;
-        onClick?: () => void;
-    }
-
-    interface SidebarSection {
-        title?: string;
-        items: SidebarItem[];
-    }
-
-    interface Props {
-        title?: string;
-        sections?: SidebarSection[];
-        items?: SidebarItem[];
-        selectedItemId?: string;
-        selectedSectionId?: string;
-        onItemClick?: (item: SidebarItem) => void;
-        onSectionClick?: (sectionId: string) => void;
-        className?: string;
-        header?: Snippet;
-        footer?: Snippet;
-        isOpen?: boolean;
-        onClose?: () => void;
-        mobileResponsive?: boolean;
-    }
-
-    let {
-        title = "",
-        sections = [],
-        items = [],
-        selectedItemId = "",
-        selectedSectionId = "",
-        onItemClick,
-        onSectionClick,
-        className = "",
-        header,
-        footer,
-        isOpen = true,
-        onClose,
-        mobileResponsive = true,
-        ...restProps
-    }: Props = $props();
-
-    let isMobile = $state(false);
-    let sidebarElement = $state<HTMLElement | null>(null);
-
-    function checkMobile() {
-        if (mobileResponsive) {
-            isMobile = window.innerWidth < 768;
-        } else {
-            isMobile = false;
-        }
-    }
-
-    function handleItemClick(item: SidebarItem) {
-        if (item.onClick) {
-            item.onClick();
-        }
-        if (onItemClick) {
-            onItemClick(item);
-        }
-        // Close sidebar on mobile when item is clicked
-        if (isMobile && onClose) {
-            onClose();
-        }
-    }
-
-    function handleSectionClick(sectionId: string) {
-        if (onSectionClick) {
-            onSectionClick(sectionId);
-        }
-    }
-
-    function handleBackdropClick(event: MouseEvent) {
-        if (event.target === event.currentTarget && onClose) {
-            onClose();
-        }
-    }
-
-    function handleKeydown(event: KeyboardEvent) {
-        if (event.key === "Escape" && isOpen && isMobile && onClose) {
-            onClose();
-        }
-    }
-
-    onMount(() => {
-        checkMobile();
-        if (mobileResponsive) {
-            window.addEventListener("resize", checkMobile);
-            return () => window.removeEventListener("resize", checkMobile);
-        }
-    });
-
-    const hasSections = $derived(sections.length > 0);
-    const hasItems = $derived(items.length > 0);
-</script>
-
-{#if isMobile && mobileResponsive}
-    <!-- Mobile: Overlay and Drawer -->
-    {#if isOpen}
-        <div
-            class="fixed inset-0 bg-overlay z-modal md:hidden"
-            onclick={handleBackdropClick}
-            onkeydown={handleKeydown}
-            role="dialog"
-            aria-modal="true"
-            aria-label="Sidebar navigation"
-            tabindex="-1"
-        >
-            <aside
-                bind:this={sidebarElement}
-                class="fixed left-0 top-0 bottom-0 w-64 bg-base-100 border-r border-border p-6 h-full overflow-y-auto transform transition-transform duration-300 ease-in-out {isOpen ? 'translate-x-0' : '-translate-x-full'} {className}"
-                role="complementary"
-                aria-label="Sidebar navigation"
-                onclick={(e) => e.stopPropagation()}
-                {...restProps}
-            >
-                <div class="flex items-center justify-between mb-4 md:hidden">
-                    {#if title}
-                        <h2 class="text-lg font-semibold text-headline">{title}</h2>
-                    {/if}
-                    {#if onClose}
-                        <button
-                            type="button"
-                            onclick={onClose}
-                            class="text-description hover:text-headline text-2xl cursor-pointer transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-base-50"
-                            aria-label="Close sidebar"
-                        >
-                            ×
-                        </button>
-                    {/if}
-                </div>
-
-                {#if header}
-                    <div class="mb-6">
-                        {@render header()}
-                    </div>
-                {:else if title && !isMobile}
-                    <h2 class="text-lg font-semibold text-headline mb-4">{title}</h2>
-                {/if}
-
-                {#if hasSections}
-                    {#each sections as section}
-                        {#if section.title}
-                            <div class="mb-4">
-                                <h3 class="text-sm font-medium text-headline mb-2 uppercase tracking-wide">
-                                    {section.title}
-                                </h3>
-                            </div>
-                        {/if}
-
-                        <nav class="space-y-2 mb-8">
-                            {#each section.items as item}
-                                <button
-                                    type="button"
-                                    onclick={() => handleItemClick(item)}
-                                    class="w-full text-left px-3 py-2 rounded-md transition-colors duration-200 {selectedItemId ===
-                                    item.id
-                                        ? 'bg-action-primary-subtle text-headline border-l-2 border-action-primary'
-                                        : 'text-secondary hover:text-headline hover:bg-base-50'}"
-                                    aria-current={selectedItemId === item.id ? "page" : undefined}
-                                >
-                                    <div class="flex items-center gap-2">
-                                        {#if item.icon}
-                                            <div class="shrink-0">
-                                                <svelte:component this={item.icon} class="h-4 w-4" />
-                                            </div>
-                                        {/if}
-                                        <div class="flex-1">
-                                            <div class="font-medium">{item.label}</div>
-                                            {#if item.description}
-                                                <div class="text-xs text-description">
-                                                    {item.description}
-                                                </div>
-                                            {/if}
-                                        </div>
-                                    </div>
-                                </button>
-                            {/each}
-                        </nav>
-                    {/each}
-                {:else if hasItems}
-                    <nav class="space-y-1">
-                        {#each items as item}
-                            <button
-                                type="button"
-                                onclick={() => handleItemClick(item)}
-                                class="w-full text-left px-3 py-2 rounded-md transition-colors duration-200 {selectedItemId ===
-                                item.id
-                                    ? 'bg-action-primary-subtle text-headline border-l-2 border-action-primary'
-                                    : 'text-secondary hover:text-headline hover:bg-base-50'}"
-                                aria-current={selectedItemId === item.id ? "page" : undefined}
-                            >
-                                <div class="flex items-center gap-2">
-                                    {#if item.icon}
-                                        <div class="shrink-0">
-                                            <svelte:component this={item.icon} class="h-4 w-4" />
-                                        </div>
-                                    {/if}
-                                    <div class="flex-1">
-                                        <div class="font-medium">{item.label}</div>
-                                        {#if item.description}
-                                            <div class="text-xs text-description">
-                                                {item.description}
-                                            </div>
-                                        {/if}
-                                    </div>
-                                </div>
-                            </button>
-                        {/each}
-                    </nav>
-                {/if}
-
-                {#if footer}
-                    <div class="mt-auto pt-6 border-t border-border">
-                        {@render footer()}
-                    </div>
-                {/if}
-            </aside>
-        </div>
-    {/if}
-{:else}
-    <!-- Desktop: Always visible sidebar -->
-    <aside
-        bind:this={sidebarElement}
-        class="w-64 bg-base-100 border-r border-border p-6 h-full overflow-y-auto {className}"
-        role="complementary"
-        aria-label="Sidebar navigation"
-        {...restProps}
-    >
-    {#if header}
-        <div class="mb-6">
-            {@render header()}
-        </div>
-    {:else if title}
-        <h2 class="text-lg font-semibold text-headline mb-4">{title}</h2>
-    {/if}
-
-    {#if hasSections}
-        {#each sections as section}
-            {#if section.title}
-                <div class="mb-4">
-                    <h3 class="text-sm font-medium text-headline mb-2 uppercase tracking-wide">
-                        {section.title}
-                    </h3>
-                </div>
-            {/if}
-
-            <nav class="space-y-2 mb-8">
-                {#each section.items as item}
-                    <button
-                        type="button"
-                        onclick={() => handleItemClick(item)}
-                        class="w-full text-left px-3 py-2 rounded-md transition-colors duration-200 {selectedItemId ===
-                        item.id
-                            ? 'bg-action-primary-subtle text-headline border-l-2 border-action-primary'
-                            : 'text-secondary hover:text-headline hover:bg-base-50'}"
-                        aria-current={selectedItemId === item.id ? "page" : undefined}
-                    >
-                        <div class="flex items-center gap-2">
-                            {#if item.icon}
-                                <div class="shrink-0">
-                                    <svelte:component this={item.icon} class="h-4 w-4" />
-                                </div>
-                            {/if}
-                            <div class="flex-1">
-                                <div class="font-medium">{item.label}</div>
-                                {#if item.description}
-                                    <div class="text-xs text-description">
-                                        {item.description}
-                                    </div>
-                                {/if}
-                            </div>
-                        </div>
-                    </button>
-                {/each}
-            </nav>
-        {/each}
-    {:else if hasItems}
-        <nav class="space-y-1">
-            {#each items as item}
-                <button
-                    type="button"
-                    onclick={() => handleItemClick(item)}
-                    class="w-full text-left px-3 py-2 rounded-md transition-colors duration-200 {selectedItemId ===
-                    item.id
-                        ? 'bg-action-primary-subtle text-headline border-l-2 border-action-primary'
-                        : 'text-secondary hover:text-headline hover:bg-base-50'}"
-                    aria-current={selectedItemId === item.id ? "page" : undefined}
-                >
-                    <div class="flex items-center gap-2">
-                        {#if item.icon}
-                            <div class="shrink-0">
-                                <svelte:component this={item.icon} class="h-4 w-4" />
-                            </div>
-                        {/if}
-                        <div class="flex-1">
-                            <div class="font-medium">{item.label}</div>
-                            {#if item.description}
-                                <div class="text-xs text-description">
-                                    {item.description}
-                                </div>
-                            {/if}
-                        </div>
-                    </div>
-                </button>
-            {/each}
-        </nav>
-    {/if}
-
-        {#if footer}
-            <div class="mt-auto pt-6 border-t border-border">
-                {@render footer()}
-            </div>
-        {/if}
-    </aside>
-{/if}

package/dist/molecules/Sidebar.svelte.d.ts

@@ -1,30 +0,0 @@
-import type { Snippet } from "svelte";
-interface SidebarItem {
-    id: string;
-    label: string;
-    description?: string;
-    icon?: any;
-    onClick?: () => void;
-}
-interface SidebarSection {
-    title?: string;
-    items: SidebarItem[];
-}
-interface Props {
-    title?: string;
-    sections?: SidebarSection[];
-    items?: SidebarItem[];
-    selectedItemId?: string;
-    selectedSectionId?: string;
-    onItemClick?: (item: SidebarItem) => void;
-    onSectionClick?: (sectionId: string) => void;
-    className?: string;
-    header?: Snippet;
-    footer?: Snippet;
-    isOpen?: boolean;
-    onClose?: () => void;
-    mobileResponsive?: boolean;
-}
-declare const Sidebar: import("svelte").Component<Props, {}, "">;
-type Sidebar = ReturnType<typeof Sidebar>;
-export default Sidebar;