negodesign 0.0.24 → 0.0.26

package/dist/components/core/panel/CarouselSlot.svelte

@@ -1,38 +1,63 @@
-<script lang="ts">
-  import * as Carousel from "../../ui/carousel/index.js";
-  import type { Snippet } from "svelte";
-
-  type Props = {
-    isBorderBottom?: boolean;
-    isButtonPreviousAndNext?: boolean;
-    buttonPreviousAndNextClass?: string;
-    containerClass?: string;
-    children: Snippet;
-  };
-
-  const {
-    isBorderBottom = true,
-    isButtonPreviousAndNext = true,
-    buttonPreviousAndNextClass = "",
-    containerClass = "",
-    children,
-  }: Props = $props();
-</script>
-
-<div
-  class={`relative py-3 px-2 ${isBorderBottom ? "border-b" : ""} ${containerClass}`}
->
-  <Carousel.Root>
-    <Carousel.Content class="ml-10">
-      {@render children()}
-    </Carousel.Content>
-    {#if isButtonPreviousAndNext}
-      <Carousel.Previous
-        class={`absolute top-1/2 -translate-y-1/2 left-1 mt-0.5 ${buttonPreviousAndNextClass}`}
-      />
-      <Carousel.Next
-        class={`absolute top-1/2 -translate-y-1/2 right-1 mt-0.5 ${buttonPreviousAndNextClass}`}
-      />
-    {/if}
-  </Carousel.Root>
-</div>
+<script lang="ts">
+  import * as Carousel from "../../ui/carousel/index.js";
+  import type { Snippet } from "svelte";
+  import type { CarouselPlugins } from "../../ui/carousel/context.js";
+
+  type Props = {
+    positionButtonPreviousAndNext?: "center" | "top_right";
+    buttonPreviousAndNextClass?: string;
+    isButtonPreviousAndNext?: boolean;
+    isBorderBottom?: boolean;
+    containerClass?: string;
+    plugins?: CarouselPlugins;
+    children: Snippet;
+  };
+
+  const {
+    positionButtonPreviousAndNext = "center",
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+    isBorderBottom = true,
+    containerClass = "",
+    plugins = [],
+    children,
+  }: Props = $props();
+
+  const styleTopCenter = "bg-blue-700! text-white! cursor-pointer!";
+  const styleCenter =
+    "absolute top-1/2 -translate-y-1/2 mt-0.5 mr-0 z-50 bg-blue-700! text-white! cursor-pointer!";
+</script>
+
+<div
+  class={`relative py-3 px-2 ${isBorderBottom ? "border-b" : ""} ${containerClass}`}
+>
+  <Carousel.Root {plugins}>
+    <Carousel.Content
+      class={positionButtonPreviousAndNext == "top_right" ? "" : "ml-0"}
+    >
+      {@render children()}
+    </Carousel.Content>
+    {#if positionButtonPreviousAndNext == "center"}
+      {#if isButtonPreviousAndNext}
+        <Carousel.Previous
+          class={`-left-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
+        />
+        <Carousel.Next
+          class={`-right-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
+        />
+      {/if}
+    {/if}
+    {#if positionButtonPreviousAndNext == "top_right"}
+      {#if isButtonPreviousAndNext}
+        <div class="absolute -top-6 right-10 md:right-10 lg:right-12 z-20">
+          <Carousel.Previous
+            class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
+          />
+          <Carousel.Next
+            class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
+          />
+        </div>
+      {/if}
+    {/if}
+  </Carousel.Root>
+</div>

package/dist/components/core/panel/CarouselSlot.svelte.d.ts

@@ -1,9 +1,12 @@
 import type { Snippet } from "svelte";
+import type { CarouselPlugins } from "../../ui/carousel/context.js";
 type Props = {
-    isBorderBottom?: boolean;
-    isButtonPreviousAndNext?: boolean;
+    positionButtonPreviousAndNext?: "center" | "top_right";
     buttonPreviousAndNextClass?: string;
+    isButtonPreviousAndNext?: boolean;
+    isBorderBottom?: boolean;
     containerClass?: string;
+    plugins?: CarouselPlugins;
     children: Snippet;
 };
 declare const CarouselSlot: import("svelte").Component<Props, {}, "">;

package/dist/components/core/panel/LeftHero.svelte

@@ -1,117 +1,117 @@
-<script lang="ts">
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
   import type { LoginCarouselProps } from "../../pages/security/login/types";
-  import type { Snippet } from "svelte";
-  import Button from "../../ui/button/button.svelte";
-  import { t } from "../../../i18n";
-  import Logo from "../../../assets/login-01-admin.webp";
-
-  type Props = {
-    title?: string | Snippet;
-    variant?: "NUMBER" | "DOT";
-    autoPlayInterval?: number;
-  };
-
-  let {
-    title,
-    items = [],
-    variant = "DOT",
-    autoPlayInterval = 5000,
-  }: Props & LoginCarouselProps = $props();
-
-  let currentIndex = $state(0);
-  let currentItem = $derived(items[currentIndex] ?? items[0]);
-
-  function goTo(index: number) {
-    currentIndex = index;
-  }
-
-  function next() {
-    if (items.length === 0) return;
-    currentIndex = (currentIndex + 1) % items.length;
-  }
-
-  $effect(() => {
-    if (items.length <= 1) return;
-    const timer = setInterval(next, autoPlayInterval);
-    return () => clearInterval(timer);
-  });
-</script>
-
-<div
-  class="relative flex flex-col justify-between overflow-hidden h-screen p-8 bg-gradient-left text-white"
->
-  <div class="flex items-center gap-2">
-    <div class="font-bold text-xl tracking-wider flex items-center gap-2">
-      {#if typeof title === "function"}
-        {@render title()}
-      {:else}
-        {title || $t("label.welcome")}
-      {/if}
-    </div>
-  </div>
-
-  <section class="flex flex-col gap-5">
-    <div class="my-auto max-w-sm md:max-w-md lg:max-w-100">
-      {#if currentItem}
-        {#key currentIndex}
-          <div
-            class="text-xl md:text-2xl font-bold tracking-tight mb-4 leading-tight animate-in fade-in duration-300"
-          >
-            {currentItem.title}
-          </div>
-          <p
-            class=" text-sm mb-6 leading-relaxed animate-in fade-in duration-300"
-          >
-            {currentItem.description}
-          </p>
-        {/key}
-        <Button
-          variant="outline"
-          class="inline-flex items-center gap-2 text-sm font-semibold bg-primary"
-        >
-          {currentItem.buttonText}
-          <HugeiconsIcon icon={ArrowRight01Icon} size={16} />
-        </Button>
-      {/if}
-    </div>
-
-    <div class="flex items-center gap-2 mb-2">
-      {#each items as it, i (it.title)}
-        <button
-          type="button"
-          onclick={() => goTo(i)}
-          aria-label={`Ir para o item ${i + 1}`}
-          aria-current={currentIndex === i}
-          class="transition-all duration-300 focus:outline-none flex items-center justify-center {currentIndex ===
-          i
-            ? 'opacity-100 scale-110'
-            : 'opacity-50 hover:opacity-75'}"
-        >
-          {#if variant === "NUMBER"}
-            <span
-              class="w-6 h-6 text-xs font-semibold rounded-full text-primary flex items-center justify-center"
-            >
-              {i + 1}
-            </span>
-          {:else}
-            <span class="w-2 h-2 rounded-full bg-white"></span>
-          {/if}
-        </button>
-      {/each}
-    </div>
-  </section>
-
-  <aside
-    class="hidden z-50 lg:block lg:absolute lg:right-0 lg:-bottom-3 lg:w-105 lg:h-105"
-  >
-    <img
-      src={Logo}
-      alt=""
-      class="shadow rounded-tl-lg rounded-bl-lg lg:w-105 lg:h-105"
-    />
-  </aside>
-</div>
-
-<aside class="absolute grid-pattern p-0 top-0 h-screen w-8/12"></aside>
+  import type { Snippet } from "svelte";
+  import Button from "../../ui/button/button.svelte";
+  import { t } from "../../../i18n";
+  import Logo from "../../../assets/login-01-admin.webp";
+
+  type Props = {
+    title?: string | Snippet;
+    variant?: "NUMBER" | "DOT";
+    autoPlayInterval?: number;
+  };
+
+  let {
+    title,
+    items = [],
+    variant = "DOT",
+    autoPlayInterval = 5000,
+  }: Props & LoginCarouselProps = $props();
+
+  let currentIndex = $state(0);
+  let currentItem = $derived(items[currentIndex] ?? items[0]);
+
+  function goTo(index: number) {
+    currentIndex = index;
+  }
+
+  function next() {
+    if (items.length === 0) return;
+    currentIndex = (currentIndex + 1) % items.length;
+  }
+
+  $effect(() => {
+    if (items.length <= 1) return;
+    const timer = setInterval(next, autoPlayInterval);
+    return () => clearInterval(timer);
+  });
+</script>
+
+<div
+  class="relative flex flex-col justify-between overflow-hidden h-screen p-8 bg-gradient-left text-white"
+>
+  <div class="flex items-center gap-2">
+    <div class="font-bold text-xl tracking-wider flex items-center gap-2">
+      {#if typeof title === "function"}
+        {@render title()}
+      {:else}
+        {title || $t("label.welcome")}
+      {/if}
+    </div>
+  </div>
+
+  <section class="flex flex-col gap-5">
+    <div class="my-auto max-w-sm md:max-w-md lg:max-w-100">
+      {#if currentItem}
+        {#key currentIndex}
+          <div
+            class="text-xl md:text-2xl font-bold tracking-tight mb-4 leading-tight animate-in fade-in duration-300"
+          >
+            {currentItem.title}
+          </div>
+          <p
+            class=" text-sm mb-6 leading-relaxed animate-in fade-in duration-300"
+          >
+            {currentItem.description}
+          </p>
+        {/key}
+        <Button
+          variant="outline"
+          class="inline-flex items-center gap-2 text-sm font-semibold bg-primary"
+        >
+          {currentItem.buttonText}
+          <HugeiconsIcon icon={ArrowRight01Icon} size={16} />
+        </Button>
+      {/if}
+    </div>
+
+    <div class="flex items-center gap-2 mb-2">
+      {#each items as it, i (it.title)}
+        <button
+          type="button"
+          onclick={() => goTo(i)}
+          aria-label={`Ir para o item ${i + 1}`}
+          aria-current={currentIndex === i}
+          class="transition-all duration-300 focus:outline-none flex items-center justify-center {currentIndex ===
+          i
+            ? 'opacity-100 scale-110'
+            : 'opacity-50 hover:opacity-75'}"
+        >
+          {#if variant === "NUMBER"}
+            <span
+              class="w-6 h-6 text-xs font-semibold rounded-full text-primary flex items-center justify-center"
+            >
+              {i + 1}
+            </span>
+          {:else}
+            <span class="w-2 h-2 rounded-full bg-white"></span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  </section>
+
+  <aside
+    class="hidden z-50 lg:block lg:absolute lg:right-0 lg:-bottom-3 lg:w-105 lg:h-105"
+  >
+    <img
+      src={Logo}
+      alt=""
+      class="shadow rounded-tl-lg rounded-bl-lg lg:w-105 lg:h-105"
+    />
+  </aside>
+</div>
+
+<aside class="absolute grid-pattern p-0 top-0 h-screen w-8/12"></aside>

package/dist/components/core/search/SearchInput.svelte

@@ -1,32 +1,32 @@
-<script lang="ts" module>
-  /**
-   * Main Privacy Policy / Terms of Use component.
-   * Allows choosing between two layout variants:
-   * - **1**: Three-column layout with sidebar, content, and TOC (scroll-spy).
-   * - **2**: Simple layout with colored hero and centered content.
-   *
-   * @component
-   * @example
-   * ```svelte
-    * <!-- Variant 1 (default) — docs layout with sidebar -->
-   * <PrivacyPolicyOrTermsOfUse variant={1} data={pageData} />
-   *
-    * <!-- Variant 2 — layout with hero -->
-   * <PrivacyPolicyOrTermsOfUse variant={2} data={pageData} />
-   * ```
-   */
-</script>
-
-<script lang="ts">
-    import Search01 from "./01/Search01.svelte";
-    import Search02 from "./02/Search02.svelte";
-    import type { SearchInputProps } from "./types";
-
-  let { variant = 1, ...restProps }: SearchInputProps = $props();
-</script>
-
-{#if variant === 2}
-  <Search02 {...restProps} />
-{:else}
-  <Search01 {...restProps} />
-{/if}
+<script lang="ts" module>
+  /**
+   * Main Privacy Policy / Terms of Use component.
+   * Allows choosing between two layout variants:
+   * - **1**: Three-column layout with sidebar, content, and TOC (scroll-spy).
+   * - **2**: Simple layout with colored hero and centered content.
+   *
+   * @component
+   * @example
+   * ```svelte
+    * <!-- Variant 1 (default) — docs layout with sidebar -->
+   * <PrivacyPolicyOrTermsOfUse variant={1} data={pageData} />
+   *
+    * <!-- Variant 2 — layout with hero -->
+   * <PrivacyPolicyOrTermsOfUse variant={2} data={pageData} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+    import Search01 from "./01/Search01.svelte";
+    import Search02 from "./02/Search02.svelte";
+    import type { SearchInputProps } from "./types";
+
+  let { variant = 1, ...restProps }: SearchInputProps = $props();
+</script>
+
+{#if variant === 2}
+  <Search02 {...restProps} />
+{:else}
+  <Search01 {...restProps} />
+{/if}

package/dist/components/core/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 "../../../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>