negodesign 0.0.73 → 0.0.75

package/dist/components/{core → ui}/search/shared/SearchInputCore.svelte

@@ -1,66 +1,66 @@
-<script lang="ts" module>
-  /**
-   * Reusable search input component used by Search01 and Search02.
-   * Renders a text input with a search icon and submit button.
-   * @component
-   */
-</script>
-
-<script lang="ts">
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { Search01Icon } from "@hugeicons/core-free-icons";
-  import Button from "../../../ui/button/button.svelte";
-  import { Separator } from "../../../ui/separator/index";
-  import { t } from "../../../../i18n";
-  import type { SearchInputProps } from "../types";
-
-  let { onSubmit, placeholder, variant = 1, buttonClass, inputClass, iconClass }: SearchInputProps = $props();
-
-  let value = $state("");
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === "Enter") onSubmit?.(value);
-  }
-</script>
-
-<div class="container relative">
-  <div
-    class="mx-auto md:w-11/12 z-10 {variant === 2
-      ? 'border-b'
-      : 'border bg-input rounded-lg shadow'} m-auto"
-  >
-    <div class="flex items-center gap-2 py-1 px-2 w-full md:min-h-15">
-      <div class="items-center gap-2 hidden md:flex">
-        <HugeiconsIcon
-          icon={Search01Icon}
-          size={20}
-          color="currentColor"
-          strokeWidth={1.5}
-          class={iconClass}
-        />
-      </div>
-      <input
-        type="search"
-        bind:value
-        onkeydown={handleKeydown}
-        class="text-sm w-full bg-transparent border-none outline-none focus:outline-none focus:ring-0 focus:border-transparent {inputClass}"
-        placeholder={placeholder || $t("label.search.placeholder")}
-      />
-      <div class="flex gap-1">
-        <Separator class="w-full" orientation="vertical" />
-        <Button
-          onclick={() => onSubmit?.(value)}
-          class={`flex justify-center items-center cursor-pointer ${buttonClass}`}
-        >
-          <HugeiconsIcon
-            icon={Search01Icon}
-            size={15}
-            color="currentColor"
-            strokeWidth={2}
-          />
-          <span class="hidden md:block">{$t("label.search")}</span>
-        </Button>
-      </div>
-    </div>
-  </div>
-</div>
+<script lang="ts" module>
+  /**
+   * Reusable search input component used by Search01 and Search02.
+   * Renders a text input with a search icon and submit button.
+   * @component
+   */
+</script>
+
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Search01Icon } from "@hugeicons/core-free-icons";
+  import Button from "../../button/button.svelte";
+  import { Separator } from "../../separator/index";
+  import { t } from "../../../../i18n";
+  import type { SearchInputProps } from "../types";
+
+  let { onSubmit, placeholder, variant = 1, buttonClass, inputClass, iconClass }: SearchInputProps = $props();
+
+  let value = $state("");
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") onSubmit?.(value);
+  }
+</script>
+
+<div class="container relative">
+  <div
+    class="mx-auto md:w-11/12 z-10 {variant === 2
+      ? 'border-b'
+      : 'border bg-input rounded-lg shadow'} m-auto"
+  >
+    <div class="flex items-center gap-2 py-1 px-2 w-full md:min-h-15">
+      <div class="items-center gap-2 hidden md:flex">
+        <HugeiconsIcon
+          icon={Search01Icon}
+          size={20}
+          color="currentColor"
+          strokeWidth={1.5}
+          class={iconClass}
+        />
+      </div>
+      <input
+        type="search"
+        bind:value
+        onkeydown={handleKeydown}
+        class="text-sm w-full bg-transparent border-none outline-none focus:outline-none focus:ring-0 focus:border-transparent {inputClass}"
+        placeholder={placeholder || $t("label.search.placeholder")}
+      />
+      <div class="flex gap-1">
+        <Separator class="w-full" orientation="vertical" />
+        <Button
+          onclick={() => onSubmit?.(value)}
+          class={`flex justify-center items-center cursor-pointer ${buttonClass}`}
+        >
+          <HugeiconsIcon
+            icon={Search01Icon}
+            size={15}
+            color="currentColor"
+            strokeWidth={2}
+          />
+          <span class="hidden md:block">{$t("label.search")}</span>
+        </Button>
+      </div>
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import {
+    ArrowLeft01Icon,
+    ArrowRight01Icon,
+  } from "@hugeicons/core-free-icons";
+  import type { Section01Props } from "./types";
+
+  let {
+    title,
+    description,
+    items = [],
+    selectedKey,
+    titleClass,
+    descriptionClass,
+    className,
+    onSelect,
+    onPrev,
+    onNext,
+  }: Section01Props = $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-12"
+    >
+      <h2
+        class="text-3xl md:text-5xl lg:text-6xl font-bold leading-tight {titleClass}"
+      >
+        {title}
+      </h2>
+      <div class="flex flex-col gap-6 md:max-w-md">
+        <p class="text-sm md:text-base text-gray-600 {descriptionClass}">
+          {description}
+        </p>
+        <div class="flex items-center gap-4">
+          <button
+            onclick={onPrev}
+            class="flex items-center justify-center w-10 h-10 rounded-full border border-gray-300 hover:bg-gray-200 transition-colors"
+          >
+            <HugeiconsIcon icon={ArrowLeft01Icon} class="size-5" />
+          </button>
+          <div class="flex-1 h-0.5">
+            <div class="h-full bg-black w-1/3"></div>
+          </div>
+          <button
+            onclick={onNext}
+            class="flex items-center justify-center w-10 h-10 rounded-full border border-gray-300 hover:bg-gray-200 transition-colors"
+          >
+            <HugeiconsIcon icon={ArrowRight01Icon} class="size-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      {#each items as item, i (i)}
+        <button
+          onclick={() => onSelect?.(item.id ?? i)}
+          class="flex flex-col items-start text-left p-6 rounded-2xl transition-colors {item.isActive
+            ? 'bg-[#3d3d3d] text-white'
+            : 'bg-white text-black hover:bg-gray-100'}"
+        >
+          <div
+            class="flex items-center justify-center w-14 h-14 rounded-full bg-white/20 mb-6 {item.isActive
+              ? 'bg-white/20'
+              : 'bg-gray-100'}"
+          >
+            {#if typeof item.icon === "string"}
+              <i class="text-2xl {item.icon}"></i>
+            {:else}
+              <HugeiconsIcon icon={item.icon} class="size-7" />
+            {/if}
+          </div>
+          <h3 class="text-lg font-bold mb-2">{item.title}</h3>
+          {#if item.description}
+            <p
+              class="text-sm {item.isActive
+                ? 'text-gray-300'
+                : 'text-gray-500'}"
+            >
+              {item.description}
+            </p>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  </div>
+</section>

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

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

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/components/ui/separator/separator.svelte

@@ -1,29 +1,29 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		orientation = "horizontal",
-		decorative = false,
-		class: className,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		orientation?: "horizontal" | "vertical";
-		decorative?: boolean;
-	} = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="separator"
-	data-orientation={orientation}
-	role={decorative ? undefined : "separator"}
-	aria-orientation={decorative ? undefined : orientation}
-	class={cn(
-		"shrink-0 bg-border",
-		orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-		className
-	)}
-	{...restProps}
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		orientation = "horizontal",
+		decorative = false,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: "horizontal" | "vertical";
+		decorative?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="separator"
+	data-orientation={orientation}
+	role={decorative ? undefined : "separator"}
+	aria-orientation={decorative ? undefined : orientation}
+	class={cn(
+		"shrink-0 bg-border",
+		orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+		className
+	)}
+	{...restProps}
 ></div>

