negodesign 0.0.1

package/dist/components/core/label/LabelOr.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Separator from "../../ui/separator/separator.svelte";
+  import { t } from "../../../i18n";
+
+  type Props = {
+    variant?: "SEPARATOR";
+  };
+
+  let { variant }: Props = $props();
+</script>
+
+{#if variant === "SEPARATOR"}
+  <div class="relative my-1 text-center">
+    <div class="absolute inset-0 flex items-center">
+      <Separator />
+    </div>
+    <span
+      class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
+    >
+      {$t("label.or")}
+    </span>
+  </div>
+{:else}
+  {$t("label.or")}
+{/if}

package/dist/components/core/label/LabelOr.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    variant?: "SEPARATOR";
+};
+declare const LabelOr: import("svelte").Component<Props, {}, "">;
+type LabelOr = ReturnType<typeof LabelOr>;
+export default LabelOr;

package/dist/components/core/link/link-forget-password.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.forget.password")}!
+</a>

package/dist/components/core/link/link-forget-password.svelte.d.ts

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

package/dist/components/core/link/link-privacy-polity.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.privacy-policy.label")}
+</a>

package/dist/components/core/link/link-privacy-polity.svelte.d.ts

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

package/dist/components/core/link/link-terms-of-service.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.terms-of-service.label")}
+</a>

package/dist/components/core/link/link-terms-of-service.svelte.d.ts

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

package/dist/components/core/nav/data/nav-menu-sidebar.d.ts

@@ -0,0 +1,21 @@
+import type { IconSvgElement } from "@hugeicons/svelte";
+export interface GroupMenuSidebar {
+    name: string;
+}
+export interface SubMenuSidebar {
+    title: string;
+    url: string;
+    icon: IconSvgElement;
+    isActive?: boolean;
+}
+export interface NavMenuSidebar {
+    title: string;
+    url?: string;
+    icon: IconSvgElement;
+    isActive?: boolean;
+    group?: GroupMenuSidebar;
+}
+export interface NavMenuAndSubmenuSidebar extends NavMenuSidebar {
+    submenus?: SubMenuSidebar[];
+}
+export type NavMenuItem = NavMenuSidebar | NavMenuAndSubmenuSidebar;

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

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

package/dist/components/core/nav/data/nav-top-bar-sidebar.d.ts

@@ -0,0 +1,22 @@
+export interface NavTopBarSidebarItem {
+    content: {
+        logo?: any;
+        title: string;
+        subtitle: string;
+    };
+    dropdownMenu?: {
+        header: {
+            icon?: any;
+            text: string;
+        };
+        items?: {
+            icon: any;
+            text: string;
+            onclick?: () => void;
+        }[];
+        footer?: {
+            icon?: any;
+            text: string;
+        };
+    };
+}

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

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

package/dist/components/core/nav/data/nav-user-sidebar.d.ts

@@ -0,0 +1,14 @@
+import type { IconSvgElement } from "@hugeicons/svelte";
+export interface NavUserSidebarItem {
+    user: {
+        name: string;
+        email: string;
+        avatar?: string;
+    };
+    actions?: {
+        label: string;
+        icon: IconSvgElement;
+        onclick?: () => void;
+    }[];
+    onLogout?: () => void;
+}

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

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

