zabi-components 5.0.22 → 7.0.0

package/dist/atoms/CodeBlock.svelte

@@ -1,9 +1,16 @@
 <script lang="ts">
+    import Check from "@lucide/svelte/icons/check";
+    import Copy from "@lucide/svelte/icons/copy";
+    import IconButton from "./IconButton.svelte";
+
     interface Props {
+        /** Raw source; escaped unless `trustHtml` (e.g. highlighter HTML). */
         code: string;
         language?: string;
         className?: string;
         showCopyButton?: boolean;
+        /** If true, `{@html code}` — only trusted, sanitized input. */
+        trustHtml?: boolean;
     }
 
     let {
@@ -11,6 +18,7 @@
         language = "svelte",
         className = "",
         showCopyButton = true,
+        trustHtml = false,
         ...restProps
     } = $props();
 
@@ -30,11 +38,11 @@
 </script>
 
 <div
-    class="code-block relative bg-base-900 rounded-lg overflow-hidden {className}"
+    class="code-block relative bg-surface-1 border border-border rounded-lg overflow-hidden {className}"
     {...restProps}
 >
     <div
-        class="flex items-center justify-between px-4 py-2 bg-base-800 border-b border-base-700"
+        class="flex items-center justify-between px-4 py-2 bg-surface-2 border-b border-border"
     >
         <div class="flex items-center gap-2">
             <div class="w-3 h-3 rounded-full bg-red-500"></div>
