zabi-components 5.0.22 → 7.0.0

package/dist/molecules/Section.svelte

@@ -1,28 +1,19 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type { SizeVariant } from "../../types/variants.js";
+    import type { SizeVariant } from "../types/variants.js";
     import Heading from "../atoms/Heading.svelte";
 
     interface Props {
-        /** Section title */
         title?: string;
-        /** Section description/subtitle */
         description?: string;
-        /** Heading level for title (1-6) */
+        /** Title heading level (1–6). */
         headingLevel?: number;
-        /** Section size variant */
         size?: SizeVariant;
-        /** Maximum width of the section container */
         maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none";
-        /** Background variant */
         background?: "default" | "muted" | "accent" | "transparent";
-        /** Padding variant */
         padding?: "none" | "sm" | "md" | "lg" | "xl";
-        /** Whether to center the content */
         centered?: boolean;
-        /** Additional CSS classes */
         className?: string;
-        /** Section content */
         children?: Snippet;
     }
 
@@ -40,7 +31,7 @@
         ...restProps
     }: Props = $props();
 
-    const sizeClasses = $derived(() => {
+    const sizeClasses = $derived.by(() => {
         switch (size) {
             case "sm":
                 return "text-sm";
@@ -51,7 +42,7 @@
         }
     });
 
-    const maxWidthClasses = $derived(() => {
+    const maxWidthClasses = $derived.by(() => {
         switch (maxWidth) {
             case "sm":
                 return "max-w-screen-sm";
@@ -72,7 +63,7 @@
         }
     });
 
-    const backgroundClasses = $derived(() => {
+    const backgroundClasses = $derived.by(() => {
         switch (background) {
             case "muted":
                 return "bg-base-50";
@@ -85,7 +76,7 @@
         }
     });
 
-    const paddingClasses = $derived(() => {
+    const paddingClasses = $derived.by(() => {
         switch (padding) {
             case "none":
                 return "";
@@ -102,14 +93,14 @@
         }
     });
 
-    const containerClasses = $derived(() => {
+    const containerClasses = $derived.by(() => {
         const base = "w-full";
-        const maxWidthClass = maxWidthClasses();
+        const maxWidthClass = maxWidthClasses;
         const centeredClass = centered ? "mx-auto" : "";
         return `${base} ${maxWidthClass} ${centeredClass}`.trim();
     });
 
-    const contentClasses = $derived(() => {
+    const contentClasses = $derived.by(() => {
         const base = "px-4 sm:px-6 lg:px-8";
         const centeredClass = centered ? "text-center" : "";
         return `${base} ${centeredClass}`.trim();
@@ -117,18 +108,18 @@
 </script>
 
 <section
-    class="section {backgroundClasses()} {paddingClasses()} {className}"
+    class="section {backgroundClasses} {paddingClasses} {className}"
     {...restProps}
 >
-    <div class={containerClasses()}>
-        <div class={contentClasses()}>
+    <div class={containerClasses}>
+        <div class={contentClasses}>
             {#if title}
                 <div class="mb-6 {centered ? 'mx-auto' : ''}">
                     <Heading level={headingLevel} text={title} />
                     {#if description}
                         <p
-                            class="mt-4 {sizeClasses()} text-description {centered
-                                ? 'mx-auto max-w-2xl'
+                            class="mt-4 {sizeClasses} text-description {centered
+                                ? 'mx-auto'
                                 : ''}"
                         >
                             {description}

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

@@ -1,25 +1,16 @@
 import type { Snippet } from "svelte";
-import type { SizeVariant } from "../../types/variants.js";
+import type { SizeVariant } from "../types/variants.js";
 interface Props {
-    /** Section title */
     title?: string;
-    /** Section description/subtitle */
     description?: string;
-    /** Heading level for title (1-6) */
+    /** Title heading level (1–6). */
     headingLevel?: number;
-    /** Section size variant */
     size?: SizeVariant;
-    /** Maximum width of the section container */
     maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none";
-    /** Background variant */
     background?: "default" | "muted" | "accent" | "transparent";
-    /** Padding variant */
     padding?: "none" | "sm" | "md" | "lg" | "xl";
-    /** Whether to center the content */
     centered?: boolean;
-    /** Additional CSS classes */
     className?: string;
-    /** Section content */
     children?: Snippet;
 }
 declare const Section: import("svelte").Component<Props, {}, "">;

package/dist/molecules/SidebarBrandHeader.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    interface Props {
+        collapsed?: boolean;
+        brandName?: string;
+        logoSrc?: string;
+        logoAlt?: string;
+        className?: string;
+    }
+
+    let {
+        collapsed = false,
+        brandName = "",
+        logoSrc = "",
+        logoAlt = "",
+        className = "",
+    }: Props = $props();
+
+    const trimmedName = $derived(brandName.trim());
+    const monogram = $derived(
+        trimmedName
+            ? trimmedName
+                  .split(/\s+/)
+                  .map((w) => w[0])
+                  .join("")
+                  .slice(0, 2)
+                  .toUpperCase()
+            : "",
+    );
+    const showLogo = $derived(Boolean(logoSrc));
+    const showWordmark = $derived(Boolean(trimmedName) && !collapsed);
+    const showMonogram = $derived(
+        collapsed && !showLogo && Boolean(monogram),
+    );
+</script>
+
+{#if showLogo || trimmedName}
+    <div
+        class={`flex w-full min-w-0 items-center gap-2.5 ${className}`.trim()}
+    >
+        {#if showLogo}
+            <span
+                class="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-background ring-1 ring-border"
+            >
+                <img
+                    src={logoSrc}
+                    alt={logoAlt || trimmedName || "Brand"}
+                    class="size-full object-cover"
+                    width="36"
+                    height="36"
+                />
+            </span>
+        {:else if showMonogram}
+            <span
+                class="flex size-9 shrink-0 items-center justify-center rounded-xl bg-action-primary-subtle text-xs font-bold text-headline ring-1 ring-border"
+                aria-hidden="true"
+            >
+                {monogram}
+            </span>
+        {/if}
+        {#if showWordmark}
+            <span
+                class="truncate text-base font-semibold tracking-tight text-headline"
+            >
+                {trimmedName}
+            </span>
+        {/if}
+    </div>
+{/if}

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

@@ -0,0 +1,10 @@
+interface Props {
+    collapsed?: boolean;
+    brandName?: string;
+    logoSrc?: string;
+    logoAlt?: string;
+    className?: string;
+}
+declare const SidebarBrandHeader: import("svelte").Component<Props, {}, "">;
+type SidebarBrandHeader = ReturnType<typeof SidebarBrandHeader>;
+export default SidebarBrandHeader;

package/dist/molecules/SidebarFooter.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { fixedSidebarFlyout } from "../util/fixed-sidebar-flyout.js";
+
+    interface Props {
+        collapsed?: boolean;
+        showProfile?: boolean;
+        profileName?: string;
+        profileEmail?: string;
+        profileInitials?: string;
+        showLogout?: boolean;
+        logoutLabel?: string;
+        showThemeToggle?: boolean;
+        lightModeLabel?: string;
+        isLightMode?: boolean;
+        onLogout?: () => void;
+        onThemeToggle?: (nextIsLightMode: boolean) => void;
+        className?: string;
+        profilePanelOpen?: boolean;
+        profilePanelControlsId?: string;
+        onProfileClick?: (event?: MouseEvent) => void;
+        profilePanel?: Snippet;
+    }
+
+    let {
+        collapsed = false,
+        showProfile = true,
+        profileName = "Zabi",
+        profileEmail = "hello@zabi.dev",
+        profileInitials = "ZA",
+        showLogout = true,
+        logoutLabel = "Logout",
+        showThemeToggle = true,
+        lightModeLabel = "Light mode",
+        isLightMode = $bindable(false),
+        onLogout,
+        onThemeToggle,
+        className = "",
+        profilePanelOpen = false,
+        profilePanelControlsId = "",
+        onProfileClick,
+        profilePanel,
+    }: Props = $props();
+
+    const showFooter = $derived(showProfile || showLogout || showThemeToggle);
+    const showPanelLauncher = $derived(showProfile);
+
+    const avatarClasses =
+        "size-10 rounded-xl bg-action-primary text-action-primary flex items-center justify-center text-sm font-semibold shrink-0 ring-1 ring-border-focus";
+
+    function getTextToneClass(isMuted = false): string {
+        return isMuted ? "text-description" : "text-headline";
+    }
+
+    function handleProfileClick(event: MouseEvent): void {
+        onProfileClick?.(event);
+    }
+</script>
+
+{#if showFooter}
+    <div class="w-full shrink-0" data-sidebar-flyout-root>
+        <footer
+            class={`flex w-full shrink-0 flex-col gap-2.5 border-t border-border pt-3 pb-1 ${className}`.trim()}
+            aria-label="Account and settings"
+        >
+            {#if showPanelLauncher}
+                <button
+                    type="button"
+                    data-sidebar-flyout-anchor="profile"
+                    class="w-full cursor-pointer rounded-xl px-2 py-2 outline-none transition-colors hover:bg-nav-menu-hover hover:text-nav-menu-item-hover hover:ring-1 hover:ring-border/60 active:bg-base-200 focus-ring focus-ring--nav"
+                    aria-haspopup="dialog"
+                    aria-expanded={profilePanelOpen}
+                    aria-controls={profilePanelControlsId.trim()
+                        ? profilePanelControlsId.trim()
+                        : undefined}
+                    aria-label={collapsed
+                        ? `Open account panel`
+                        : `Open account panel for ${profileName}`}
+                    onclick={handleProfileClick}
+                >
+                    <span class="flex w-full items-center gap-3 text-left">
+                        <span class={avatarClasses} aria-hidden="true">
+                            {profileInitials}
+                        </span>
+                        {#if !collapsed}
+                            <span class="min-w-0">
+                                <span
+                                    class="block truncate text-sm font-semibold {getTextToneClass()}"
+                                >
+                                    {profileName}
+                                </span>
+                                <span
+                                    class="block truncate text-xs {getTextToneClass(true)}"
+                                >
+                                    {profileEmail}
+                                </span>
+                            </span>
+                        {/if}
+                    </span>
+                </button>
+            {/if}
+        </footer>
+
+        {#if showPanelLauncher && profilePanelOpen && profilePanel}
+            <div
+                class="max-h-[min(32rem,calc(100dvh-6rem))] overflow-y-auto overscroll-contain outline-none"
+                role="presentation"
+                use:fixedSidebarFlyout={{
+                    open: profilePanelOpen,
+                    align: "bottom",
+                    gap: 12,
+                    anchorRole: "profile",
+                }}
+            >
+                {@render profilePanel()}
+            </div>
+        {/if}
+    </div>
+{/if}

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

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+interface Props {
+    collapsed?: boolean;
+    showProfile?: boolean;
+    profileName?: string;
+    profileEmail?: string;
+    profileInitials?: string;
+    showLogout?: boolean;
+    logoutLabel?: string;
+    showThemeToggle?: boolean;
+    lightModeLabel?: string;
+    isLightMode?: boolean;
+    onLogout?: () => void;
+    onThemeToggle?: (nextIsLightMode: boolean) => void;
+    className?: string;
+    profilePanelOpen?: boolean;
+    profilePanelControlsId?: string;
+    onProfileClick?: (event?: MouseEvent) => void;
+    profilePanel?: Snippet;
+}
+declare const SidebarFooter: import("svelte").Component<Props, {}, "isLightMode">;
+type SidebarFooter = ReturnType<typeof SidebarFooter>;
+export default SidebarFooter;

package/dist/molecules/SidebarNavSection.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        title?: string;
+        /** Disambiguates generated ids when section titles repeat. */
+        sectionKey?: string;
+        /** `aria-label` on the `<ul>` (required when title is hidden in collapsed mode). */
+        listAriaLabel: string;
+        collapsed?: boolean;
+        className?: string;
+        children: Snippet;
+    }
+
+    let {
+        title = "",
+        sectionKey = "",
+        listAriaLabel,
+        collapsed = false,
+        className = "",
+        children,
+    }: Props = $props();
+
+    const trimmedTitle = $derived(title.trim());
+    const headingId = $derived(
+        trimmedTitle
+            ? `sidebar-section-${sectionKey || "group"}`
+            : undefined,
+    );
+    const showHeading = $derived(Boolean(trimmedTitle) && !collapsed);
+</script>
+
+<div class={`flex w-full flex-col gap-1.5 ${className}`.trim()}>
+    {#if showHeading && headingId}
+        <h2
+            class="px-0 text-[10px] font-semibold uppercase tracking-[0.12em] text-description"
+            id={headingId}
+        >
+            {trimmedTitle}
+        </h2>
+    {/if}
+    <ul
+        class="flex w-full flex-col gap-0.5 px-0"
+        aria-labelledby={showHeading && headingId ? headingId : undefined}
+        aria-label={showHeading ? undefined : listAriaLabel}
+    >
+        {@render children()}
+    </ul>
+</div>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+interface Props {
+    title?: string;
+    /** Disambiguates generated ids when section titles repeat. */
+    sectionKey?: string;
+    /** `aria-label` on the `<ul>` (required when title is hidden in collapsed mode). */
+    listAriaLabel: string;
+    collapsed?: boolean;
+    className?: string;
+    children: Snippet;
+}
+declare const SidebarNavSection: import("svelte").Component<Props, {}, "">;
+type SidebarNavSection = ReturnType<typeof SidebarNavSection>;
+export default SidebarNavSection;

package/dist/molecules/SlideUp.svelte

@@ -4,7 +4,8 @@
         returnFocus,
         saveFocus,
         trapFocus,
-    } from "../../routes/lib/focus-utils.js";
+    } from '../util/focus-utils.js';
+    import { generateId } from "../util/ssr-safe.js";
 
     interface Props {
         isOpen?: boolean;
@@ -14,12 +15,16 @@
     }
 
     let {
-        isOpen = false,
-        title = "",
+        isOpen = $bindable(false),
+        title = '',
+        onclick,
+        onkeydown,
         children,
         ...restProps
     } = $props<Props & { children?: any }>();
 
+    const slideTitleId = generateId('slideup-title');
+
     let slideUpContainer = $state<HTMLDivElement>();
     let cleanupFocusTrap: (() => void) | null = null;
 
@@ -31,7 +36,7 @@
         }
         returnFocus();
         if (onclick && event) {
-            (onclick as (event: Event) => void)(event);
+            onclick(event);
         }
     }
 
@@ -46,6 +51,7 @@
         } else if (!isOpen && cleanupFocusTrap) {
             cleanupFocusTrap();
             cleanupFocusTrap = null;
+            returnFocus();
         }
     });
 
@@ -57,41 +63,40 @@
 
     function handleKeydown(event: Event) {
         const keyboardEvent = event as KeyboardEvent;
-        if (keyboardEvent.key === "Escape") {
+        if (keyboardEvent.key === 'Escape') {
             closeSlideUp(event);
         }
-        if (onkeydown) {
-            (onkeydown as (event: Event) => void)(event);
-        }
+        onkeydown?.(event);
     }
 </script>
 
 {#if isOpen}
     <div
-        class="fixed inset-0 bg-overlay z-modal"
+        class="fixed inset-0 z-modal cursor-pointer bg-overlay"
         onclick={handleBackdropClick}
         onkeydown={handleKeydown}
         role="dialog"
         aria-modal="true"
-        aria-labelledby={title ? "slideup-title" : undefined}
+        aria-labelledby={title ? slideTitleId : undefined}
         tabindex="-1"
+        {...restProps}
     >
         <div
             bind:this={slideUpContainer}
-            class="fixed bottom-0 left-0 right-0 bg-card rounded-t-3xl shadow-xl z-modal max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] flex flex-col"
+            class="fixed bottom-0 left-0 right-0 z-modal flex max-h-[90vh] cursor-default flex-col overflow-y-auto rounded-t-3xl bg-card shadow-xl animate-[slideUp_0.3s_ease-out]"
         >
             {#if title}
-                <div class="flex items-center justify-between px-6 pt-6 pb-4">
+                <div class="flex items-center justify-between px-6 pb-4 pt-6">
                     <h2
-                        id="slideup-title"
-                        class="text-2xl font-normal leading-8 text-headline tracking-normal"
+                        id={slideTitleId}
+                        class="text-2xl font-normal leading-8 tracking-normal text-headline"
                     >
                         {title}
                     </h2>
                     <button
                         type="button"
                         onclick={closeSlideUp}
-                        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-100"
+                        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-2xl text-description transition-colors hover:bg-base-100 hover:text-headline"
                         aria-label="Close"
                     >
                         ×
@@ -99,7 +104,7 @@
                 </div>
             {/if}
 
-            <div class="px-6 pb-6 flex-1">
+            <div class="flex-1 px-6 pb-6">
                 {@render children?.()}
             </div>
         </div>

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

@@ -7,6 +7,6 @@ interface Props {
 type $$ComponentProps = Props & {
     children?: any;
 };
-declare const SlideUp: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const SlideUp: import("svelte").Component<$$ComponentProps, {}, "isOpen">;
 type SlideUp = ReturnType<typeof SlideUp>;
 export default SlideUp;

package/dist/molecules/Tabs.svelte

@@ -1,10 +1,5 @@
 <script lang="ts">
-    function createId(prefix: string): string {
-        if (typeof window !== "undefined") {
-            return `${prefix}-${Math.random().toString(36).slice(2, 11)}`;
-        }
-        return `${prefix}-ssr-${Date.now()}`;
-    }
+    import { generateId } from "../util/ssr-safe.js";
 
     interface Props {
         tabs?: Array<{
@@ -26,7 +21,7 @@
         ...restProps
     }: Props & { children?: any } = $props();
 
-    const tabsBaseId = createId("tabs");
+    const tabsBaseId = generateId("tabs");
 
     function selectTab(tabId: string) {
         activeTab = tabId;
@@ -100,17 +95,17 @@
         tabindex="0"
         onkeydown={handleKeydown}
     >
-        {#each tabs as tab}
+        {#each tabs as tab (tab.id)}
             <button
                 type="button"
                 role="tab"
                 id={getTabId(tab.id)}
-                class="px-4 py-2 text-sm font-medium border-b-2 transition-colors {activeTab ===
+                class="focus-ring cursor-pointer border-b-2 px-4 py-2 text-sm font-medium transition-colors focus:outline-none focus-visible:outline-none active:bg-base-100 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-transparent disabled:hover:text-description {activeTab ===
                 tab.id
                     ? variant === 'pills'
-                        ? 'bg-brand-100 text-brand-700 border-brand-500'
+                        ? 'border-brand-500 bg-brand-100 text-brand-700'
                         : 'border-brand-500 text-body'
-                    : 'border-transparent text-description hover:text-body hover:border-base-300'}"
+                    : 'border-transparent text-description hover:border-base-300 hover:text-body'}"
                 onclick={() => selectTab(tab.id)}
                 disabled={tab.disabled}
                 aria-selected={activeTab === tab.id}

package/dist/molecules/Toaster.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import ToasterToast from './ToasterToast.svelte';
+    import { toastStore } from './toast-store.js';
+
+    interface Props {
+        class?: string;
+    }
+
+    let { class: className = '' }: Props = $props();
+</script>
+
+<div
+    class="pointer-events-none fixed bottom-4 right-4 z-toast flex min-w-0 w-[min(24rem,calc(100vw-2rem))] flex-col gap-2 p-4 {className}"
+    role="region"
+    aria-label="Notifications"
+    aria-live="polite"
+>
+    {#each $toastStore as toast (toast.id)}
+        <ToasterToast {toast} />
+    {/each}
+</div>

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

@@ -0,0 +1,6 @@
+interface Props {
+    class?: string;
+}
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;