zabi-components 4.0.0 → 5.0.1

package/dist/organisms/Navbar.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    brand?: string;
+    showThemeToggle?: boolean;
+    className?: string;
+    onclick?: (event: Event) => void;
+}
+type $$ComponentProps = Props & {
+    children?: any;
+    nav?: any;
+    actions?: any;
+};
+declare const Navbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/organisms/Navigation.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    interface Props {
+        variant?: "header" | "sidebar";
+        items?: Array<{
+            label: string;
+            href: string;
+        }>;
+        currentPath?: string;
+        onclick?: (event: Event) => void;
+    }
+
+    let {
+        variant = "header",
+        items = [],
+        currentPath = "",
+        children,
+        ...restProps
+    }: Props & { children?: any } = $props();
+
+    function handleClick(item: any, event: MouseEvent) {
+        event.preventDefault();
+        // Navigation is now handled by the parent component
+        // through event forwarding
+    }
+</script>
+
+<nav class="navigation navigation-{variant}" {...restProps}>
+    <ul
+        class="flex {variant === 'sidebar'
+            ? 'flex-col space-y-2'
+            : 'space-x-6'}"
+    >
+        {#each items as item}
+            <li>
+                <a
+                    href={item.href}
+                    class="px-3 py-2 text-sm font-medium rounded-md transition-colors {currentPath ===
+                    item.href
+                        ? 'bg-blue-100 text-body'
+                        : 'text-description hover:text-body hover:bg-gray-100'}"
+                    onclick={(e) => handleClick(item, e)}
+                >
+                    {item.label}
+                </a>
+            </li>
+        {/each}
+    </ul>
+</nav>

package/dist/organisms/Navigation.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    variant?: "header" | "sidebar";
+    items?: Array<{
+        label: string;
+        href: string;
+    }>;
+    currentPath?: string;
+    onclick?: (event: Event) => void;
+}
+type $$ComponentProps = Props & {
+    children?: any;
+};
+declare const Navigation: import("svelte").Component<$$ComponentProps, {}, "">;
+type Navigation = ReturnType<typeof Navigation>;
+export default Navigation;

package/dist/organisms/index.d.ts

@@ -1,4 +0,0 @@
-// Organism Components - Complex components with state management
-export { default as Navbar } from './Navbar.svelte';
-export { default as ToastContainer } from './NotificationManager.svelte';
-export { default as ToastManager } from './ToastManager.svelte';

package/dist/organisms/index.js