package/dist/components/{core/sidebar → ui/sidebar/core}/MenuBarSidebar.svelte

@@ -1,70 +1,70 @@
-<script lang="ts">
-  import * as Sidebar from "../../ui/sidebar/index.js";
-  import type { ComponentProps } from "svelte";
-
-  import type { NavUserSidebarProps } from "./data/nav-user-sidebar";
-  import type {
-    NavMenuItem,
-    NavMenuSidebarProps,
-  } from "./data/nav-menu-sidebar";
-  import type { Snippet } from "svelte";
-  import NavMenuTopBarSidebar from "./ui/navbar/NavMenuTopBarSidebar.svelte";
-  import NavMenuBottomSidebar from "./ui/navbar/NavMenuBottomSidebar.svelte";
-  import NavMenuBarSidebar from "./ui/navbar/NavMenuBarSidebar.svelte";
-  import NavUserSidebar from "./ui/navbar/NavUserSidebar.svelte";
-  import { t } from "../../../i18n";
-
-  /**
-   * Navigation sidebar with menus, user, and buttons.
-   * @property {NavMenuSidebar[]} menusButtons - Footer buttons (e.g., logout)
-   * @property {NavMenuItem[]} menus - Main navigation items
-   * @property {NavUserSidebarItem} user - Logged-in user data
-   * @property {Snippet} footer - Snippet customizado do footer
-   * @property {Snippet} header - Snippet customizado do header
-   */
-  type Props = {
-    menusButtons?: NavMenuSidebarProps[];
-    menus: NavMenuItem[];
-    user: NavUserSidebarProps;
-    footer?: Snippet;
-    header?: Snippet;
-  };
-
-  let {
-    ref = $bindable(null),
-    collapsible = "icon",
-    menusButtons,
-    menus,
-    user,
-    footer,
-    header,
-    ...restProps
-  }: ComponentProps<typeof Sidebar.Root> & Props = $props();
-</script>
-
-<Sidebar.Root bind:ref {collapsible} {...restProps}>
-  <Sidebar.Header>
-    {#if header}
-      {@render header?.()}
-    {:else}
-      <NavMenuTopBarSidebar
-        content={{
-          title: $t("label.panel"),
-          subtitle: $t("label.administrative"),
-        }}
-      />
-    {/if}
-  </Sidebar.Header>
-  <Sidebar.Content>
-    <NavMenuBarSidebar items={menus} />
-  </Sidebar.Content>
-  <Sidebar.Footer>
-    {#if footer}
-      {@render footer?.()}
-    {:else if menusButtons && menusButtons.length > 0}
-      <NavMenuBottomSidebar items={menusButtons} class="mt-auto" />
-    {/if}
-    <NavUserSidebar {user} />
-  </Sidebar.Footer>
-  <Sidebar.Rail />
-</Sidebar.Root>
+<script lang="ts">
+  import * as Sidebar from "../index.js";
+  import type { ComponentProps } from "svelte";
+
+  import type { NavUserSidebarProps } from "./data/nav-user-sidebar";
+  import type {
+    NavMenuItem,
+    NavMenuSidebarProps,
+  } from "./data/nav-menu-sidebar";
+  import type { Snippet } from "svelte";
+  import NavMenuTopBarSidebar from "./ui/navbar/NavMenuTopBarSidebar.svelte";
+  import NavMenuBottomSidebar from "./ui/navbar/NavMenuBottomSidebar.svelte";
+  import NavMenuBarSidebar from "./ui/navbar/NavMenuBarSidebar.svelte";
+  import NavUserSidebar from "./ui/navbar/NavUserSidebar.svelte";
+  import { t } from "../../../../i18n";
+
+  /**
+   * Navigation sidebar with menus, user, and buttons.
+   * @property {NavMenuSidebar[]} menusButtons - Footer buttons (e.g., logout)
+   * @property {NavMenuItem[]} menus - Main navigation items
+   * @property {NavUserSidebarItem} user - Logged-in user data
+   * @property {Snippet} footer - Snippet customizado do footer
+   * @property {Snippet} header - Snippet customizado do header
+   */
+  type Props = {
+    menusButtons?: NavMenuSidebarProps[];
+    menus: NavMenuItem[];
+    user: NavUserSidebarProps;
+    footer?: Snippet;
+    header?: Snippet;
+  };
+
+  let {
+    ref = $bindable(null),
+    collapsible = "icon",
+    menusButtons,
+    menus,
+    user,
+    footer,
+    header,
+    ...restProps
+  }: ComponentProps<typeof Sidebar.Root> & Props = $props();
+</script>
+
+<Sidebar.Root bind:ref {collapsible} {...restProps}>
+  <Sidebar.Header>
+    {#if header}
+      {@render header?.()}
+    {:else}
+      <NavMenuTopBarSidebar
+        content={{
+          title: $t("label.panel"),
+          subtitle: $t("label.administrative"),
+        }}
+      />
+    {/if}
+  </Sidebar.Header>
+  <Sidebar.Content>
+    <NavMenuBarSidebar items={menus} />
+  </Sidebar.Content>
+  <Sidebar.Footer>
+    {#if footer}
+      {@render footer?.()}
+    {:else if menusButtons && menusButtons.length > 0}
+      <NavMenuBottomSidebar items={menusButtons} class="mt-auto" />
+    {/if}
+    <NavUserSidebar {user} />
+  </Sidebar.Footer>
+  <Sidebar.Rail />
+</Sidebar.Root>

package/dist/components/{core/sidebar → ui/sidebar/core}/MenuBarSidebar.svelte.d.ts

@@ -1,4 +1,4 @@
-import * as Sidebar from "../../ui/sidebar/index.js";
+import * as Sidebar from "../index.js";
 import type { ComponentProps } from "svelte";
 import type { NavUserSidebarProps } from "./data/nav-user-sidebar";
 import type { NavMenuItem, NavMenuSidebarProps } from "./data/nav-menu-sidebar";

package/dist/components/ui/sidebar/core/data/nav-menu-sidebar.js

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

package/dist/components/ui/sidebar/core/data/nav-top-bar-sidebar.js

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

package/dist/components/ui/sidebar/core/data/nav-user-sidebar.js

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

package/dist/components/ui/sidebar/core/types.js

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