@@ -42,46 +50,24 @@
             <div class="w-3 h-3 rounded-full bg-green-500"></div>
         </div>
         {#if showCopyButton}
-            <button
+            <IconButton
+                variant="ghost"
+                size="sm"
+                label={copied ? "Code copied to clipboard" : "Copy code to clipboard"}
                 onclick={copyToClipboard}
-                class="flex items-center gap-2 px-3 py-1 text-xs text-base-300 hover:text-white hover:bg-base-700 rounded transition-colors duration-200"
-                aria-label="Copy code to clipboard"
             >
                 {#if copied}
-                    <svg
-                        class="w-4 h-4"
-                        fill="currentColor"
-                        viewBox="0 0 20 20"
-                    >
-                        <path
-                            fill-rule="evenodd"
-                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                            clip-rule="evenodd"
-                        />
-                    </svg>
-                    Copied!
+                    <Check size={16} class="shrink-0" aria-hidden="true" />
                 {:else}
-                    <svg
-                        class="w-4 h-4"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                    >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                        />
-                    </svg>
-                    Copy
+                    <Copy size={16} class="shrink-0" aria-hidden="true" />
                 {/if}
-            </button>
+            </IconButton>
         {/if}
     </div>
 
-    <pre class="p-4 overflow-x-auto text-sm text-base-100 leading-relaxed"><code
-            class="language-{language}">{@html code}</code
+    <pre class="p-4 overflow-x-auto text-sm text-base-900 leading-relaxed"><code
+            class="language-{language}"
+            >{#if trustHtml}{@html code}{:else}{code}{/if}</code
         ></pre>
 </div>
 

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

@@ -3,6 +3,7 @@ declare const CodeBlock: import("svelte").Component<{
     language?: string;
     className?: string;
     showCopyButton?: boolean;
+    trustHtml?: boolean;
 } & Record<string, any>, {}, "">;
 type CodeBlock = ReturnType<typeof CodeBlock>;
 export default CodeBlock;

package/dist/atoms/ColorPicker.svelte

@@ -25,7 +25,7 @@
     let colorMap: HTMLCanvasElement | undefined;
     let colorMapContainer: HTMLDivElement | undefined;
 
-    // HSL values (0-360, 0-100, 0-100)
+    // Working color in HSL (h: 0–360; s, l: 0–100).
     let hue = $state(0);
     let saturation = $state(100);
     let lightness = $state(50);
@@ -156,7 +156,6 @@
         const width = colorMap.width;
         const height = colorMap.height;
 
-        // Draw saturation/lightness gradient
         for (let x = 0; x < width; x++) {
             for (let y = 0; y < height; y++) {
                 const s = (x / width) * 100;
@@ -284,7 +283,7 @@
                 type="button"
                 onclick={togglePicker}
                 {disabled}
-                class="w-11 h-11 rounded-lg border-2 border-card shrink-0 cursor-pointer hover:ring-2 hover:ring-brand-500 transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+                class="focus-ring w-11 h-11 rounded-lg border-2 border-card shrink-0 cursor-pointer hover:ring-2 hover:ring-border transition-colors disabled:cursor-not-allowed disabled:opacity-50"
                 style="background-color: {displayColor};"
                 aria-label="Open color picker"
                 aria-expanded={isOpen}
@@ -293,12 +292,11 @@
             {#if isOpen}
                 <div
                     use:setPickerContainer
-                    class="absolute top-12 right-0 z-50 bg-input rounded-2xl shadow-lg p-4 w-80"
+                    class="absolute top-12 right-0 z-50 border border-input-border bg-input rounded-2xl shadow-lg p-4 w-80"
                     role="dialog"
                     aria-label="Color picker"
                 >
                     <div class="space-y-4">
-                        <!-- Color Map -->
                         <div
                             use:setColorMapContainer
                             class="relative w-full h-48 rounded-xl overflow-hidden cursor-crosshair"
@@ -315,14 +313,12 @@
                                 height={192}
                                 class="w-full h-full"
                             ></canvas>
-                            <!-- Color indicator -->
                             <div
                                 class="absolute w-4 h-4 border-2 border-white rounded-full shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-1/2"
                                 style="left: {pickerIndicatorX}; top: {pickerIndicatorY};"
                             ></div>
                         </div>
 
-                        <!-- Hue Slider -->
                         <div class="space-y-2">
                             <div
                                 class="relative h-6 rounded-lg overflow-hidden"

package/dist/atoms/Container.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+
+    interface Props {
+        as?: 'div' | 'section' | 'main' | 'article';
+        maxWidth?: MaxWidth;
+        padded?: boolean;
+        class?: string;
+        children?: Snippet;
+    }
+
+    let {
+        as: Tag = 'div',
+        maxWidth = 'xl',
+        padded = true,
+        class: className = '',
+        children,
+    }: Props = $props();
+
+    const maxClass: Record<MaxWidth, string> = {
+        sm: 'max-w-screen-sm',
+        md: 'max-w-screen-md',
+        lg: 'max-w-screen-lg',
+        xl: 'max-w-screen-xl',
+        '2xl': 'max-w-screen-2xl',
+        full: 'max-w-full',
+    };
+</script>
+
+<svelte:element
+    this={Tag}
+    class={['mx-auto w-full', maxClass[maxWidth], padded ? 'px-4 sm:px-6' : '', className]
+        .filter(Boolean)
+        .join(' ')}
+>
+    {#if children}
+        {@render children()}
+    {/if}
+</svelte:element>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+interface Props {
+    as?: 'div' | 'section' | 'main' | 'article';
+    maxWidth?: MaxWidth;
+    padded?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const Container: import("svelte").Component<Props, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/atoms/Divider.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    type Orientation = 'horizontal' | 'vertical';
+
+    interface Props {
+        orientation?: Orientation;
+        label?: string;
+        inset?: boolean;
+        class?: string;
+        labelClass?: string;
+        /** Decorative: omit `role="separator"` so SR does not announce a split. */
+        decorative?: boolean;
+    }
+
+    let {
+        orientation = 'horizontal',
+        label,
+        inset = false,
+        class: className = '',
+        labelClass = '',
+        decorative = true,
+    }: Props = $props();
+
+    const isVertical = $derived(orientation === 'vertical');
+
+    const lineClasses = $derived(
+        [
+            'bg-border',
+            isVertical ? 'h-full w-px flex-1' : 'h-px w-full flex-1',
+            inset ? (isVertical ? 'my-2' : 'mx-2') : undefined,
+        ]
+            .filter(Boolean)
+            .join(' '),
+    );
+</script>
+
+<div
+    class={[
+        'flex items-center text-description',
+        isVertical ? 'h-full min-h-[1rem] flex-col' : 'w-full flex-row',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ')}
+>
+    <div
+        aria-hidden={decorative ? 'true' : undefined}
+        role={decorative ? 'presentation' : 'separator'}
+        aria-orientation={decorative ? undefined : orientation}
+        class={lineClasses}
+    ></div>
+
+    {#if label}
+        <span
+            class={['shrink-0 px-3 text-xs font-medium text-description', labelClass]
+                .filter(Boolean)
+                .join(' ')}
+        >
+            {label}
+        </span>
+
+        <div
+            aria-hidden={decorative ? 'true' : undefined}
+            role={decorative ? 'presentation' : 'separator'}
+            aria-orientation={decorative ? undefined : orientation}
+            class={lineClasses}
+        ></div>
+    {/if}
+</div>

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

@@ -0,0 +1,13 @@
+type Orientation = 'horizontal' | 'vertical';
+interface Props {
+    orientation?: Orientation;
+    label?: string;
+    inset?: boolean;
+    class?: string;
+    labelClass?: string;
+    /** Decorative: omit `role="separator"` so SR does not announce a split. */
+    decorative?: boolean;
+}
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/atoms/FeatureCard.svelte

@@ -1,64 +1,49 @@
 <script lang="ts">
-    import { onMount } from "svelte";
+    import type { Component, Snippet } from "svelte";
 
     interface Props {
-        icon?: string;
         title: string;
-        description: string;
-        className?: string;
+        description?: string;
+        icon?: Component<{ size?: number; class?: string }>;
+        children?: Snippet;
+        class?: string;
     }
 
     let {
-        icon = "✨",
         title,
         description,
-        className = "",
-        ...restProps
+        icon: Icon,
+        children,
+        class: className = "",
     }: Props = $props();
-
-    let mounted = $state(false);
-
-    onMount(() => {
-        mounted = true;
-    });
 </script>
 
-{#if mounted}
-    <div
-        class="p-6 rounded-lg bg-base-50 border border-border hover:border-primary/20 hover:shadow-sm transition-colors duration-200 {className}"
-        {...restProps}
-    >
-        <div class="flex items-start gap-4">
-            <div class="shrink-0 text-2xl" aria-hidden="true">
-                {icon}
-            </div>
-            <div class="flex-1 min-w-0">
-                <h3 class="text-lg font-semibold text-headline mb-2">
-                    {title}
-                </h3>
-                <p class="text-description leading-relaxed">
-                    {description}
-                </p>
-            </div>
-        </div>
+<article
+    class="flex flex-col gap-3 p-6 rounded-2xl bg-surface-1 border border-base-200 transition-colors duration-200 hover:border-base-300 {className}"
+>
+    {#if Icon}
+        <span
+            class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-brand-50 text-brand-600"
+            aria-hidden="true"
+        >
+            <Icon size={20} />
+        </span>
+    {/if}
+
+    <div class="flex flex-col gap-1.5">
+        <h3 class="text-base font-semibold leading-snug text-headline">
+            {title}
+        </h3>
+        {#if description}
+            <p class="text-sm leading-relaxed text-description">
+                {description}
+            </p>
+        {/if}
     </div>
-{:else}
-    <div
-        class="p-6 rounded-lg bg-base-100 border border-base-300 hover:border-base-400 hover:shadow-sm transition-colors duration-200 {className}"
-        {...restProps}
-    >
-        <div class="flex items-start gap-4">
-            <div class="shrink-0 text-2xl" aria-hidden="true">
-                {icon}
-            </div>
-            <div class="flex-1 min-w-0">
-                <h3 class="text-lg font-semibold text-headline mb-2">
-                    {title}
-                </h3>
-                <p class="text-description leading-relaxed">
-                    {description}
-                </p>
-            </div>
+
+    {#if children}
+        <div class="mt-2">
+            {@render children()}
         </div>
-    </div>
-{/if}
+    {/if}
+</article>

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

@@ -1,9 +1,14 @@
+import type { Component, Snippet } from "svelte";
 interface Props {
-    icon?: string;
     title: string;
-    description: string;
-    className?: string;
+    description?: string;
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    children?: Snippet;
+    class?: string;
 }
-declare const FeatureCard: import("svelte").Component<Props, {}, "">;
+declare const FeatureCard: Component<Props, {}, "">;
 type FeatureCard = ReturnType<typeof FeatureCard>;
 export default FeatureCard;

package/dist/atoms/IconButton.svelte

@@ -1,21 +1,17 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    import type { ButtonVariant, SizeVariant } from "../../types/variants.js";
+    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. */
+        loading?: boolean;
         type?: "button" | "submit" | "reset";
-        /** Accessible label for icon-only buttons. */
+        /** Required for icon-only usage (no visible text). */
         label?: string;
-        /** Click handler for native click events. */
+        class?: string;
         onclick?: (event: MouseEvent) => void;
-        /** Icon content. */
         children?: Snippet;
     }
 
@@ -23,66 +19,79 @@
         variant = "primary",
         size = "md",
         disabled = false,
+        loading = false,
         type = "button",
         label = "",
+        class: className = "",
         onclick,
         children,
         ...restProps
     }: Props = $props();
 
-    const sizeClass = $derived(() => {
+    const isDisabled = $derived(disabled || loading);
+
+    const sizeClass = $derived.by(() => {
         if (size === "sm") {
             return {
                 padding: "p-2",
                 radius: "rounded-md",
+                spinner: "size-4",
             };
         } else if (size === "lg") {
             return {
                 padding: "p-3",
                 radius: "rounded-xl",
+                spinner: "size-6",
             };
         } else {
             return {
                 padding: "p-2.5",
                 radius: "rounded-lg",
+                spinner: "size-5",
             };
         }
     });
 
-    const variantClass = $derived(() => {
+    const variantClass = $derived.by(() => {
         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"
+            ? "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active active:scale-[0.98]"
             : 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"
+              ? "bg-action-secondary text-headline hover:bg-action-secondary-hover active:bg-action-secondary-active active:scale-[0.98]"
               : 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"
+                ? "bg-action-danger text-inverse hover:bg-action-danger-hover active:bg-action-danger-active active:scale-[0.98] focus-ring--danger"
                 : 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"
+                  ? "bg-transparent text-headline hover:bg-base-100 active:bg-base-200 active:scale-[0.98] focus-ring--muted 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"
+                    ? "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 active:scale-[0.98] 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";
+                      ? "text-brand-700 active:text-brand-700 hover:underline disabled:text-disabled disabled:no-underline"
+                      : "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active active:scale-[0.98]";
     });
 
-    const buttonClasses = $derived(() => {
-        const sizeStyles = sizeClass();
+    const buttonClasses = $derived.by(() => {
+        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";
+            "inline-flex focus-ring items-center justify-center transition-all duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100";
 
-        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.radius} ${variantClass()}`.trim();
+        return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.radius} ${variantClass} ${className}`.trim();
     });
 </script>
 
 <button
     {type}
-    class={buttonClasses()}
-    {disabled}
+    class={buttonClasses}
+    disabled={isDisabled}
+    aria-busy={loading ? "true" : undefined}
     {onclick}
     aria-label={label || undefined}
     {...restProps}
 >
-    {#if children}
+    {#if loading}
+        <span
+            class="inline-block {sizeClass.spinner} shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-80"
+            aria-hidden="true"
+        ></span>
+    {:else if children}
         {@render children()}
     {/if}
 </button>

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

@@ -1,19 +1,15 @@
 import type { Snippet } from "svelte";
-import type { ButtonVariant, SizeVariant } from "../../types/variants.js";
+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. */
+    loading?: boolean;
     type?: "button" | "submit" | "reset";
-    /** Accessible label for icon-only buttons. */
+    /** Required for icon-only usage (no visible text). */
     label?: string;
-    /** Click handler for native click events. */
+    class?: string;
     onclick?: (event: MouseEvent) => void;
-    /** Icon content. */
     children?: Snippet;
 }
 declare const IconButton: import("svelte").Component<Props, {}, "">;