package/dist/components/core/nav/ui/nav-menu-bar.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  import * as Collapsible from "../../../ui/collapsible/index.js";
+  import * as Sidebar from "../../../ui/sidebar/index.js";
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type {
+    NavMenuAndSubmenuSidebar,
+    NavMenuItem,
+    NavMenuSidebar,
+  } from "../data/nav-menu-sidebar";
+
+  let {
+    items,
+  }: {
+    items: NavMenuItem[];
+  } = $props();
+
+  // Chave interna para itens sem group; nunca colide com um nome real
+  // porque não é uma string acessível a quem define os itens.
+  const UNGROUPED = Symbol("ungrouped");
+
+  function hasSubmenus(
+    item: NavMenuSidebar | NavMenuAndSubmenuSidebar,
+  ): item is NavMenuAndSubmenuSidebar {
+    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>
+                <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/core/nav/ui/nav-menu-bar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { NavMenuItem } from "../data/nav-menu-sidebar";
+type $$ComponentProps = {
+    items: NavMenuItem[];
+};
+declare const NavMenuBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavMenuBar = ReturnType<typeof NavMenuBar>;
+export default NavMenuBar;

package/dist/components/core/nav/ui/nav-menu-bottom-bar.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import * as Sidebar from "../../../ui/sidebar/index.js";
+  import type { WithoutChildren } from "../../../../utils.js";
+  import type { ComponentProps } from "svelte";
+  import type { NavMenuSidebar } from "../data/nav-menu-sidebar";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let {
+    items,
+    ...restProps
+  }: { items?: NavMenuSidebar[] } & 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>

package/dist/components/core/nav/ui/nav-menu-bottom-bar.svelte.d.ts

@@ -0,0 +1,10 @@
+import * as Sidebar from "../../../ui/sidebar/index.js";
+import type { WithoutChildren } from "../../../../utils.js";
+import type { ComponentProps } from "svelte";
+import type { NavMenuSidebar } from "../data/nav-menu-sidebar";
+type $$ComponentProps = {
+    items?: NavMenuSidebar[];
+} & WithoutChildren<ComponentProps<typeof Sidebar.Group>>;
+declare const NavMenuBottomBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavMenuBottomBar = ReturnType<typeof NavMenuBottomBar>;
+export default NavMenuBottomBar;

package/dist/components/core/nav/ui/nav-menu-header.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
+  import * as Sidebar from "../../../ui/sidebar/index.js";
+  import { useSidebar } from "../../../ui/sidebar/index.js";
+  import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+  import PlusIcon from "@lucide/svelte/icons/plus";
+
+  // This should be `Component` after @lucide/svelte updates types
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let { teams }: { teams: { name: string; logo: any; plan: string }[] } =
+    $props();
+  const sidebar = useSidebar();
+
+  // svelte-ignore state_referenced_locally
+  let activeTeam = $state(teams[0]);
+</script>
+
+<Sidebar.Menu>
+  <Sidebar.MenuItem>
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+          <Sidebar.MenuButton
+            {...props}
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <div
+              class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
+            >
+              <activeTeam.logo class="size-4" />
+            </div>
+            <div class="grid flex-1 text-start text-sm leading-tight">
+              <span class="truncate font-medium">
+                {activeTeam.name}
+              </span>
+              <span class="truncate text-xs">{activeTeam.plan}</span>
+            </div>
+            <ChevronsUpDownIcon class="ms-auto" />
+          </Sidebar.MenuButton>
+        {/snippet}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
+        align="start"
+        side={sidebar.isMobile ? "bottom" : "right"}
+        sideOffset={4}
+      >
+        <DropdownMenu.Label class="text-muted-foreground text-xs"
+          >Teams</DropdownMenu.Label
+        >
+        {#each teams as team, index (team.name)}
+          <DropdownMenu.Item
+            onSelect={() => (activeTeam = team)}
+            class="gap-2 p-2"
+          >
+            <div
+              class="flex size-6 items-center justify-center rounded-md border"
+            >
+              <team.logo class="size-3.5 shrink-0" />
+            </div>
+            {team.name}
+            <DropdownMenu.Shortcut>⌘{index + 1}</DropdownMenu.Shortcut>
+          </DropdownMenu.Item>
+        {/each}
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item class="gap-2 p-2">
+          <div
+            class="flex size-6 items-center justify-center rounded-md border bg-transparent"
+          >
+            <PlusIcon class="size-4" />
+          </div>
+          <div class="text-muted-foreground font-medium">Add team</div>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  </Sidebar.MenuItem>
+</Sidebar.Menu>

package/dist/components/core/nav/ui/nav-menu-header.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    teams: {
+        name: string;
+        logo: any;
+        plan: string;
+    }[];
+};
+declare const NavMenuHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavMenuHeader = ReturnType<typeof NavMenuHeader>;
+export default NavMenuHeader;

package/dist/components/core/nav/ui/nav-menu-top-bar.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
+	import * as Sidebar from "../../../ui/sidebar/index.js";
+	import { useSidebar } from "../../../ui/sidebar/index.js";
+	import type { NavTopBarSidebarItem } from "../data/nav-top-bar-sidebar";
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { UnfoldMoreIcon } from "@hugeicons/core-free-icons";
+
+	// This should be `Component` after @lucide/svelte updates types
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let { content, dropdownMenu }: NavTopBarSidebarItem = $props();
+	const sidebar = useSidebar();
+</script>
+
+<Sidebar.Menu>
+	<Sidebar.MenuItem>
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger>
+				{#snippet child({ props })}
+					<Sidebar.MenuButton
+						{...props}
+						size="lg"
+						class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+					>
+						<div
+							class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
+						>
+							<content.logo class="size-4" />
+						</div>
+						<div
+							class="grid flex-1 text-start text-sm leading-tight"
+						>
+							<span class="truncate font-medium">
+								{content.title}
+							</span>
+							<span class="truncate text-xs"
+								>{content.subtitle}</span
+							>
+						</div>
+						{#if dropdownMenu}
+							<HugeiconsIcon
+								icon={UnfoldMoreIcon}
+								class="ms-auto"
+							/>
+						{/if}
+					</Sidebar.MenuButton>
+				{/snippet}
+			</DropdownMenu.Trigger>
+			{#if dropdownMenu}
+				<DropdownMenu.Content
+					class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
+					align="start"
+					side={sidebar.isMobile ? "bottom" : "right"}
+					sideOffset={4}
+				>
+					{#if dropdownMenu.header}
+						<DropdownMenu.Label
+							class="text-muted-foreground text-xs"
+						>
+							{#if dropdownMenu.header.icon}
+								<dropdownMenu.header.icon
+									class="size-3.5 shrink-0"
+								/>
+							{/if}
+							{dropdownMenu.header.text}
+						</DropdownMenu.Label>
+					{/if}
+					{#each dropdownMenu.items as it, index (index)}
+						<DropdownMenu.Item
+							onSelect={it.onclick}
+							class="gap-2 p-2"
+						>
+							<div
+								class="flex size-6 items-center justify-center rounded-md border"
+							>
+								<it.icon class="size-3.5 shrink-0" />
+							</div>
+							{it.text}
+							<DropdownMenu.Shortcut>
+								⌘{index + 1}
+							</DropdownMenu.Shortcut>
+						</DropdownMenu.Item>
+					{/each}
+					{#if dropdownMenu.footer}
+						<DropdownMenu.Separator />
+						<DropdownMenu.Item class="gap-2 p-2">
+							<div
+								class="flex size-6 items-center justify-center rounded-md border bg-transparent"
+							>
+								{#if dropdownMenu.footer.icon}
+									<dropdownMenu.footer.icon class="size-4" />
+								{/if}
+							</div>
+							<div class="text-muted-foreground font-medium">
+								{dropdownMenu.footer.text}
+							</div>
+						</DropdownMenu.Item>
+					{/if}
+				</DropdownMenu.Content>
+			{/if}
+		</DropdownMenu.Root>
+	</Sidebar.MenuItem>
+</Sidebar.Menu>

package/dist/components/core/nav/ui/nav-menu-top-bar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavTopBarSidebarItem } from "../data/nav-top-bar-sidebar";
+declare const NavMenuTopBar: import("svelte").Component<NavTopBarSidebarItem, {}, "">;
+type NavMenuTopBar = ReturnType<typeof NavMenuTopBar>;
+export default NavMenuTopBar;

package/dist/components/core/nav/ui/nav-user-sidebar.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import * as Avatar from "../../../ui/avatar/index.js";
+  import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
+  import * as Sidebar from "../../../ui/sidebar/index.js";
+  import type { NavUserSidebarItem } from "../data/nav-user-sidebar";
+  import { useSidebar } from "../../../ui/sidebar/index.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import {
+    UnfoldMoreIcon,
+    Logout01Icon,
+    SparklesIcon,
+  } from "@hugeicons/core-free-icons";
+  import { t } from "../../../../i18n";
+
+  let { user: userLogged }: { user: NavUserSidebarItem } = $props();
+
+  const sidebar = useSidebar();
+</script>
+
+<Sidebar.Menu>
+  <Sidebar.MenuItem>
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+          <Sidebar.MenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            {...props}
+          >
+            <Avatar.Root class="size-8 rounded-lg">
+              <Avatar.Image
+                src={userLogged.user.avatar}
+                alt={userLogged.user.name}
+              />
+              <Avatar.Fallback class="rounded-lg">ND</Avatar.Fallback>
+            </Avatar.Root>
+            <div class="grid flex-1 text-start text-sm leading-tight">
+              <span class="truncate font-medium">{userLogged.user.name}</span>
+              <span class="truncate text-xs">{userLogged.user.email}</span>
+            </div>
+            <HugeiconsIcon icon={UnfoldMoreIcon} size={16} class="ms-auto" />
+          </Sidebar.MenuButton>
+        {/snippet}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
+        side={sidebar.isMobile ? "bottom" : "right"}
+        align="end"
+        sideOffset={4}
+      >
+        <DropdownMenu.Label class="p-0 font-normal">
+          <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+            <Avatar.Root class="size-8 rounded-lg">
+              <Avatar.Image
+                src={userLogged.user.avatar}
+                alt={userLogged.user.name}
+              />
+              <Avatar.Fallback class="rounded-lg">CN</Avatar.Fallback>
+            </Avatar.Root>
+            <div class="grid flex-1 text-start text-sm leading-tight">
+              <span class="truncate font-medium">{userLogged.user.name}</span>
+              <span class="truncate text-xs">{userLogged.user.email}</span>
+            </div>
+          </div>
+        </DropdownMenu.Label>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Group>
+          <DropdownMenu.Item>
+            <HugeiconsIcon icon={SparklesIcon} size={16} />
+            Upgrade to Pro
+          </DropdownMenu.Item>
+        </DropdownMenu.Group>
+
+        {#if userLogged.actions && userLogged.actions.length > 0}
+          <DropdownMenu.Separator />
+          <DropdownMenu.Group>
+            {#each userLogged.actions as action (action.label)}
+              <DropdownMenu.Item onclick={action.onclick}>
+                <HugeiconsIcon icon={action.icon} size={16} />
+                {action.label}
+              </DropdownMenu.Item>
+            {/each}
+          </DropdownMenu.Group>
+        {/if}
+
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item onclick={userLogged?.onLogout}>
+          <HugeiconsIcon icon={Logout01Icon} size={16} />
+          {$t("label.logout")}
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  </Sidebar.MenuItem>
+</Sidebar.Menu>

package/dist/components/core/nav/ui/nav-user-sidebar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { NavUserSidebarItem } from "../data/nav-user-sidebar";
+type $$ComponentProps = {
+    user: NavUserSidebarItem;
+};
+declare const NavUserSidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavUserSidebar = ReturnType<typeof NavUserSidebar>;
+export default NavUserSidebar;