negodesign 0.0.80 → 0.0.82

package/dist/components/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 "../../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>
+<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/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/ui/sidebar/core/MenuBarSidebar.svelte

@@ -1,70 +1,70 @@
-<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>
+<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/ui/sidebar/core/ui/navbar/NavMenuBarSidebar.svelte

@@ -1,97 +1,97 @@
-<script lang="ts">
-  import * as Collapsible from "../../../../collapsible/index.js";
-  import * as Sidebar from "../../../index.js";
-  import { ChevronRightIcon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import type {
-    NavMenuAndSubmenuSidebarProps,
-    NavMenuItem,
-    NavMenuSidebarProps,
-  } from "../../data/nav-menu-sidebar";
-
-  let {
-    items,
-  }: {
-    items: NavMenuItem[];
-  } = $props();
-
-  // Internal key for items without a group; never collides with a real name
-  // because it's not a string accessible to whoever defines the items.
-  const UNGROUPED = Symbol("ungrouped");
-
-  function hasSubmenus(
-    item: NavMenuSidebarProps | NavMenuAndSubmenuSidebarProps,
-  ): item is NavMenuAndSubmenuSidebarProps {
-    return "submenus" in item && Array.isArray(item.submenus);
-  }
-
-  let groupedItems = $derived(
-    Map.groupBy(items, (item) => item.group?.name ?? UNGROUPED),
-  );
-</script>
-
-{#snippet menuItem(item: NavMenuItem)}
-  {#if hasSubmenus(item)}
-    <Collapsible.Root open={item.isActive} class="group/collapsible">
-      {#snippet child({ props })}
-        <Sidebar.MenuItem {...props}>
-          <Collapsible.Trigger>
-            {#snippet child({ props })}
-              <Sidebar.MenuButton {...props} tooltipContent={item.title}>
-                {#if item.icon}
-                  <HugeiconsIcon icon={item.icon} />
-                {/if}
-                <span>{item.title}</span>
-                <HugeiconsIcon
-                  icon={ChevronRightIcon}
-                  class="ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
-                />
-              </Sidebar.MenuButton>
-            {/snippet}
-          </Collapsible.Trigger>
-          <Collapsible.Content>
-            <Sidebar.MenuSub>
-              {#each item.submenus ?? [] as subItem (subItem.title)}
-                <Sidebar.MenuSubItem>
-                  <Sidebar.MenuSubButton>
-                    {#snippet child({ props })}
-                      <a href={subItem.url} {...props}>
-                        <span>{subItem.title}</span>
-                      </a>
-                    {/snippet}
-                  </Sidebar.MenuSubButton>
-                </Sidebar.MenuSubItem>
-              {/each}
-            </Sidebar.MenuSub>
-          </Collapsible.Content>
-        </Sidebar.MenuItem>
-      {/snippet}
-    </Collapsible.Root>
-  {:else}
-    <Sidebar.MenuItem>
-      <Sidebar.MenuButton>
-        {#snippet child({ props })}
-          <a href={item.url} {...props}>
-            {#if item.icon}
-              <HugeiconsIcon icon={item.icon} />
-            {/if}
-            <span>{item.title}</span>
-          </a>
-        {/snippet}
-      </Sidebar.MenuButton>
-    </Sidebar.MenuItem>
-  {/if}
-{/snippet}
-
-{#each groupedItems as [groupLabel, groupItems] (typeof groupLabel === "string" ? groupLabel : "ungrouped")}
-  <Sidebar.Group>
-    {#if typeof groupLabel === "string"}
-      <Sidebar.GroupLabel>{groupLabel}</Sidebar.GroupLabel>
-    {/if}
-    <Sidebar.Menu>
-      {#each groupItems as item (item.title)}
-        {@render menuItem(item)}
-      {/each}
-    </Sidebar.Menu>
-  </Sidebar.Group>
-{/each}
+<script lang="ts">
+  import * as Collapsible from "../../../../collapsible/index.js";
+  import * as Sidebar from "../../../index.js";
+  import { ChevronRightIcon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type {
+    NavMenuAndSubmenuSidebarProps,
+    NavMenuItem,
+    NavMenuSidebarProps,
+  } from "../../data/nav-menu-sidebar";
+
+  let {
+    items,
+  }: {
+    items: NavMenuItem[];
+  } = $props();
+
+  // Internal key for items without a group; never collides with a real name
+  // because it's not a string accessible to whoever defines the items.
+  const UNGROUPED = Symbol("ungrouped");
+
+  function hasSubmenus(
+    item: NavMenuSidebarProps | NavMenuAndSubmenuSidebarProps,
+  ): item is NavMenuAndSubmenuSidebarProps {
+    return "submenus" in item && Array.isArray(item.submenus);
+  }
+
+  let groupedItems = $derived(
+    Map.groupBy(items, (item) => item.group?.name ?? UNGROUPED),
+  );
+</script>
+
+{#snippet menuItem(item: NavMenuItem)}
+  {#if hasSubmenus(item)}
+    <Collapsible.Root open={item.isActive} class="group/collapsible">
+      {#snippet child({ props })}
+        <Sidebar.MenuItem {...props}>
+          <Collapsible.Trigger>
+            {#snippet child({ props })}
+              <Sidebar.MenuButton {...props} tooltipContent={item.title}>
+                {#if item.icon}
+                  <HugeiconsIcon icon={item.icon} />
+                {/if}
+                <span>{item.title}</span>
+                <HugeiconsIcon
+                  icon={ChevronRightIcon}
+                  class="ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+                />
+              </Sidebar.MenuButton>
+            {/snippet}
+          </Collapsible.Trigger>
+          <Collapsible.Content>
+            <Sidebar.MenuSub>
+              {#each item.submenus ?? [] as subItem (subItem.title)}
+                <Sidebar.MenuSubItem>
+                  <Sidebar.MenuSubButton>
+                    {#snippet child({ props })}
+                      <a href={subItem.url} {...props}>
+                        <span>{subItem.title}</span>
+                      </a>
+                    {/snippet}
+                  </Sidebar.MenuSubButton>
+                </Sidebar.MenuSubItem>
+              {/each}
+            </Sidebar.MenuSub>
+          </Collapsible.Content>
+        </Sidebar.MenuItem>
+      {/snippet}
+    </Collapsible.Root>
+  {:else}
+    <Sidebar.MenuItem>
+      <Sidebar.MenuButton>
+        {#snippet child({ props })}
+          <a href={item.url} {...props}>
+            {#if item.icon}
+              <HugeiconsIcon icon={item.icon} />
+            {/if}
+            <span>{item.title}</span>
+          </a>
+        {/snippet}
+      </Sidebar.MenuButton>
+    </Sidebar.MenuItem>
+  {/if}
+{/snippet}
+
+{#each groupedItems as [groupLabel, groupItems] (typeof groupLabel === "string" ? groupLabel : "ungrouped")}
+  <Sidebar.Group>
+    {#if typeof groupLabel === "string"}
+      <Sidebar.GroupLabel>{groupLabel}</Sidebar.GroupLabel>
+    {/if}
+    <Sidebar.Menu>
+      {#each groupItems as item (item.title)}
+        {@render menuItem(item)}
+      {/each}
+    </Sidebar.Menu>
+  </Sidebar.Group>
+{/each}

package/dist/components/ui/sidebar/core/ui/navbar/NavMenuBottomSidebar.svelte

@@ -1,33 +1,33 @@
-<script lang="ts">
-  import * as Sidebar from "../../../index.js";
-  import type { WithoutChildren } from "../../../../../../utils.js";
-  import type { ComponentProps } from "svelte";
-  import type { NavMenuSidebarProps } from "../../data/nav-menu-sidebar";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  let {
-    items,
-    ...restProps
-  }: { items?: NavMenuSidebarProps[] } & WithoutChildren<
-    ComponentProps<typeof Sidebar.Group>
-  > = $props();
-</script>
-
-<Sidebar.Group {...restProps}>
-  <Sidebar.GroupContent>
-    <Sidebar.Menu>
-      {#each items as item (item.title)}
-        <Sidebar.MenuItem>
-          <Sidebar.MenuButton>
-            {#snippet child({ props })}
-              <a href={item.url} {...props}>
-                <HugeiconsIcon icon={item.icon} size={16} />
-                <span>{item.title}</span>
-              </a>
-            {/snippet}
-          </Sidebar.MenuButton>
-        </Sidebar.MenuItem>
-      {/each}
-    </Sidebar.Menu>
-  </Sidebar.GroupContent>
-</Sidebar.Group>
+<script lang="ts">
+  import * as Sidebar from "../../../index.js";
+  import type { WithoutChildren } from "../../../../../../utils.js";
+  import type { ComponentProps } from "svelte";
+  import type { NavMenuSidebarProps } from "../../data/nav-menu-sidebar";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let {
+    items,
+    ...restProps
+  }: { items?: NavMenuSidebarProps[] } & WithoutChildren<
+    ComponentProps<typeof Sidebar.Group>
+  > = $props();
+</script>
+
+<Sidebar.Group {...restProps}>
+  <Sidebar.GroupContent>
+    <Sidebar.Menu>
+      {#each items as item (item.title)}
+        <Sidebar.MenuItem>
+          <Sidebar.MenuButton>
+            {#snippet child({ props })}
+              <a href={item.url} {...props}>
+                <HugeiconsIcon icon={item.icon} size={16} />
+                <span>{item.title}</span>
+              </a>
+            {/snippet}
+          </Sidebar.MenuButton>
+        </Sidebar.MenuItem>
+      {/each}
+    </Sidebar.Menu>
+  </Sidebar.GroupContent>
+</Sidebar.Group>