negodesign 0.0.74 → 0.0.75

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

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
+  import type { Section02Props } from "./types";
+
+  let {
+    title,
+    description,
+    image,
+    imageAlt,
+    features = [],
+    titleClass,
+    descriptionClass,
+    className,
+    imageClass,
+  }: Section02Props = $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 gap-8 md:gap-16">
+      <div class="flex flex-col gap-8 md:w-1/2">
+        <h2
+          class="text-3xl md:text-5xl lg:text-6xl font-bold leading-tight {titleClass}"
+        >
+          {title}
+        </h2>
+        {#if image}
+          <div class="rounded-3xl overflow-hidden">
+            <img
+              src={image}
+              alt={imageAlt ?? title}
+              class="w-full h-auto object-cover {imageClass}"
+            />
+          </div>
+        {/if}
+      </div>
+
+      <div class="flex flex-col gap-8 md:w-1/2">
+        {#if description}
+          <p class="text-sm md:text-base text-gray-600 {descriptionClass}">
+            {description}
+          </p>
+        {/if}
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
+          {#each features as feature, i (i)}
+            <div class="flex flex-col gap-3">
+              <h3 class="text-lg font-bold">{feature.title}</h3>
+              {#if feature.description}
+                <p class="text-sm text-gray-500">{feature.description}</p>
+              {/if}
+              {#if feature.link}
+                <a
+                  href={feature.link}
+                  class="inline-flex items-center gap-2 text-sm font-semibold mt-2 hover:opacity-80 transition-opacity"
+                >
+                  {feature.linkLabel ?? "Learn More"}
+                  <HugeiconsIcon icon={ArrowRight01Icon} class="size-4" />
+                </a>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

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