negodesign 0.0.71 → 0.0.72

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

@@ -1,61 +1,92 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from 'bits-ui';
-	import { cn } from '../../../utils.js';
-	import { receive, send, useUnderlineTabsTrigger } from './underline-tabs.svelte.js';
-	import { box } from 'svelte-toolbelt';
+	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
-	}: TabsPrimitive.TriggerProps = $props();
-
-	const state = useUnderlineTabsTrigger({
-		value: box.with(() => value),
-		onmouseenter: box.with(() => onmouseenter),
-		onmouseleave: box.with(() => onmouseleave),
-		onfocus: box.with(() => onfocus),
-		onblur: box.with(() => onblur)
-	});
+	}: {
+		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">
-	<TabsPrimitive.Trigger
-		bind:ref
+	<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",
-			state.rootState.isHovered &&
-				state.rootState.hoveredTab === value &&
-				'data-[state=inactive]:text-foreground!',
 			className
 		)}
-		{...state.props}
+		onclick={handleClick}
+		onmouseenter={handleMouseEnter}
+		onmouseleave={handleMouseLeave}
+		onfocus={handleFocus}
+		onblur={handleBlur}
 		{...restProps}
 	>
 		{@render children?.()}
-	</TabsPrimitive.Trigger>
-	{#if state.rootState.hoveredTab === value}
+	</button>
+	{#if isHovered}
 		<div
-			class={cn(
-				'bg-accent absolute top-0 z-1 h-[calc(100%-3px)] w-full rounded-md opacity-0 transition-opacity duration-300 peer-focus-visible:opacity-100',
-				state.rootState.isHovered && 'opacity-100'
-			)}
-			in:receive={{ key: `${state.rootState.opts.id.current}-tab-hover`, duration: 300 }}
-			out:send={{ key: `${state.rootState.opts.id.current}-tab-hover`, duration: 300 }}
+			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 state.rootState.opts.value.current === value}
-		<div
-			class="bg-primary absolute -bottom-px z-1 h-0.5 w-full"
-			in:receive={{ key: `${state.rootState.opts.id.current}-tab-active-border`, duration: 200 }}
-			out:send={{ key: `${state.rootState.opts.id.current}-tab-active-border`, duration: 200 }}
-		></div>
+	{#if isActive}
+		<div class="bg-primary absolute -bottom-px z-1 h-0.5 w-full" aria-hidden="true"></div>
 	{/if}
-</div>
+</div>

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

@@ -1,4 +1,16 @@
-import { Tabs as TabsPrimitive } from 'bits-ui';
-declare const UnderlineTabsTrigger: import("svelte").Component<TabsPrimitive.TriggerProps, {}, "ref">;
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    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;
+};
+declare const UnderlineTabsTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type UnderlineTabsTrigger = ReturnType<typeof UnderlineTabsTrigger>;
 export default UnderlineTabsTrigger;

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

@@ -1,33 +1,62 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from 'bits-ui';
-	import { cn } from '../../../utils.js';
-	import { useUnderlineTabs } from './underline-tabs.svelte.js';
-	import { box } from 'svelte-toolbelt';
-
-	const uid = $props.id();
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+	import { useUnderlineTabs } from "./underline-tabs.svelte.js";
 
 	let {
 		ref = $bindable(null),
-		value = $bindable(''),
-		id = uid,
+		defaultValue = "",
+		value = $bindable(defaultValue),
+		onValueChange,
+		orientation = "horizontal",
+		id = "",
 		class: className,
+		children,
 		...restProps
-	}: Omit<TabsPrimitive.RootProps, 'orientation' | 'id'> & { id?: string } = $props();
+	}: {
+		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({
-		value: box.with(
-			() => value,
-			(v) => (value = v)
-		),
-		id: box.with(() => id)
+		get value() {
+			return value;
+		},
+		get hovered() {
+			return hovered;
+		},
+		get orientation() {
+			return orientation;
+		},
+		select,
+		setHovered
 	});
 </script>
 
-<TabsPrimitive.Root
-	bind:ref
-	bind:value
-	orientation="horizontal"
+<div
+	bind:this={ref}
 	data-slot="underline-tabs"
-	class={cn('flex flex-col gap-2', className)}
+	data-orientation={orientation}
+	class={cn("flex flex-col gap-2", className)}
 	{...restProps}
-/>
+>
+	{@render children?.()}
+</div>

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

@@ -1,6 +1,14 @@
-import { Tabs as TabsPrimitive } from 'bits-ui';
-type $$ComponentProps = Omit<TabsPrimitive.RootProps, 'orientation' | 'id'> & {
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    ref?: HTMLDivElement | null;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
     id?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
 };
 declare const UnderlineTabs: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
 type UnderlineTabs = ReturnType<typeof UnderlineTabs>;

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

@@ -1,61 +1,8 @@
-import { Context } from 'runed';
-import { crossfade } from 'svelte/transition';
-export const [send, receive] = crossfade({
-    duration: (d) => Math.sqrt(d * 200)
-});
-class UnderlineTabsRootState {
-    opts;
-    hoveredTab = $state(null);
-    isHovered = $state(false);
-    constructor(opts) {
-        this.opts = opts;
-        this.hoveredTab = this.opts.value.current;
-    }
+import { getContext, setContext } from "svelte";
+const UNDERLINE_TABS_CONTEXT_KEY = "scn-underline-tabs";
+export function useUnderlineTabs(ctx) {
+    return setContext(UNDERLINE_TABS_CONTEXT_KEY, ctx);
 }
-class UnderlineTabsTriggerState {
-    opts;
-    rootState;
-    constructor(opts, rootState) {
-        this.opts = opts;
-        this.rootState = rootState;
-    }
-    handleFocus() {
-        this.rootState.isHovered = true;
-        this.rootState.hoveredTab = this.opts.value.current;
-    }
-    handleBlur() {
-        if (this.rootState.hoveredTab === this.opts.value.current) {
-            this.rootState.isHovered = false;
-        }
-    }
-    onmouseenter(e) {
-        this.handleFocus();
-        this.opts.onmouseenter.current?.(e);
-    }
-    onmouseleave(e) {
-        this.handleBlur();
-        this.opts.onmouseleave.current?.(e);
-    }
-    onfocus(e) {
-        this.handleFocus();
-        this.opts.onfocus.current?.(e);
-    }
-    onblur(e) {
-        this.handleBlur();
-        this.opts.onblur.current?.(e);
-    }
-    props = $derived.by(() => ({
-        value: this.opts.value.current,
-        onmouseenter: this.onmouseenter.bind(this),
-        onmouseleave: this.onmouseleave.bind(this),
-        onfocus: this.onfocus.bind(this),
-        onblur: this.onblur.bind(this)
-    }));
-}
-const ctx = new Context('underline-tabs-root-ctx');
-export function useUnderlineTabs(opts) {
-    return ctx.set(new UnderlineTabsRootState(opts));
-}
-export function useUnderlineTabsTrigger(opts) {
-    return new UnderlineTabsTriggerState(opts, ctx.get());
+export function useUnderlineTabsTrigger() {
+    return getContext(UNDERLINE_TABS_CONTEXT_KEY);
 }

package/dist/docs/ApiTable.svelte

@@ -0,0 +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>

package/dist/docs/ApiTable.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DocProp } from "./components";
+type $$ComponentProps = {
+    props: DocProp[];
+};
+declare const ApiTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type ApiTable = ReturnType<typeof ApiTable>;
+export default ApiTable;

package/dist/docs/CodeBlock.svelte

@@ -0,0 +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>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    code: string;
+    title?: string;
+};
+declare const CodeBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/docs/DocsHeader.svelte

@@ -0,0 +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>

package/dist/docs/DocsHeader.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    title?: string;
+};
+declare const DocsHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsHeader = ReturnType<typeof DocsHeader>;
+export default DocsHeader;

package/dist/docs/DocsSidebar.svelte

@@ -0,0 +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>
+</Sidebar>

package/dist/docs/DocsSidebar.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const DocsSidebar: import("svelte").Component<Record<string, never>, {}, "">;
+type DocsSidebar = ReturnType<typeof DocsSidebar>;
+export default DocsSidebar;

package/dist/docs/components.d.ts

@@ -0,0 +1,27 @@
+export interface DocProp {
+    name: string;
+    type: string;
+    description: string;
+    default?: string;
+    required?: boolean;
+}
+export interface DocExample {
+    title: string;
+    description?: string;
+    code: string;
+    href?: string;
+}
+export interface DocComponent {
+    slug: string;
+    name: string;
+    category: string;
+    description: string;
+    path: string;
+    importPath: string;
+    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 components: DocComponent[];
+export declare function getComponent(slug: string): DocComponent | undefined;
+export declare function getComponentsByCategory(category: string): DocComponent[];