negodesign 0.0.74 → 0.0.76

package/dist/components/ui/section/Section02.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Section02Props } from "./types";
+declare const Section02: import("svelte").Component<Section02Props, {}, "">;
+type Section02 = ReturnType<typeof Section02>;
+export default Section02;

package/dist/components/ui/section/Section03.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type { Section03Props } from "./types";
+
+  let {
+    title,
+    description,
+    items = [],
+    titleClass,
+    descriptionClass,
+    className,
+  }: Section03Props = $props();
+</script>
+
+<section class={className}>
+  <div class="px-6 py-12 md:px-12 md:py-20">
+    <div
+      class="flex flex-col md:flex-row md:items-start md:justify-between gap-8 mb-16"
+    >
+      <h2
+        class="text-3xl md:text-5xl lg:text-6xl font-bold leading-tight md:max-w-3xl {titleClass}"
+      >
+        {title}
+      </h2>
+      {#if description}
+        <p
+          class="text-sm md:text-base text-gray-600 md:max-w-sm {descriptionClass}"
+        >
+          {description}
+        </p>
+      {/if}
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+      {#each items as item, i (i)}
+        <div class="flex flex-col gap-4">
+          <div class="flex items-center justify-center w-12 h-12">
+            {#if typeof item.icon === "string"}
+              <i class="text-3xl {item.icon}"></i>
+            {:else}
+              <HugeiconsIcon icon={item.icon} class="size-8" />
+            {/if}
+          </div>
+          <h3 class="text-lg font-bold">{item.title}</h3>
+          {#if item.description}
+            <p class="text-sm">{item.description}</p>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+</section>

package/dist/components/ui/section/Section03.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Section03Props } from "./types";
+declare const Section03: import("svelte").Component<Section03Props, {}, "">;
+type Section03 = ReturnType<typeof Section03>;
+export default Section03;

package/dist/components/ui/section/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Section01 } from "./Section01.svelte";
+export { default as Section02 } from "./Section02.svelte";
+export { default as Section03 } from "./Section03.svelte";
+export type { Section01Props, Section02Props, Section03Props, SectionCardItem, SectionFeatureItem, } from "./types";

package/dist/components/ui/section/index.js

@@ -0,0 +1,3 @@
+export { default as Section01 } from "./Section01.svelte";
+export { default as Section02 } from "./Section02.svelte";
+export { default as Section03 } from "./Section03.svelte";

package/dist/components/ui/section/types.d.ts

@@ -0,0 +1,46 @@
+import type { IconSvgElement } from "@hugeicons/svelte";
+export interface SectionCardItem {
+    id?: string | number;
+    title: string;
+    description?: string;
+    icon: string | IconSvgElement;
+    isActive?: boolean;
+}
+export interface SectionFeatureItem {
+    id?: string | number;
+    title: string;
+    description?: string;
+    link?: string;
+    linkLabel?: string;
+}
+export interface Section01Props {
+    title?: string;
+    description?: string;
+    items?: SectionCardItem[];
+    selectedKey?: string | number;
+    titleClass?: string;
+    descriptionClass?: string;
+    className?: string;
+    onSelect?: (id: string | number) => void;
+    onPrev?: () => void;
+    onNext?: () => void;
+}
+export interface Section02Props {
+    title?: string;
+    description?: string;
+    image?: string;
+    imageAlt?: string;
+    features?: SectionFeatureItem[];
+    titleClass?: string;
+    descriptionClass?: string;
+    className?: string;
+    imageClass?: string;
+}
+export interface Section03Props {
+    title?: string;
+    description?: string;
+    items?: SectionCardItem[];
+    titleClass?: string;
+    descriptionClass?: string;
+    className?: string;
+}

package/dist/components/ui/section/types.js

@@ -0,0 +1 @@
+export {};

package/dist/docs/DocsSidebar.svelte

@@ -11,7 +11,13 @@
     SidebarMenuButton,
     SidebarMenuItem,
   } from "../components/ui/sidebar";
-  import { DocumentCodeIcon } from "@hugeicons/core-free-icons";
+  import {
+    AppWindowIcon,
+    DocumentCodeIcon,
+    FormIcon,
+    Login01Icon,
+    UserAdd01Icon,
+  } from "@hugeicons/core-free-icons";
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import { page } from "$app/state";
   import { categories, components } from "./components";
@@ -21,6 +27,15 @@
   }
 
   const path = $derived(page.url.pathname);
+
+  const authDemos = [
+    { href: "/login/admin/01", label: "Login — Variant 01", icon: Login01Icon },
+    { href: "/login/admin/01", label: "Login — Variant 02", icon: Login01Icon },
+    { href: "/login/admin/01", label: "Login — Variant 03", icon: Login01Icon },
+    { href: "/register/admin/01", label: "Register — Variant 01", icon: UserAdd01Icon },
+    { href: "/register/admin/01", label: "Register — Variant 02", icon: UserAdd01Icon },
+    { href: "/register/admin/01", label: "Register — Variant 03", icon: UserAdd01Icon },
+  ];
 </script>
 
 <Sidebar collapsible="icon">
@@ -66,6 +81,48 @@
       </SidebarGroupContent>
     </SidebarGroup>
 
+    <SidebarGroup>
+      <SidebarGroupLabel class="uppercase tracking-wider text-muted-foreground/70">
+        Live Demos
+      </SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton isActive={path === "/modal"}>
+              {#snippet child({ props })}
+                <a href="/modal" {...props} class="flex items-center gap-2">
+                  <HugeiconsIcon icon={AppWindowIcon} class="size-4" />
+                  <span>Modals</span>
+                </a>
+              {/snippet}
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <SidebarMenuButton isActive={path === "/form"}>
+              {#snippet child({ props })}
+                <a href="/form" {...props} class="flex items-center gap-2">
+                  <HugeiconsIcon icon={FormIcon} class="size-4" />
+                  <span>Form</span>
+                </a>
+              {/snippet}
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+          {#each authDemos as demo}
+            <SidebarMenuItem>
+              <SidebarMenuButton isActive={path === demo.href}>
+                {#snippet child({ props })}
+                  <a href={demo.href} {...props} class="flex items-center gap-2">
+                    <HugeiconsIcon icon={demo.icon} class="size-4" />
+                    <span>{demo.label}</span>
+                  </a>
+                {/snippet}
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          {/each}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+
     {#each categories as category (category)}
       {@const list = componentList(category)}
       {#if list.length > 0}

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[];