zabi-components 6.0.0 → 7.0.1

package/dist/molecules/RadioGroup.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+    import {
+        RADIO_CHECKED_DOT_CLASSES,
+        RADIO_GROUP_CONTROL_SHELL,
+        RADIO_GROUP_OPTION_LABEL_ROW,
+        RADIO_GROUP_RING_OVERLAY,
+    } from "../atoms/selection-control.styles";
+    import { generateId } from "../util/ssr-safe.js";
+    import { SvelteMap } from "svelte/reactivity";
+
+    export type RadioGroupOption = {
+        value: string;
+        label: string;
+        disabled?: boolean;
+        description?: string;
+    };
+
+    interface Props {
+        options: RadioGroupOption[];
+        /** Selected value; `bind:value`. Use `undefined` for no selection. */
+        value?: string | undefined;
+        /** Uncontrolled initial value. */
+        defaultValue?: string | undefined;
+        name?: string;
+        disabled?: boolean;
+        legend?: string;
+        label?: string;
+    }
+
+    let {
+        options,
+        defaultValue,
+        value = $bindable(defaultValue),
+        name: nameProp,
+        disabled = false,
+        legend = "",
+        label = "",
+        ...restProps
+    }: Props = $props();
+
+    const fallbackName = generateId("radiogroup");
+    const groupName = $derived(nameProp || fallbackName);
+    const legendText = $derived(legend || label);
+
+    const enabledOptions = $derived.by(() =>
+        options.filter((o: RadioGroupOption) => !disabled && !o.disabled),
+    );
+
+    const fallbackValue = $derived.by(() => enabledOptions[0]?.value ?? "");
+
+    /** False if controlled `value` is set but missing from `options` (stale); roving tabindex then follows first enabled instead. */
+    const valueMatchesOption = $derived(
+        value === undefined ||
+            value === "" ||
+            options.some((o: RadioGroupOption) => o.value === value),
+    );
+
+    function isOptionDisabled(option: RadioGroupOption): boolean {
+        return disabled || !!option.disabled;
+    }
+
+    function tabIndexFor(option: RadioGroupOption): number {
+        if (isOptionDisabled(option)) return -1;
+        if (
+            value !== undefined &&
+            value !== "" &&
+            valueMatchesOption
+        ) {
+            return option.value === value ? 0 : -1;
+        }
+        return option.value === fallbackValue ? 0 : -1;
+    }
+
+    function handleChange(event: Event) {
+        if (disabled) return;
+        const target = event.target as HTMLInputElement;
+        value = target.value;
+    }
+
+    const elementsByValue = new SvelteMap<string, HTMLInputElement>();
+    function registerRadio(valueKey: string) {
+        return (node: HTMLInputElement) => {
+            elementsByValue.set(valueKey, node);
+            return () => {
+                elementsByValue.delete(valueKey);
+            };
+        };
+    }
+
+    function focusValue(nextValue: string) {
+        const el = elementsByValue.get(nextValue);
+        el?.focus();
+    }
+
+    function moveSelection(delta: number) {
+        const enabled = enabledOptions;
+        if (enabled.length === 0) return;
+
+        const rawIndex = enabled.findIndex((o) => o.value === value);
+        const currentIndex =
+            rawIndex === -1
+                ? delta > 0
+                    ? -1
+                    : enabled.length
+                : rawIndex;
+        const nextIndex =
+            (currentIndex + delta + enabled.length) % enabled.length;
+        const next = enabled[nextIndex];
+        if (!next) return;
+        value = next.value;
+        focusValue(next.value);
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        const key = event.key;
+        if (
+            key !== "ArrowRight" &&
+            key !== "ArrowDown" &&
+            key !== "ArrowLeft" &&
+            key !== "ArrowUp" &&
+            key !== "Home" &&
+            key !== "End"
+        ) {
+            return;
+        }
+
+        const enabled = enabledOptions;
+        if (enabled.length === 0) return;
+
+        event.preventDefault();
+        if (key === "ArrowRight" || key === "ArrowDown") {
+            moveSelection(1);
+        } else if (key === "ArrowLeft" || key === "ArrowUp") {
+            moveSelection(-1);
+        } else if (key === "Home") {
+            value = enabled[0].value;
+            focusValue(enabled[0].value);
+        } else if (key === "End") {
+            const last = enabled[enabled.length - 1];
+            value = last.value;
+            focusValue(last.value);
+        }
+    }
+
+    const optionLabelWrapperClasses = RADIO_GROUP_OPTION_LABEL_ROW;
+
+    const radioControlShellClasses = RADIO_GROUP_CONTROL_SHELL;
+
+    const radioRingOverlayClasses = RADIO_GROUP_RING_OVERLAY;
+</script>
+
+<fieldset
+    class="space-y-3"
+    aria-disabled={disabled ? "true" : undefined}
+    onkeydown={handleKeydown}
+    {...restProps}
+>
+    {#if legendText}
+        <legend class="text-sm font-medium text-label mb-1">
+            {legendText}
+        </legend>
+    {/if}
+
+    <div class="space-y-3">
+        {#each options as option (option.value)}
+            {@const optionDisabled = isOptionDisabled(option)}
+            {@const isChecked = value === option.value}
+            <label class={optionLabelWrapperClasses}>
+                <span class={radioControlShellClasses}>
+                    <input
+                        type="radio"
+                        name={groupName}
+                        value={option.value}
+                        checked={isChecked}
+                        disabled={optionDisabled}
+                        tabindex={tabIndexFor(option)}
+                        class="sr-only"
+                        onchange={handleChange}
+                        {@attach registerRadio(option.value)}
+                    />
+                    <span class={radioRingOverlayClasses}></span>
+                    <span class={RADIO_CHECKED_DOT_CLASSES} aria-hidden="true"></span>
+                </span>
+                <span class="flex flex-col gap-1">
+                    <span class="text-sm font-medium text-label">
+                        {option.label}
+                    </span>
+                    {#if option.description}
+                        <span class="text-sm text-description">
+                            {option.description}
+                        </span>
+                    {/if}
+                </span>
+            </label>
+        {/each}
+    </div>
+</fieldset>

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

@@ -0,0 +1,20 @@
+export type RadioGroupOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    description?: string;
+};
+interface Props {
+    options: RadioGroupOption[];
+    /** Selected value; `bind:value`. Use `undefined` for no selection. */
+    value?: string | undefined;
+    /** Uncontrolled initial value. */
+    defaultValue?: string | undefined;
+    name?: string;
+    disabled?: boolean;
+    legend?: string;
+    label?: string;
+}
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

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;
     }
 

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,12 +63,10 @@
 
     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>
 
@@ -73,25 +77,26 @@
         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 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;