negodesign 0.0.77 → 0.0.79

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

@@ -1,34 +1,34 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import { cn } from "../../../utils.js";
-	import { useUnderlineTabsTrigger } from "./underline-tabs.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		value,
-		class: className,
-		children,
-		...restProps
-	}: {
-		ref?: HTMLDivElement | null;
-		value: string;
-		class?: string;
-		children?: Snippet;
-		[key: string]: unknown;
-	} = $props();
-
-	const state = useUnderlineTabsTrigger();
-</script>
-
-{#if state.value === value}
-	<div
-		bind:this={ref}
-		data-slot="underline-tabs-content"
-		role="tabpanel"
-		data-state="active"
-		class={cn("flex-1 outline-none", className)}
-		{...restProps}
-	>
-		{@render children?.()}
-	</div>
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+	import { useUnderlineTabsTrigger } from "./underline-tabs.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		value,
+		class: className,
+		children,
+		...restProps
+	}: {
+		ref?: HTMLDivElement | null;
+		value: string;
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+
+	const state = useUnderlineTabsTrigger();
+</script>
+
+{#if state.value === value}
+	<div
+		bind:this={ref}
+		data-slot="underline-tabs-content"
+		role="tabpanel"
+		data-state="active"
+		class={cn("flex-1 outline-none", className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
 {/if}

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

@@ -1,41 +1,41 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import { cn } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: {
-		ref?: HTMLDivElement | null;
-		class?: string;
-		children?: Snippet;
-		[key: string]: unknown;
-	} = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="underline-tabs-list"
-	role="tablist"
-	data-orientation="horizontal"
-	class={cn(
-		"text-muted-foreground border-border relative inline-flex h-9 w-full max-w-full items-center justify-start overflow-x-auto border-b",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
-
-<style>
-	:global([data-slot='underline-tabs-list']) {
-		-ms-overflow-style: none; /* IE and Edge */
-		scrollbar-width: none; /* Firefox */
-	}
-
-	:global([data-slot='underline-tabs-list']::-webkit-scrollbar) {
-		display: none;
-	}
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: {
+		ref?: HTMLDivElement | null;
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="underline-tabs-list"
+	role="tablist"
+	data-orientation="horizontal"
+	class={cn(
+		"text-muted-foreground border-border relative inline-flex h-9 w-full max-w-full items-center justify-start overflow-x-auto border-b",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
+
+<style>
+	:global([data-slot='underline-tabs-list']) {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+
+	:global([data-slot='underline-tabs-list']::-webkit-scrollbar) {
+		display: none;
+	}
 </style>

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

@@ -1,92 +1,92 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import { cn } from "../../../utils.js";
-	import { useUnderlineTabsTrigger } from "./underline-tabs.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		value,
-		class: className,
-		onclick,
-		onmouseenter,
-		onmouseleave,
-		onfocus,
-		onblur,
-		children,
-		...restProps
-	}: {
-		ref?: HTMLButtonElement | null;
-		value: string;
-		class?: string;
-		onclick?: (e: MouseEvent) => void;
-		onmouseenter?: (e: MouseEvent) => void;
-		onmouseleave?: (e: MouseEvent) => void;
-		onfocus?: (e: FocusEvent) => void;
-		onblur?: (e: FocusEvent) => void;
-		children?: Snippet;
-		[key: string]: unknown;
-	} = $props();
-
-	const state = useUnderlineTabsTrigger();
-
-	const isActive = $derived(state.value === value);
-	const isHovered = $derived(state.hovered === value);
-
-	function handleClick(e: MouseEvent) {
-		onclick?.(e);
-		state.select(value);
-	}
-
-	function handleMouseEnter(e: MouseEvent) {
-		onmouseenter?.(e);
-		state.setHovered(value);
-	}
-
-	function handleMouseLeave(e: MouseEvent) {
-		onmouseleave?.(e);
-		state.setHovered(null);
-	}
-
-	function handleFocus(e: FocusEvent) {
-		onfocus?.(e);
-		state.setHovered(value);
-	}
-
-	function handleBlur(e: FocusEvent) {
-		onblur?.(e);
-		state.setHovered(null);
-	}
-</script>
-
-<div class="relative h-full">
-	<button
-		bind:this={ref}
-		type="button"
-		role="tab"
-		data-slot="underline-tabs-trigger"
-		data-state={isActive ? "active" : "inactive"}
-		aria-selected={isActive}
-		tabindex={isActive ? 0 : -1}
-		class={cn(
-			"dark:data-[state=active]:text-foreground data-[state=active]:text-foreground text-muted-foreground relative z-2 inline-flex h-[calc(100%-3px)] flex-1 items-center justify-center gap-1.5 px-3 py-1 text-sm font-medium whitespace-nowrap transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-			className
-		)}
-		onclick={handleClick}
-		onmouseenter={handleMouseEnter}
-		onmouseleave={handleMouseLeave}
-		onfocus={handleFocus}
-		onblur={handleBlur}
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
-	{#if isHovered}
-		<div
-			class="bg-accent absolute top-0 z-1 h-[calc(100%-3px)] w-full rounded-md opacity-100 transition-opacity duration-300"
-			aria-hidden="true"
-		></div>
-	{/if}
-	{#if isActive}
-		<div class="bg-primary absolute -bottom-px z-1 h-0.5 w-full" aria-hidden="true"></div>
-	{/if}
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+	import { useUnderlineTabsTrigger } from "./underline-tabs.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		value,
+		class: className,
+		onclick,
+		onmouseenter,
+		onmouseleave,
+		onfocus,
+		onblur,
+		children,
+		...restProps
+	}: {
+		ref?: HTMLButtonElement | null;
+		value: string;
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		onmouseenter?: (e: MouseEvent) => void;
+		onmouseleave?: (e: MouseEvent) => void;
+		onfocus?: (e: FocusEvent) => void;
+		onblur?: (e: FocusEvent) => void;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+
+	const state = useUnderlineTabsTrigger();
+
+	const isActive = $derived(state.value === value);
+	const isHovered = $derived(state.hovered === value);
+
+	function handleClick(e: MouseEvent) {
+		onclick?.(e);
+		state.select(value);
+	}
+
+	function handleMouseEnter(e: MouseEvent) {
+		onmouseenter?.(e);
+		state.setHovered(value);
+	}
+
+	function handleMouseLeave(e: MouseEvent) {
+		onmouseleave?.(e);
+		state.setHovered(null);
+	}
+
+	function handleFocus(e: FocusEvent) {
+		onfocus?.(e);
+		state.setHovered(value);
+	}
+
+	function handleBlur(e: FocusEvent) {
+		onblur?.(e);
+		state.setHovered(null);
+	}
+</script>
+
+<div class="relative h-full">
+	<button
+		bind:this={ref}
+		type="button"
+		role="tab"
+		data-slot="underline-tabs-trigger"
+		data-state={isActive ? "active" : "inactive"}
+		aria-selected={isActive}
+		tabindex={isActive ? 0 : -1}
+		class={cn(
+			"dark:data-[state=active]:text-foreground data-[state=active]:text-foreground text-muted-foreground relative z-2 inline-flex h-[calc(100%-3px)] flex-1 items-center justify-center gap-1.5 px-3 py-1 text-sm font-medium whitespace-nowrap transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+			className
+		)}
+		onclick={handleClick}
+		onmouseenter={handleMouseEnter}
+		onmouseleave={handleMouseLeave}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+	{#if isHovered}
+		<div
+			class="bg-accent absolute top-0 z-1 h-[calc(100%-3px)] w-full rounded-md opacity-100 transition-opacity duration-300"
+			aria-hidden="true"
+		></div>
+	{/if}
+	{#if isActive}
+		<div class="bg-primary absolute -bottom-px z-1 h-0.5 w-full" aria-hidden="true"></div>
+	{/if}
 </div>

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>