feat(ui): expose app theme contract and public components

2026-07-19 20:23:20 +05:30
parent c5326f7622
commit a3e21163c1
102 changed files with 12748 additions and 600 deletions
@@ -1,11 +1,105 @@
 component Breadcrumbs {
-  props {
-    class = ""
-    homeLabel = "Home"
-    homeHref = "/"
-    current = "Current page"
-  }
-  view {
-    <nav class="{class}" aria-label="Breadcrumb"><ol class="flex flex-wrap items-center gap-2 text-sm"><li><a href="{homeHref}" class="text-slate-500 hover:text-violet-600">{homeLabel}</a></li><li aria-hidden="true" class="text-slate-400">/</li><li aria-current="page" class="font-medium text-slate-900 dark:text-white">{current}</li></ol></nav>
-  }
+    props {
+        class: string = ""
+        items = []
+        centered = false
+        compact = false
+        showHome = true
+        homeLabel = "Home"
+        homeHref = "/"
+    }
+
+    view {
+        <nav
+            aria-label="Breadcrumb"
+            class="w-full {class}"
+            class:hidden="items.length === 0 && !showHome"
+        >
+            <ol
+                class="flex flex-wrap items-center text-slate-500 dark:text-slate-400"
+                class:justify-center="centered"
+                class:gap-1.5="compact"
+                class:text-xs="compact"
+                class:gap-2="!compact"
+                class:text-sm="!compact"
+            >
+                <!-- Home -->
+                <li
+                    class:hidden="!showHome"
+                    class:inline-flex="showHome"
+                >
+                    <a
+                        href="{homeHref}"
+                        class="group inline-flex items-center gap-1.5 rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300"
+                    >
+                        <span class="icon-[lucide--home] h-3.5 w-3.5" aria-hidden="true" ></span>
+
+                        <span class:hidden="compact">
+                            {homeLabel}
+                        </span>
+
+                        <span
+                            class="sr-only"
+                            class:hidden="!compact"
+                        >
+                            {homeLabel}
+                        </span>
+                    </a>
+                </li>
+
+                <!-- Separator after home -->
+                <li
+                    aria-hidden="true"
+                    class="text-slate-300 dark:text-slate-700"
+                    class:hidden="!showHome || items.length === 0"
+                    class:inline-flex="showHome && items.length > 0"
+                >
+                    <span class="icon-[lucide--chevron-right] h-3.5 w-3.5" ></span>
+                </li>
+
+                <!-- Dynamic breadcrumb items -->
+                {#each items as item, index}
+                <li class="inline-flex min-w-0 items-center gap-2">
+                    <!-- Linked item -->
+                    <a
+                        href="{item.href}"
+                        class="max-w-48 truncate rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300 sm:max-w-64"
+                        class:hidden="item.current || item.href === ''"
+                        class:inline-flex="!item.current && item.href !== ''"
+                    >
+                        {item.label}
+                    </a>
+
+                    <!-- Current item -->
+                    <span
+                        aria-current="page"
+                        class="max-w-48 truncate font-semibold text-slate-950 dark:text-white sm:max-w-64"
+                        class:hidden="!item.current"
+                        class:inline-flex="item.current"
+                    >
+                        {item.label}
+                    </span>
+
+                    <!-- Plain unlinked item -->
+                    <span
+                        class="max-w-48 truncate text-slate-600 dark:text-slate-300 sm:max-w-64"
+                        class:hidden="item.current || item.href !== ''"
+                        class:inline-flex="!item.current && item.href === ''"
+                    >
+                        {item.label}
+                    </span>
+
+                    <!-- Separator -->
+                    <span
+                        aria-hidden="true"
+                        class="inline-flex text-slate-300 dark:text-slate-700"
+                        class:hidden="index === items.length - 1"
+                    >
+                        <span class="icon-[lucide--chevron-right] h-3.5 w-3.5" ></span>
+                    </span>
+                </li>
+                {/each}
+            </ol>
+        </nav>
+    }
 }