@@ -1,104 +1,2 @@
-import { D as G, p as d, f as m, a as M, h as e, q as u, i as w, e as Z, t as N, b, y as r, s as $, g as o, r as A, w as y, C as E, F as aa, G as ea, z as q, B as ta } from "../props-BKbHJRuR.js";
-import { T as F } from "../ThemeToggle-Z2Ndc0if.js";
-function sa(v, a) {
-  $(a, !o(a));
-}
-function ia() {
-}
-var ra = m('<div class="mt-2"><!></div>'), va = m('<div class="md:hidden"><div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-gray-200"><!> <div class="pt-4"><!> <!></div></div></div>'), la = m('<nav><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex justify-between items-center h-16"><div class="flex-shrink-0"><button type="button" class="text-xl font-bold text-gray-900"> </button></div> <div class="hidden md:block"><div class="ml-10 flex items-baseline space-x-4"><!></div></div> <div class="hidden md:block"><div class="ml-4 flex items-center space-x-4"><!> <!></div></div> <div class="md:hidden"><button type="button" class="text-gray-500 hover:text-gray-600" aria-label="Toggle menu"><span class="text-2xl">☰</span></button></div></div> <!></div></nav>');
-function ba(v, a) {
-  let l = d(a, "brand", 3, ""), x = d(a, "showThemeToggle", 3, !0), p = d(a, "className", 3, ""), k = A(a, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "brand",
-    "showThemeToggle",
-    "className",
-    "children",
-    "nav",
-    "actions"
-  ]), g = Z(!1);
-  var s = la();
-  M(s, () => ({
-    class: `bg-white border-b border-gray-200 sticky top-0 z-50 ${// Brand click is now handled by the parent component
-    // through event forwarding
-    p() ?? ""}`,
-    ...k
-  }));
-  var h = e(s), c = e(h), t = e(c), _ = e(t);
-  _.__click = [ia];
-  var n = e(_), f = r(t, 2), H = e(f), I = e(H);
-  u(I, () => a.nav ?? y);
-  var P = r(f, 2), J = e(P), C = e(J);
-  u(C, () => a.actions ?? y);
-  var K = r(C, 2);
-  {
-    var L = (i) => {
-      F(i, {});
-    };
-    w(K, (i) => {
-      x() && i(L);
-    });
-  }
-  var O = r(P, 2), Q = e(O);
-  Q.__click = [sa, g];
-  var R = r(c, 2);
-  {
-    var S = (i) => {
-      var z = va(), U = e(z), B = e(U);
-      u(B, () => a.nav ?? y);
-      var V = r(B, 2), D = e(V);
-      u(D, () => a.actions ?? y);
-      var W = r(D, 2);
-      {
-        var X = (T) => {
-          var j = ra(), Y = e(j);
-          F(Y, {}), b(T, j);
-        };
-        w(W, (T) => {
-          x() && T(X);
-        });
-      }
-      b(i, z);
-    };
-    w(R, (i) => {
-      o(g) && i(S);
-    });
-  }
-  N(() => E(n, l())), b(v, s);
-}
-G(["click"]);
-var na = (v, a, l) => a(o(l), v), da = m("<li><a> </a></li>"), oa = m("<nav><ul></ul></nav>");
-function ma(v, a) {
-  let l = d(a, "variant", 3, "header"), x = d(a, "items", 19, () => []), p = d(a, "currentPath", 3, ""), k = A(a, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "variant",
-    "items",
-    "currentPath",
-    "children"
-  ]);
-  function g(c, t) {
-    t.preventDefault();
-  }
-  var s = oa();
-  M(s, () => ({
-    class: `navigation navigation-${l() ?? ""}`,
-    ...k
-  }));
-  var h = e(s);
-  aa(h, 21, x, ea, (c, t) => {
-    var _ = da(), n = e(_);
-    n.__click = [na, g, t];
-    var f = e(n);
-    N(() => {
-      ta(n, "href", o(t).href), q(n, 1, `px-3 py-2 text-sm font-medium rounded-md transition-colors ${p() === o(t).href ? "bg-blue-100 text-blue-700" : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"}`), E(f, o(t).label);
-    }), b(c, _);
-  }), N(() => q(h, 1, `flex ${l() === "sidebar" ? "flex-col space-y-2" : "space-x-6"}`)), b(v, s);
-}
-G(["click"]);
-export {
-  ba as Navbar,
-  ma as Navigation
-};
+"use strict";
+// Export organism components - Temporarily disabled to avoid SSR issues

package/dist/routes/lib/ssr-safe.ts

@@ -0,0 +1,57 @@
+// SSR-safe utilities for zabi-components
+// This ensures components work properly during server-side rendering
+
+// Check if we're in a browser environment
+export function isBrowser(): boolean {
+    return typeof window !== 'undefined';
+}
+
+export function safeWindow(): Window | undefined {
+    return isBrowser() ? window : undefined;
+}
+
+export function safeDocument(): Document | undefined {
+    return isBrowser() ? document : undefined;
+}
+
+export function safeLocalStorage(): Storage | undefined {
+    return isBrowser() ? localStorage : undefined;
+}
+
+export function safeSessionStorage(): Storage | undefined {
+    return isBrowser() ? sessionStorage : undefined;
+}
+
+export function safeRequestAnimationFrame(callback: FrameRequestCallback): number | undefined {
+    return isBrowser() ? requestAnimationFrame(callback) : undefined;
+}
+
+export function safeSetTimeout(callback: () => void, delay: number): NodeJS.Timeout | undefined {
+    return isBrowser() ? setTimeout(callback, delay) : undefined;
+}
+
+export function safeClearTimeout(id: NodeJS.Timeout | undefined): void {
+    if (isBrowser() && id) {
+        clearTimeout(id);
+    }
+}
+
+export function safeSetInterval(callback: () => void, delay: number): NodeJS.Timeout | undefined {
+    return isBrowser() ? setInterval(callback, delay) : undefined;
+}
+
+export function safeClearInterval(id: NodeJS.Timeout | undefined): void {
+    if (isBrowser() && id) {
+        clearInterval(id);
+    }
+}
+
+// Generate SSR-safe unique IDs
+let idCounter = 0;
+export function generateId(prefix: string = 'id'): string {
+    if (isBrowser()) {
+        return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+    } else {
+        return `${prefix}-ssr-${++idCounter}`;
+    }
+}

