negodesign 0.0.73 → 0.0.75

package/dist/components/ui/underline-tabs/underline-tabs.svelte

@@ -1,62 +1,62 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import { cn } from "../../../utils.js";
-	import { useUnderlineTabs } from "./underline-tabs.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		defaultValue = "",
-		value = $bindable(defaultValue),
-		onValueChange,
-		orientation = "horizontal",
-		id = "",
-		class: className,
-		children,
-		...restProps
-	}: {
-		ref?: HTMLDivElement | null;
-		defaultValue?: string;
-		value?: string;
-		onValueChange?: (value: string) => void;
-		orientation?: "horizontal" | "vertical";
-		id?: string;
-		class?: string;
-		children?: Snippet;
-		[key: string]: unknown;
-	} = $props();
-
-	let hovered = $state<string | null>(null);
-
-	function select(next: string) {
-		value = next;
-		onValueChange?.(next);
-	}
-
-	function setHovered(next: string | null) {
-		hovered = next;
-	}
-
-	useUnderlineTabs({
-		get value() {
-			return value;
-		},
-		get hovered() {
-			return hovered;
-		},
-		get orientation() {
-			return orientation;
-		},
-		select,
-		setHovered
-	});
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="underline-tabs"
-	data-orientation={orientation}
-	class={cn("flex flex-col gap-2", className)}
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+	import { useUnderlineTabs } from "./underline-tabs.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		defaultValue = "",
+		value = $bindable(defaultValue),
+		onValueChange,
+		orientation = "horizontal",
+		id = "",
+		class: className,
+		children,
+		...restProps
+	}: {
+		ref?: HTMLDivElement | null;
+		defaultValue?: string;
+		value?: string;
+		onValueChange?: (value: string) => void;
+		orientation?: "horizontal" | "vertical";
+		id?: string;
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+
+	let hovered = $state<string | null>(null);
+
+	function select(next: string) {
+		value = next;
+		onValueChange?.(next);
+	}
+
+	function setHovered(next: string | null) {
+		hovered = next;
+	}
+
+	useUnderlineTabs({
+		get value() {
+			return value;
+		},
+		get hovered() {
+			return hovered;
+		},
+		get orientation() {
+			return orientation;
+		},
+		select,
+		setHovered
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="underline-tabs"
+	data-orientation={orientation}
+	class={cn("flex flex-col gap-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>

package/dist/docs/ApiTable.svelte

@@ -1,42 +1,42 @@
-<script lang="ts">
-  import type { DocProp } from "./components";
-  import { CheckmarkCircle01Icon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  let { props }: { props: DocProp[] } = $props();
-</script>
-
-<div class="overflow-x-auto">
-  <table class="min-w-full text-sm">
-    <thead>
-      <tr class="border-b border-border text-left">
-        <th class="px-3 py-2 font-semibold">Prop</th>
-        <th class="px-3 py-2 font-semibold">Type</th>
-        <th class="px-3 py-2 font-semibold">Default</th>
-        <th class="px-3 py-2 font-semibold">Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each props as prop (prop.name)}
-        <tr class="border-b border-border/60 align-top">
-          <td class="px-3 py-2 font-mono text-xs font-medium text-primary">
-            {prop.name}
-            {#if prop.required}
-              <HugeiconsIcon icon={CheckmarkCircle01Icon} class="inline size-3 text-destructive" />
-            {/if}
-          </td>
-          <td class="px-3 py-2 font-mono text-xs text-muted-foreground">{prop.type}</td>
-          <td class="px-3 py-2 font-mono text-xs text-muted-foreground">
-            {prop.default ?? "—"}
-          </td>
-          <td class="px-3 py-2 text-xs text-muted-foreground">
-            {prop.description}
-            {#if prop.required}
-              <span class="font-medium text-destructive"> (required)</span>
-            {/if}
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<script lang="ts">
+  import type { DocProp } from "./components";
+  import { CheckmarkCircle01Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let { props }: { props: DocProp[] } = $props();
+</script>
+
+<div class="overflow-x-auto">
+  <table class="min-w-full text-sm">
+    <thead>
+      <tr class="border-b border-border text-left">
+        <th class="px-3 py-2 font-semibold">Prop</th>
+        <th class="px-3 py-2 font-semibold">Type</th>
+        <th class="px-3 py-2 font-semibold">Default</th>
+        <th class="px-3 py-2 font-semibold">Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each props as prop (prop.name)}
+        <tr class="border-b border-border/60 align-top">
+          <td class="px-3 py-2 font-mono text-xs font-medium text-primary">
+            {prop.name}
+            {#if prop.required}
+              <HugeiconsIcon icon={CheckmarkCircle01Icon} class="inline size-3 text-destructive" />
+            {/if}
+          </td>
+          <td class="px-3 py-2 font-mono text-xs text-muted-foreground">{prop.type}</td>
+          <td class="px-3 py-2 font-mono text-xs text-muted-foreground">
+            {prop.default ?? "—"}
+          </td>
+          <td class="px-3 py-2 text-xs text-muted-foreground">
+            {prop.description}
+            {#if prop.required}
+              <span class="font-medium text-destructive"> (required)</span>
+            {/if}
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>

package/dist/docs/CodeBlock.svelte

@@ -1,26 +1,26 @@
-<script lang="ts">
-  import { Copy01Icon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import type { DocProp } from "./components";
-
-  let { code, title = "Example" }: { code: string; title?: string } = $props();
-
-  function copy() {
-    navigator.clipboard?.writeText(code);
-  }
-</script>
-
-<div class="overflow-hidden rounded-lg border border-border">
-  <div class="flex items-center justify-between border-b border-border bg-muted/60 px-4 py-2">
-    <span class="text-xs font-medium text-muted-foreground">{title}</span>
-    <button
-      type="button"
-      onclick={copy}
-      class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition hover:bg-muted hover:text-foreground"
-    >
-      <HugeiconsIcon icon={Copy01Icon} class="size-3.5" />
-      Copy
-    </button>
-  </div>
-  <pre class="overflow-x-auto p-4 text-xs leading-relaxed"><code>{code}</code></pre>
-</div>
+<script lang="ts">
+  import { Copy01Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type { DocProp } from "./components";
+
+  let { code, title = "Example" }: { code: string; title?: string } = $props();
+
+  function copy() {
+    navigator.clipboard?.writeText(code);
+  }
+</script>
+
+<div class="overflow-hidden rounded-lg border border-border">
+  <div class="flex items-center justify-between border-b border-border bg-muted/60 px-4 py-2">
+    <span class="text-xs font-medium text-muted-foreground">{title}</span>
+    <button
+      type="button"
+      onclick={copy}
+      class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition hover:bg-muted hover:text-foreground"
+    >
+      <HugeiconsIcon icon={Copy01Icon} class="size-3.5" />
+      Copy
+    </button>
+  </div>
+  <pre class="overflow-x-auto p-4 text-xs leading-relaxed"><code>{code}</code></pre>
+</div>

package/dist/docs/DocsHeader.svelte

@@ -1,25 +1,25 @@
-<script lang="ts">
-  import { SidebarTrigger, useSidebar } from "../components/ui/sidebar";
-  import { Separator } from "../components/ui/separator";
-  import { LanguageSwitcher } from "../components/ui/language-switcher";
-  import { LightSwitch } from "../components/ui/light-switch";
-
-  let { title = "Components" }: { title?: string } = $props();
-</script>
-
-<header class="sticky top-0 z-30 flex h-14 shrink-0 items-center gap-2 border-b border-border bg-background/95 px-4 backdrop-blur">
-  <SidebarTrigger class="-ms-1" />
-  <Separator orientation="vertical" class="mr-2 h-4" />
-  <nav class="hidden items-center gap-1 text-sm md:flex">
-    <a href="/docs" class="font-medium text-foreground">Docs</a>
-    <span class="text-muted-foreground">/</span>
-    <span class="font-medium text-foreground">{title}</span>
-  </nav>
-  <div class="ms-auto flex items-center gap-2">
-    <a href="/" class="rounded-md px-2 py-1 text-sm text-muted-foreground transition hover:bg-muted hover:text-foreground">
-      Demos
-    </a>
-    <LightSwitch />
-    <LanguageSwitcher />
-  </div>
-</header>
+<script lang="ts">
+  import { SidebarTrigger, useSidebar } from "../components/ui/sidebar";
+  import { Separator } from "../components/ui/separator";
+  import { LanguageSwitcher } from "../components/ui/language-switcher";
+  import { LightSwitch } from "../components/ui/light-switch";
+
+  let { title = "Components" }: { title?: string } = $props();
+</script>
+
+<header class="sticky top-0 z-30 flex h-14 shrink-0 items-center gap-2 border-b border-border bg-background/95 px-4 backdrop-blur">
+  <SidebarTrigger class="-ms-1" />
+  <Separator orientation="vertical" class="mr-2 h-4" />
+  <nav class="hidden items-center gap-1 text-sm md:flex">
+    <a href="/docs" class="font-medium text-foreground">Docs</a>
+    <span class="text-muted-foreground">/</span>
+    <span class="font-medium text-foreground">{title}</span>
+  </nav>
+  <div class="ms-auto flex items-center gap-2">
+    <a href="/" class="rounded-md px-2 py-1 text-sm text-muted-foreground transition hover:bg-muted hover:text-foreground">
+      Demos
+    </a>
+    <LightSwitch />
+    <LanguageSwitcher />
+  </div>
+</header>

package/dist/docs/DocsSidebar.svelte

@@ -1,99 +1,99 @@
-<script lang="ts">
-  import {
-    Sidebar,
-    SidebarContent,
-    SidebarFooter,
-    SidebarGroup,
-    SidebarGroupContent,
-    SidebarGroupLabel,
-    SidebarHeader,
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem,
-  } from "../components/ui/sidebar";
-  import { DocumentCodeIcon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { page } from "$app/state";
-  import { categories, components } from "./components";
-
-  function componentList(category: string) {
-    return components.filter((c) => c.category === category);
-  }
-
-  const path = $derived(page.url.pathname);
-</script>
-
-<Sidebar collapsible="icon">
-  <SidebarHeader>
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <a href="/docs" class="flex items-center gap-2 px-3 py-1">
-          <span class="flex size-7 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-            <HugeiconsIcon icon={DocumentCodeIcon} class="size-4" />
-          </span>
-          <span class="text-sm font-semibold">NegoDesign</span>
-        </a>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  </SidebarHeader>
-
-  <SidebarContent>
-    <SidebarGroup>
-      <SidebarGroupContent>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton isActive={path === "/docs"}>
-              {#snippet child({ props })}
-                <a href="/docs" {...props}><span>Getting Started</span></a>
-              {/snippet}
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-          <SidebarMenuItem>
-            <SidebarMenuButton isActive={path === "/docs/installation"}>
-              {#snippet child({ props })}
-                <a href="/docs/installation" {...props}><span>Installation</span></a>
-              {/snippet}
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-          <SidebarMenuItem>
-            <SidebarMenuButton isActive={path === "/docs/components"}>
-              {#snippet child({ props })}
-                <a href="/docs/components" {...props}><span>Components</span></a>
-              {/snippet}
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-
-    {#each categories as category (category)}
-      {@const list = componentList(category)}
-      {#if list.length > 0}
-        <SidebarGroup>
-          <SidebarGroupLabel class="uppercase tracking-wider text-muted-foreground/70">
-            {category}
-          </SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {#each list as comp (comp.slug)}
-                <SidebarMenuItem>
-                  <SidebarMenuButton isActive={path === `/docs/${comp.slug}`}>
-                    {#snippet child({ props })}
-                      <a href={`/docs/${comp.slug}`} {...props}><span>{comp.name}</span></a>
-                    {/snippet}
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              {/each}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      {/if}
-    {/each}
-  </SidebarContent>
-
-  <SidebarFooter>
-    <div class="border-t border-border px-4 py-3 text-xs text-muted-foreground">
-      Licensed under MIT
-    </div>
-  </SidebarFooter>
+<script lang="ts">
+  import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+  } from "../components/ui/sidebar";
+  import { DocumentCodeIcon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { page } from "$app/state";
+  import { categories, components } from "./components";
+
+  function componentList(category: string) {
+    return components.filter((c) => c.category === category);
+  }
+
+  const path = $derived(page.url.pathname);
+</script>
+
+<Sidebar collapsible="icon">
+  <SidebarHeader>
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <a href="/docs" class="flex items-center gap-2 px-3 py-1">
+          <span class="flex size-7 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+            <HugeiconsIcon icon={DocumentCodeIcon} class="size-4" />
+          </span>
+          <span class="text-sm font-semibold">NegoDesign</span>
+        </a>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarHeader>
+
+  <SidebarContent>
+    <SidebarGroup>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton isActive={path === "/docs"}>
+              {#snippet child({ props })}
+                <a href="/docs" {...props}><span>Getting Started</span></a>
+              {/snippet}
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <SidebarMenuButton isActive={path === "/docs/installation"}>
+              {#snippet child({ props })}
+                <a href="/docs/installation" {...props}><span>Installation</span></a>
+              {/snippet}
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <SidebarMenuButton isActive={path === "/docs/components"}>
+              {#snippet child({ props })}
+                <a href="/docs/components" {...props}><span>Components</span></a>
+              {/snippet}
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+
+    {#each categories as category (category)}
+      {@const list = componentList(category)}
+      {#if list.length > 0}
+        <SidebarGroup>
+          <SidebarGroupLabel class="uppercase tracking-wider text-muted-foreground/70">
+            {category}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {#each list as comp (comp.slug)}
+                <SidebarMenuItem>
+                  <SidebarMenuButton isActive={path === `/docs/${comp.slug}`}>
+                    {#snippet child({ props })}
+                      <a href={`/docs/${comp.slug}`} {...props}><span>{comp.name}</span></a>
+                    {/snippet}
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              {/each}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      {/if}
+    {/each}
+  </SidebarContent>
+
+  <SidebarFooter>
+    <div class="border-t border-border px-4 py-3 text-xs text-muted-foreground">
+      Licensed under MIT
+    </div>
+  </SidebarFooter>
 </Sidebar>

package/dist/docs/components.d.ts

@@ -21,7 +21,7 @@ export interface DocComponent {
     examples: DocExample[];
     props: DocProp[];
 }
-export declare const categories: readonly ["Navigation", "Hero", "Banners", "Cards", "Carousels", "Item Grid", "Footer", "Admin Panel", "Login / Security", "Full Pages"];
+export declare const categories: readonly ["Navigation", "Hero", "Sections", "Banners", "Cards", "Carousels", "Item Grid", "Tabs", "Form Inputs", "Forms", "Modals", "Empty States", "Footer", "Admin Panel", "Login / Security", "Full Pages"];
 export declare const components: DocComponent[];
 export declare function getComponent(slug: string): DocComponent | undefined;
 export declare function getComponentsByCategory(category: string): DocComponent[];