negodesign 0.0.81 → 0.0.82

package/dist/components/ui/nav/ui/shared/navigation/NavigationMenuItemCard.svelte

@@ -1,53 +1,53 @@
-<script lang="ts">
-  import type { NavigationMenuItemCardProps } from "../../../data/types";
-  import MenuListItem from "../MenuListItem.svelte";
-  import NavDropdown from "./NavDropdown.svelte";
-
-  let {
-    label,
-    header,
-    cards: items,
-    hoverClass,
-  }: NavigationMenuItemCardProps = $props();
-</script>
-
-{#snippet headerSnippet(label: string, description: string)}
-  <div class="mt-4 mb-2 text-lg font-medium {header?.labelClass}">
-    {label}
-  </div>
-  <p
-    class="text-sm leading-tight {header?.descriptionClass ||
-      'text-muted-foreground'}"
-  >
-    {description}
-  </p>
-{/snippet}
-
-<NavDropdown label={label ?? header?.label ?? ""} {hoverClass}>
-  <ul class="grid gap-2 p-2 w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]">
-    {#if header}
-      <li
-        class="row-span-3 relative"
-        style={header.imgUrl
-          ? `background-image: url(${header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
-          : ``}
-      >
-        <a
-          href={header.href ?? "#"}
-          class={`flex h-full w-full flex-col justify-end p-4 md:p-6 ${
-            header.imgUrl
-              ? `no-underline outline-hidden select-none`
-              : `bg-linear-to-b from-muted/50 to-muted rounded-md focus:shadow-md`
-          }`}
-        >
-          {@render headerSnippet(header.label, header.description)}
-        </a>
-      </li>
-    {/if}
-    {#if items && items.length > 0}
-      {#each items as item, i (i)}
-        <MenuListItem {...item} />
-      {/each}
-    {/if}
-  </ul>
-</NavDropdown>
+<script lang="ts">
+  import type { NavigationMenuItemCardProps } from "../../../data/types";
+  import MenuListItem from "../MenuListItem.svelte";
+  import NavDropdown from "./NavDropdown.svelte";
+
+  let {
+    label,
+    header,
+    cards: items,
+    hoverClass,
+  }: NavigationMenuItemCardProps = $props();
+</script>
+
+{#snippet headerSnippet(label: string, description: string)}
+  <div class="mt-4 mb-2 text-lg font-medium {header?.labelClass}">
+    {label}
+  </div>
+  <p
+    class="text-sm leading-tight {header?.descriptionClass ||
+      'text-muted-foreground'}"
+  >
+    {description}
+  </p>
+{/snippet}
+
+<NavDropdown label={label ?? header?.label ?? ""} {hoverClass}>
+  <ul class="grid gap-2 p-2 w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]">
+    {#if header}
+      <li
+        class="row-span-3 relative"
+        style={header.imgUrl
+          ? `background-image: url(${header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
+          : ``}
+      >
+        <a
+          href={header.href ?? "#"}
+          class={`flex h-full w-full flex-col justify-end p-4 md:p-6 ${
+            header.imgUrl
+              ? `no-underline outline-hidden select-none`
+              : `bg-linear-to-b from-muted/50 to-muted rounded-md focus:shadow-md`
+          }`}
+        >
+          {@render headerSnippet(header.label, header.description)}
+        </a>
+      </li>
+    {/if}
+    {#if items && items.length > 0}
+      {#each items as item, i (i)}
+        <MenuListItem {...item} />
+      {/each}
+    {/if}
+  </ul>
+</NavDropdown>

package/dist/components/ui/nav/ui/shared/navigation/NavigationMenuItemGrid.svelte

@@ -1,35 +1,35 @@
-<script lang="ts">
-  import type { NavigationMenuItemGridProps } from "../../../data/types";
-  import MenuListItem from "../MenuListItem.svelte";
-  import NavDropdown from "./NavDropdown.svelte";
-
-  let {
-    label,
-    grids: items,
-    textClass,
-    subTextClass,
-    hoverClass,
-  }: NavigationMenuItemGridProps = $props();
-
-  const cols = (): string => {
-    const len = items?.length ?? 0;
-    if (len > 5) return "grid-cols-1 md:grid-cols-3";
-    if (len % 3 == 0) return "grid-cols-1 md:grid-cols-3";
-    if (len % 2 == 0) return "grid-cols-1 md:grid-cols-2";
-    return "grid-cols-1";
-  };
-
-  const gridCols = $derived(cols());
-</script>
-
-<NavDropdown {label} {hoverClass}>
-  {#if items}
-    <ul
-      class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 lg:min-w-150 max-h-75 overflow-y-auto ${gridCols}`}
-    >
-      {#each items as item, i (i)}
-        <MenuListItem {...item} {textClass} {subTextClass} />
-      {/each}
-    </ul>
-  {/if}
-</NavDropdown>
+<script lang="ts">
+  import type { NavigationMenuItemGridProps } from "../../../data/types";
+  import MenuListItem from "../MenuListItem.svelte";
+  import NavDropdown from "./NavDropdown.svelte";
+
+  let {
+    label,
+    grids: items,
+    textClass,
+    subTextClass,
+    hoverClass,
+  }: NavigationMenuItemGridProps = $props();
+
+  const cols = (): string => {
+    const len = items?.length ?? 0;
+    if (len > 5) return "grid-cols-1 md:grid-cols-3";
+    if (len % 3 == 0) return "grid-cols-1 md:grid-cols-3";
+    if (len % 2 == 0) return "grid-cols-1 md:grid-cols-2";
+    return "grid-cols-1";
+  };
+
+  const gridCols = $derived(cols());
+</script>
+
+<NavDropdown {label} {hoverClass}>
+  {#if items}
+    <ul
+      class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 lg:min-w-150 max-h-75 overflow-y-auto ${gridCols}`}
+    >
+      {#each items as item, i (i)}
+        <MenuListItem {...item} {textClass} {subTextClass} />
+      {/each}
+    </ul>
+  {/if}
+</NavDropdown>

package/dist/components/ui/nav/ui/shared/navigation/NavigationMenuItemList.svelte

@@ -1,24 +1,24 @@
-<script lang="ts">
-  import type { NavigationMenuItemListProps } from "../../../data/types";
-  import NavDropdown from "./NavDropdown.svelte";
-
-  let { label, list, hoverClass }: NavigationMenuItemListProps = $props();
-</script>
-
-<NavDropdown {label} className="hidden md:block" {hoverClass}>
-  <ul class="grid w-75 gap-4 p-2">
-    {#each list as item, i (i)}
-      <li>
-        <a
-          href={item.href}
-          class="block rounded-xl p-2 no-underline hover:bg-muted"
-        >
-          <div class="font-medium">{item.title ?? ""}</div>
-          <div class="text-muted-foreground">
-            {item.content}
-          </div>
-        </a>
-      </li>
-    {/each}
-  </ul>
-</NavDropdown>
+<script lang="ts">
+  import type { NavigationMenuItemListProps } from "../../../data/types";
+  import NavDropdown from "./NavDropdown.svelte";
+
+  let { label, list, hoverClass }: NavigationMenuItemListProps = $props();
+</script>
+
+<NavDropdown {label} className="hidden md:block" {hoverClass}>
+  <ul class="grid w-75 gap-4 p-2">
+    {#each list as item, i (i)}
+      <li>
+        <a
+          href={item.href}
+          class="block rounded-xl p-2 no-underline hover:bg-muted"
+        >
+          <div class="font-medium">{item.title ?? ""}</div>
+          <div class="text-muted-foreground">
+            {item.content}
+          </div>
+        </a>
+      </li>
+    {/each}
+  </ul>
+</NavDropdown>

package/dist/components/ui/nav/ui/shared/navigation/NavigationMenuItems.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-  import type { NavigationMenuItemsProps } from "../../../data/types";
-  import NavDropdown from "./NavDropdown.svelte";
-
-  let { label, items, hoverClass }: NavigationMenuItemsProps = $props();
-</script>
-
-<NavDropdown {label} className="hidden md:block" {hoverClass}>
-  <ul class="grid min-w-50 gap-4 p-1 md:p-2">
-    {#each items as item, i (i)}
-      <li>
-        <a
-          href={item.href}
-          class="block rounded-xl px-3 py-2 text-sm font-medium no-underline hover:bg-muted focus:bg-muted"
-        >
-          {item.title}
-        </a>
-      </li>
-    {/each}
-  </ul>
-</NavDropdown>
+<script lang="ts">
+  import type { NavigationMenuItemsProps } from "../../../data/types";
+  import NavDropdown from "./NavDropdown.svelte";
+
+  let { label, items, hoverClass }: NavigationMenuItemsProps = $props();
+</script>
+
+<NavDropdown {label} className="hidden md:block" {hoverClass}>
+  <ul class="grid min-w-50 gap-4 p-1 md:p-2">
+    {#each items as item, i (i)}
+      <li>
+        <a
+          href={item.href}
+          class="block rounded-xl px-3 py-2 text-sm font-medium no-underline hover:bg-muted focus:bg-muted"
+        >
+          {item.title}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</NavDropdown>

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

@@ -1,57 +1,57 @@
-<script lang="ts">
-  import * as Carousel from "../carousel/index.js";
-  import { useDevice } from "../../../hooks/responsive.svelte";
-  import type { CarouselSlotProps } from "./type";
-
-  const {
-    positionButtonPreviousAndNext = "center",
-    isButtonPreviousAndNext = true,
-    buttonPreviousAndNextClass = "",
-    isBorderBottom = false,
-    containerClass = "w-full",
-    plugins = [],
-    children,
-  }: CarouselSlotProps = $props();
-
-  const styleTopCenter = "bg-blue-700! text-white! cursor-pointer!";
-  const styleCenter =
-    "absolute top-1/2 -translate-y-1/2 mt-0.5 md:mr-0 z-50 bg-blue-700! text-white! cursor-pointer!";
-
-  const responsive = useDevice();
-</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" && !responsive.isMobile}
-      {#if isButtonPreviousAndNext}
-        <Carousel.Previous
-          class={`-left-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
-        />
-        <Carousel.Next
-          class={`-right-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
-        />
-      {/if}
-    {/if}
-    {#if positionButtonPreviousAndNext == "top_right" || responsive.isMobile}
-      {#if isButtonPreviousAndNext}
-        <div
-          class="absolute -top-5 md:-top-10 right-8 md:right-10 lg:right-12 z-20"
-        >
-          <Carousel.Previous
-            class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
-          />
-          <Carousel.Next
-            class={`start-0 ${styleTopCenter} ${buttonPreviousAndNextClass}`}
-          />
-        </div>
-      {/if}
-    {/if}
-  </Carousel.Root>
-</div>
+<script lang="ts">
+  import * as Carousel from "../carousel/index.js";
+  import { useDevice } from "../../../hooks/responsive.svelte";
+  import type { CarouselSlotProps } from "./type";
+
+  const {
+    positionButtonPreviousAndNext = "center",
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+    isBorderBottom = false,
+    containerClass = "w-full",
+    plugins = [],
+    children,
+  }: CarouselSlotProps = $props();
+
+  const styleTopCenter = "bg-blue-700! text-white! cursor-pointer!";
+  const styleCenter =
+    "absolute top-1/2 -translate-y-1/2 mt-0.5 md:mr-0 z-50 bg-blue-700! text-white! cursor-pointer!";
+
+  const responsive = useDevice();
+</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" && !responsive.isMobile}
+      {#if isButtonPreviousAndNext}
+        <Carousel.Previous
+          class={`-left-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
+        />
+        <Carousel.Next
+          class={`-right-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
+        />
+      {/if}
+    {/if}
+    {#if positionButtonPreviousAndNext == "top_right" || responsive.isMobile}
+      {#if isButtonPreviousAndNext}
+        <div
+          class="absolute -top-5 md:-top-10 right-8 md:right-10 lg:right-12 z-20"
+        >
+          <Carousel.Previous
+            class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
+          />
+          <Carousel.Next
+            class={`start-0 ${styleTopCenter} ${buttonPreviousAndNextClass}`}
+          />
+        </div>
+      {/if}
+    {/if}
+  </Carousel.Root>
+</div>

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

@@ -1,114 +1,114 @@
-<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 "../button/button.svelte";
-  import { t } from "../../../i18n";
-  import Logo from "../../../assets/login-01-admin.webp";
-
-  type Props = {
-    title?: string | Snippet;
-    autoPlayInterval?: number;
-  };
-
-  let {
-    title,
-    items = [],
-    type = "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"
->
-  <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-fade-in duration-300"
-          >
-            {currentItem.title}
-          </div>
-          <p class=" text-sm mb-6 leading-relaxed animate-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 type === "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: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>
+<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 "../button/button.svelte";
+  import { t } from "../../../i18n";
+  import Logo from "../../../assets/login-01-admin.webp";
+
+  type Props = {
+    title?: string | Snippet;
+    autoPlayInterval?: number;
+  };
+
+  let {
+    title,
+    items = [],
+    type = "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"
+>
+  <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-fade-in duration-300"
+          >
+            {currentItem.title}
+          </div>
+          <p class=" text-sm mb-6 leading-relaxed animate-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 type === "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: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>