package/dist/routes/lib/variant-utils.ts

@@ -0,0 +1,98 @@
+/**
+ * Utility functions for handling component variants with semantic colors
+ */
+
+export type Variant = 'default' | 'success' | 'warning' | 'error' | 'info';
+
+/**
+ * Get variant classes for input components (Input, Textarea)
+ */
+export function getInputVariantClasses(variant: Variant): string {
+    const variantMap: Record<Variant, string> = {
+        default: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500',
+        success: 'border-green-300 focus:border-green-500 focus:ring-green-500',
+        warning: 'border-yellow-300 focus:border-yellow-500 focus:ring-yellow-500',
+        error: 'border-red-300 focus:border-red-500 focus:ring-red-500',
+        info: 'border-blue-300 focus:border-blue-500 focus:ring-blue-500',
+    };
+
+    return variantMap[variant] || variantMap.default;
+}
+
+/**
+ * Get variant classes for card components
+ */
+export function getCardVariantClasses(variant: Variant): string {
+    const variantMap: Record<Variant, string> = {
+        default: 'border-gray-200 bg-white',
+        success: 'border-green-200 bg-green-50',
+        warning: 'border-yellow-200 bg-yellow-50',
+        error: 'border-red-200 bg-red-50',
+        info: 'border-blue-200 bg-blue-50',
+    };
+
+    return variantMap[variant] || variantMap.default;
+}
+
+/**
+ * Get generic variant classes for any component
+ */
+export function getVariantClasses(variant: Variant, type: 'border' | 'text' | 'bg'): string {
+    const variantMap: Record<Variant, Record<'border' | 'text' | 'bg', string>> = {
+        default: {
+            border: 'border-gray-300',
+            text: 'text-gray-900',
+            bg: 'bg-white'
+        },
+        success: {
+            border: 'border-green-300',
+            text: 'text-green-900',
+            bg: 'bg-green-50'
+        },
+        warning: {
+            border: 'border-yellow-300',
+            text: 'text-yellow-900',
+            bg: 'bg-yellow-50'
+        },
+        error: {
+            border: 'border-red-300',
+            text: 'text-red-900',
+            bg: 'bg-red-50'
+        },
+        info: {
+            border: 'border-blue-300',
+            text: 'text-blue-900',
+            bg: 'bg-blue-50'
+        },
+    };
+
+    return variantMap[variant]?.[type] || variantMap.default[type];
+}
+
+/**
+ * Get all variant classes for a component (border, text, background)
+ */
+export function getAllVariantClasses(variant: Variant): {
+    border: string;
+    text: string;
+    bg: string;
+} {
+    return {
+        border: getVariantClasses(variant, 'border'),
+        text: getVariantClasses(variant, 'text'),
+        bg: getVariantClasses(variant, 'bg'),
+    };
+}
+
+/**
+ * Create a variant class map for use in reactive statements
+ */
+export function createVariantClassMap<T extends string>(
+    variants: T[],
+    prefix: string
+): Record<T, string> {
+    return variants.reduce((acc, variant) => {
+        acc[variant] = `${prefix}-${variant}`;
+        return acc;
+    }, {} as Record<T, string>);
+}