zabi-components 5.0.20 → 5.0.21

package/dist/atoms/IconButton.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { ButtonVariant, SizeVariant } from "../../types/variants.js";
+
+    interface Props {
+        /** Visual style variant. */
+        variant?: ButtonVariant;
+        /** Size variant controlling padding and radius. */
+        size?: SizeVariant;
+        /** Whether the button is disabled. */
+        disabled?: boolean;
+        /** Button type attribute. */
+        type?: "button" | "submit" | "reset";
+        /** Accessible label for icon-only buttons. */
+        label?: string;
+        /** Click handler for native click events. */
+        onclick?: (event: MouseEvent) => void;
+        /** Icon content. */
+        children?: Snippet;
+    }
+
+    let {
+        variant = "primary",
+        size = "md",
+        disabled = false,
+        type = "button",
+        label = "",
+        onclick,
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const sizeClass = $derived(() => {
+        if (size === "sm") {
+            return {
+                padding: "p-2",
+                radius: "rounded-md",
+            };
+        } else if (size === "lg") {
+            return {
+                padding: "p-3",
+                radius: "rounded-xl",
+            };
+        } else {
+            return {
+                padding: "p-2.5",
+                radius: "rounded-lg",
+            };
+        }
+    });
+
+    const variantClass = $derived(() => {
+        return variant === "primary"
+            ? "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
+            : variant === "secondary"
+              ? "bg-action-secondary text-headline hover:bg-action-secondary-hover active:bg-action-secondary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
+              : variant === "danger"
+                ? "bg-action-danger text-inverse hover:bg-action-danger-hover active:bg-action-danger-active focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+                : variant === "ghost"
+                  ? "bg-transparent text-headline hover:bg-base-100 active:bg-base-200 focus:ring-2 focus:ring-base-500 focus:ring-offset-2 disabled:text-disabled"
+                  : variant === "outline"
+                    ? "bg-transparent border-2 border-action-primary text-headline hover:bg-action-secondary hover:text-action-primary active:bg-action-primary-active active:text-action-primary focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:border-disabled disabled:text-disabled"
+                    : variant === "link"
+                      ? "text-brand-700 active:text-brand-700 underline-offset-4 hover:underline focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 disabled:text-disabled disabled:no-underline"
+                      : "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2";
+    });
+
+    const buttonClasses = $derived(() => {
+        const sizeStyles = sizeClass();
+        const baseClasses =
+            "inline-flex items-center justify-center transition-all duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none";
+
+        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.radius} ${variantClass()}`.trim();
+    });
+</script>
+
+<button
+    {type}
+    class={buttonClasses()}
+    {disabled}
+    {onclick}
+    aria-label={label || undefined}
+    {...restProps}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</button>

package/dist/atoms/IconButton.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { ButtonVariant, SizeVariant } from "../../types/variants.js";
+interface Props {
+    /** Visual style variant. */
+    variant?: ButtonVariant;
+    /** Size variant controlling padding and radius. */
+    size?: SizeVariant;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+    /** Button type attribute. */
+    type?: "button" | "submit" | "reset";
+    /** Accessible label for icon-only buttons. */
+    label?: string;
+    /** Click handler for native click events. */
+    onclick?: (event: MouseEvent) => void;
+    /** Icon content. */
+    children?: Snippet;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/atoms/Select.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import Dropdown from "../molecules/Dropdown.svelte";
+    import Button from "./Button.svelte";
     import {
         ChevronDown,
         CheckCircle,
@@ -22,6 +23,16 @@
             label: string;
             disabled?: boolean;
         }>;
+        /** Enables the search input inside the dropdown. */
+        searchable?: boolean;
+        /** Placeholder for the search input. */
+        searchPlaceholder?: string;
+        /** Max height for the options list (supports any valid CSS length). */
+        maxMenuHeight?: string;
+        /** Width for the dropdown menu (supports any valid CSS length). */
+        menuWidth?: string;
+        /** Message shown when no options match the search. */
+        noResultsText?: string;
         placeholder?: string;
         label?: string;
         disabled?: boolean;
@@ -34,6 +45,11 @@
     let {
         value = undefined,
         options = [],
+        searchable = true,
+        searchPlaceholder = "Search options",
+        maxMenuHeight = "60vh",
+        menuWidth = "100%",
+        noResultsText = "No results found",
         placeholder = "Select an option",
         label = "",
         disabled = false,
@@ -46,6 +62,7 @@
 
     let isOpen = $state(false);
     let selectContainer: HTMLDivElement;
+    let searchQuery = $state("");
 
     const sizeClass = $derived(() => {
         if (size === "sm") {
@@ -93,13 +110,13 @@
 
     const messageClasses = $derived(() => {
         if (variant === "error") {
-            return "text-error text-sm mt-1 flex items-center gap-1.5";
+            return "text-error text-sm mt-1 flex items-center gap-1.5 w-full";
         } else if (variant === "success") {
-            return "text-success text-sm mt-1 flex items-center gap-1.5";
+            return "text-success text-sm mt-1 flex items-center gap-1.5 w-full";
         } else if (variant === "warning") {
-            return "text-warning text-sm mt-1 flex items-center gap-1.5";
+            return "text-warning text-sm mt-1 flex items-center gap-1.5 w-full";
         }
-        return "text-description text-sm mt-1 flex items-center gap-1.5";
+        return "text-description text-sm mt-1 flex items-center gap-1.5 w-full";
     });
 
     const getIcon = $derived(() => {
@@ -125,6 +142,33 @@
         return value === undefined || value === null || value === "";
     });
 
+    const normalizedOptions = $derived(() => {
+        const fallbackOptions = (restProps as { options?: Props["options"] })
+            .options;
+        return Array.from(options ?? fallbackOptions ?? []);
+    });
+
+    const hasSearchQuery = $derived(() => {
+        return searchQuery.trim().length > 0;
+    });
+
+    const filteredOptions = $derived(() => {
+        const query = searchQuery.trim().toLowerCase();
+        const availableOptions = normalizedOptions();
+        if (!searchable || query.length === 0) {
+            return availableOptions;
+        }
+        return availableOptions.filter((option) =>
+            option.label.toLowerCase().includes(query),
+        );
+    });
+
+    $effect(() => {
+        if (!isOpen && searchQuery.length > 0) {
+            searchQuery = "";
+        }
+    });
+
     function handleOptionClick(optionValue: string | number) {
         if (disabled) return;
         value = optionValue;
@@ -179,8 +223,8 @@
         {isOpen}
         placement="bottom-start"
         selectedValue={value}
-        {options}
         onOptionClick={handleOptionClick}
+        ariaLabel="Select options"
     >
         {#snippet trigger()}
             <button
@@ -194,7 +238,7 @@
                 aria-describedby={message ? `${selectId}-message` : undefined}
             >
                 <span
-                    class="text-left flex-1 {isEmpty()
+                    class="text-left flex-1 truncate {isEmpty()
                         ? 'text-description'
                         : 'text-body'}"
                 >
@@ -211,6 +255,52 @@
                 />
             </button>
         {/snippet}
+        {#snippet children()}
+            <div class="px-2 pb-2 pt-1" style:width={menuWidth}>
+                {#if searchable}
+                    <div class="px-1 pb-2">
+                        <input
+                            type="text"
+                            class="w-full rounded-md bg-input hover:bg-input-hover focus:bg-input-focus text-body placeholder:text-description px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                            placeholder={searchPlaceholder}
+                            bind:value={searchQuery}
+                            aria-label={searchPlaceholder}
+                            {disabled}
+                        />
+                    </div>
+                {/if}
+                <div
+                    class="overflow-y-auto px-1"
+                    style:max-height={maxMenuHeight}
+                >
+                    {#if filteredOptions().length > 0}
+                        {#each filteredOptions() as option (option.value)}
+                            {@const buttonRestProps = {
+                                "data-value": String(option.value),
+                            } as Record<string, string>}
+                            <div class="w-full my-0.5">
+                                <Button
+                                    variant={value === option.value
+                                        ? "outline"
+                                        : "ghost"}
+                                    size="sm"
+                                    isFullWidth={true}
+                                    disabled={option.disabled}
+                                    onclick={() => handleOptionClick(option.value)}
+                                    {...buttonRestProps}
+                                >
+                                    {option.label}
+                                </Button>
+                            </div>
+                        {/each}
+                    {:else if hasSearchQuery()}
+                        <div class="px-3 py-2 text-sm text-description">
+                            {noResultsText}
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        {/snippet}
     </Dropdown>
     {#if message && variant !== "default"}
         <p id={`${selectId}-message`} class={messageClasses()} role="alert">

package/dist/atoms/Select.svelte.d.ts

@@ -5,6 +5,16 @@ interface Props {
         label: string;
         disabled?: boolean;
     }>;
+    /** Enables the search input inside the dropdown. */
+    searchable?: boolean;
+    /** Placeholder for the search input. */
+    searchPlaceholder?: string;
+    /** Max height for the options list (supports any valid CSS length). */
+    maxMenuHeight?: string;
+    /** Width for the dropdown menu (supports any valid CSS length). */
+    menuWidth?: string;
+    /** Message shown when no options match the search. */
+    noResultsText?: string;
     placeholder?: string;
     label?: string;
     disabled?: boolean;

package/dist/atoms/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
+export { default as IconButton } from './IconButton.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';

package/dist/atoms/index.js

@@ -1,6 +1,7 @@
 export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
+export { default as IconButton } from './IconButton.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';

package/dist/components/atoms/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
+export { default as IconButton } from './IconButton.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';

package/dist/components/atoms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/molecules/index.d.ts

@@ -11,6 +11,7 @@ export { default as NavigationMenuItem } from './NavigationMenuItem.svelte';
 export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.svelte';
 export { default as NavigationMenuContent } from './NavigationMenuContent.svelte';
 export { default as NavigationMenuLink } from './NavigationMenuLink.svelte';
+export { default as Section } from './Section.svelte';
 export { default as Sidebar } from './Sidebar.svelte';
 export { default as SlideUp } from './SlideUp.svelte';
 export { default as Tabs } from './Tabs.svelte';

package/dist/components/molecules/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}

package/dist/molecules/Section.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    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) */
+        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;
+    }
+
+    let {
+        title = "",
+        description = "",
+        headingLevel = 2,
+        size = "md",
+        maxWidth = "xl",
+        background = "default",
+        padding = "lg",
+        centered = false,
+        className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const sizeClasses = $derived(() => {
+        switch (size) {
+            case "sm":
+                return "text-sm";
+            case "lg":
+                return "text-lg";
+            default:
+                return "text-base";
+        }
+    });
+
+    const maxWidthClasses = $derived(() => {
+        switch (maxWidth) {
+            case "sm":
+                return "max-w-screen-sm";
+            case "md":
+                return "max-w-screen-md";
+            case "lg":
+                return "max-w-screen-lg";
+            case "xl":
+                return "max-w-screen-xl";
+            case "2xl":
+                return "max-w-screen-2xl";
+            case "full":
+                return "max-w-full";
+            case "none":
+                return "";
+            default:
+                return "max-w-screen-xl";
+        }
+    });
+
+    const backgroundClasses = $derived(() => {
+        switch (background) {
+            case "muted":
+                return "bg-base-50";
+            case "accent":
+                return "bg-brand-50 dark:bg-brand-950";
+            case "transparent":
+                return "bg-transparent";
+            default:
+                return "bg-background";
+        }
+    });
+
+    const paddingClasses = $derived(() => {
+        switch (padding) {
+            case "none":
+                return "";
+            case "sm":
+                return "py-8 sm:py-12";
+            case "md":
+                return "py-12 sm:py-16";
+            case "lg":
+                return "py-16 sm:py-24";
+            case "xl":
+                return "py-24 sm:py-32";
+            default:
+                return "py-16 sm:py-24";
+        }
+    });
+
+    const containerClasses = $derived(() => {
+        const base = "w-full";
+        const maxWidthClass = maxWidthClasses();
+        const centeredClass = centered ? "mx-auto" : "";
+        return `${base} ${maxWidthClass} ${centeredClass}`.trim();
+    });
+
+    const contentClasses = $derived(() => {
+        const base = "px-4 sm:px-6 lg:px-8";
+        const centeredClass = centered ? "text-center" : "";
+        return `${base} ${centeredClass}`.trim();
+    });
+</script>
+
+<section
+    class="section {backgroundClasses()} {paddingClasses()} {className}"
+    {...restProps}
+>
+    <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'
+                                : ''}"
+                        >
+                            {description}
+                        </p>
+                    {/if}
+                </div>
+            {/if}
+
+            {#if children}
+                <div class="section-content {centered ? 'mx-auto' : ''}">
+                    {@render children()}
+                </div>
+            {/if}
+        </div>
+    </div>
+</section>
+
+<style>
+    .section {
+        position: relative;
+        width: 100%;
+    }
+
+    .section-content {
+        width: 100%;
+    }
+</style>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from "svelte";
+import type { SizeVariant } from "../../types/variants.js";
+interface Props {
+    /** Section title */
+    title?: string;
+    /** Section description/subtitle */
+    description?: string;
+    /** Heading level for title (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, {}, "">;
+type Section = ReturnType<typeof Section>;
+export default Section;

package/dist/molecules/index.d.ts

@@ -11,6 +11,7 @@ export { default as NavigationMenuItem } from './NavigationMenuItem.svelte';
 export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.svelte';
 export { default as NavigationMenuContent } from './NavigationMenuContent.svelte';
 export { default as NavigationMenuLink } from './NavigationMenuLink.svelte';
+export { default as Section } from './Section.svelte';
 export { default as Sidebar } from './Sidebar.svelte';
 export { default as SlideUp } from './SlideUp.svelte';
 export { default as Tabs } from './Tabs.svelte';

package/dist/molecules/index.js

@@ -11,6 +11,7 @@ export { default as NavigationMenuItem } from './NavigationMenuItem.svelte';
 export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.svelte';
 export { default as NavigationMenuContent } from './NavigationMenuContent.svelte';
 export { default as NavigationMenuLink } from './NavigationMenuLink.svelte';
+export { default as Section } from './Section.svelte';
 export { default as Sidebar } from './Sidebar.svelte';
 export { default as SlideUp } from './SlideUp.svelte';
 export { default as Tabs } from './Tabs.svelte';

package/dist/organisms/Navigation.svelte

@@ -35,11 +35,11 @@
     const ulClasses = $derived(() => {
         return variant === "sidebar"
             ? "flex flex-col gap-1"
-            : "flex items-center justify-between gap-1";
+            : "flex flex-col gap-1 md:flex-row md:items-center md:justify-between";
     });
 
     function getNavItemClasses(itemHref: string): string {
-        const baseClasses = "flex flex-col gap-1 grow h-full items-center justify-center min-h-0 min-w-0 relative shrink-0 cursor-pointer";
+        const baseClasses = "flex flex-col gap-1 grow h-full items-center justify-center min-h-0 min-w-0 relative shrink-0 cursor-pointer w-full md:w-auto";
 
         return baseClasses;
     }