negodesign 0.0.11 → 0.0.12

package/dist/components/core/carousel/ui/SimpleCarousel.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import * as Carousel from "../../../ui/carousel/index.js";
+  import type { SimpleCarouselProps } from "../types.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  const {
+    items,
+    imageClass,
+    iconClass,
+    labelClass,
+    activeClass,
+    valueActive,
+    orientation = "horizontal",
+    isBorderItem = true,
+    isBorderBottom = true,
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+  }: SimpleCarouselProps = $props();
+
+  const DEFAULT_IMG_OR_ICON_CLASS = "size-5 rounded-lg";
+</script>
+
+<nav class={`relative py-3 px-2 ${isBorderBottom ? "border-b" : ""}`}>
+  <Carousel.Root>
+    <Carousel.Content class="ml-10">
+      {#each items as item (item.value)}
+        <Carousel.Item
+          onclick={() => item.onClick?.(item.value)}
+          class={`
+          flex cursor-pointer items-center justify-center gap-1 basis-auto mx-3 pl-0
+          ${isBorderItem ? "border border-solid border-gray-300 rounded-lg" : ""} 
+          ${item.value === valueActive ? activeClass : ""}`}
+        >
+          <div class={`
+              flex gap-1 mx-2 p-0.5 justify-center items-center
+               ${orientation === "horizontal" ? "flex-row" : "flex-col"}
+          `}>
+            {#if item.image}
+              <img
+                src={item.image}
+                alt={item.label}
+                class={imageClass || DEFAULT_IMG_OR_ICON_CLASS}
+              />
+            {:else if item.icon}
+              <HugeiconsIcon
+                icon={item.icon}
+                class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
+              />
+            {/if}
+            <div class={`${labelClass}`}>{item.label}</div>
+          </div>
+        </Carousel.Item>
+      {/each}
+    </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>
+</nav>

package/dist/components/core/carousel/ui/SimpleCarousel.svelte.d.ts

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

package/dist/components/core/datatable/ui/DataTableCore.svelte

@@ -28,11 +28,11 @@
     import DataTableListPagination from "./DataTableListPagination.svelte";
 
     /**
-     * Tabela de dados genérica com paginação, ordenação e filtros.
-     * @property {DataTableItem<T>["config"]} config - Definição das colunas
-     * @property {keyof T} columnFilter - Chave para filtro por coluna
-     * @property {Component} actions - Componente de ações por linha
-     * @property {T[]} items - Dados da tabela
+     * Generic data table with pagination, sorting, and filtering.
+     * @property {DataTableItem<T>["config"]} config - Column definitions
+     * @property {keyof T} columnFilter - Key for column filtering
+     * @property {Component} actions - Per-row actions component
+     * @property {T[]} items - Table data
      */
     let { config, columnFilter, actions, items = [] }: DataTableItem<T> = $props();
 

package/dist/components/core/form/ui/input-code-otp.svelte

@@ -4,7 +4,7 @@
   import { Label } from "../../../ui/label";
   import { t } from "../../../../i18n";
 
-  /** Campo de input para código OTP com caixas configuráveis. */
+  /** OTP code input field with configurable boxes. */
   let {
     label,
     isLabel,
@@ -13,9 +13,9 @@
     separator = true,
     value = $bindable(""),
   }: InputLabelProps & {
-    /** Quantidade de caixas do código OTP. Padrão: 6 */
+    /** Number of OTP code boxes. Default: 6 */
     length?: number;
-    /** Exibir separador entre os grupos. Padrão: true */
+    /** Show separator between groups. Default: true */
     separator?: boolean;
   } = $props();
 

package/dist/components/core/form/ui/input-code-otp.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { InputLabelProps } from "../data/InputLabel.svelte";
 type $$ComponentProps = InputLabelProps & {
-    /** Quantidade de caixas do código OTP. Padrão: 6 */
+    /** Number of OTP code boxes. Default: 6 */
     length?: number;
-    /** Exibir separador entre os grupos. Padrão: true */
+    /** Show separator between groups. Default: true */
     separator?: boolean;
 };
 declare const InputCodeOtp: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/core/form/ui/input-email-or-phone.svelte

@@ -3,7 +3,7 @@
   import InputBase from "./input-base.svelte";
   import { t } from "../../../../i18n";
 
-  /** Campo de input para email com ícone e label. */
+  /** Email or phone input field with icon and label. */
   let {
     label,
     placeholder,

package/dist/components/core/form/ui/input-email.svelte

@@ -3,7 +3,7 @@
   import InputBase from "./input-base.svelte";
   import { t } from "../../../../i18n";
 
-  /** Campo de input para email com ícone e label. */
+  /** Email input field with icon and label. */
   let {
     label,
     placeholder,

package/dist/components/core/form/ui/input-password-confirm.svelte

@@ -3,7 +3,7 @@
   import InputBase from "./input-base.svelte";
   import { t } from "../../../../i18n";
 
-  /** Campo de input para confirmação de senha com ícone e label. */
+  /** Password confirmation input field with icon and label. */
   let {
     label,
     placeholder,

package/dist/components/core/form/ui/input-password.svelte

@@ -3,7 +3,7 @@
   import InputBase from "./input-base.svelte";
   import { t } from "../../../../i18n";
 
-  /** Campo de input para senha com ícone e label. */
+  /** Password input field with icon and label. */
   let {
     label,
     placeholder,

package/dist/components/core/form/ui/input-phone.svelte

@@ -4,7 +4,7 @@
   import { Label } from "../../../ui/label";
   import { t } from "../../../../i18n";
 
-  /** Campo de input para telefone com ícone e label. */
+  /** Phone input field with icon and label. */
   let {
     label,
     isLabel,

package/dist/components/core/form/ui/input-username.svelte

@@ -3,7 +3,7 @@
   import InputBase from "./input-base.svelte";
   import { t } from "../../../../i18n";
 
-  /** Campo de input para nome de usuário com ícone e label. */
+  /** Username input field with icon and label. */
   let {
     label,
     placeholder,
@@ -13,7 +13,7 @@
 </script>
 
 <InputBase
-  label={label || $t("input.usename.label")}
+  label={label || $t("input.username.label")}
   placeholder={placeholder || $t("input.username.placeholder")}
   isLabel
   isIcon

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

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

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

@@ -0,0 +1,31 @@
+import type { IconSvgElement } from "@hugeicons/svelte";
+export interface NavMenuLogoProps {
+    img?: string;
+    label: string;
+    className?: string;
+    onclick?: () => void;
+}
+export interface NavMenuLinksProps {
+    url?: string;
+    label: string;
+    icon?: IconSvgElement;
+    onclick?: () => void;
+}
+export interface NavMenuActionsProps {
+    url?: string;
+    label: string;
+    type?: 'BUTTON' | 'LINK';
+    className?: string;
+    icon?: IconSvgElement;
+    onclick?: () => void;
+}
+export interface NavMenuProps {
+    linkClass?: string;
+    buttonClass?: string;
+    logo?: NavMenuLogoProps;
+    links: NavMenuLinksProps[];
+    actions: NavMenuActionsProps[];
+    align?: 'LINK_SEPARATED_ACTIONS' | 'LINK_INTO_ACTIONS';
+    onclickButtonLogin?: () => void;
+    onclickButtonRegister?: () => void;
+}

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

@@ -1,5 +1,5 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
-export interface NavUserSidebarItem {
+export interface NavUserSidebarProps {
     user: {
         name: string;
         email: string;

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import type { NavMenuLinksProps } from "../data/nav-menu";
+    
+    type Props = {
+        links: NavMenuLinksProps[];
+        linkClass?: string;
+        groupClass?: string;
+        orientation?: "horizontal" | "vertical";
+    };
+
+    let { links, linkClass, groupClass, orientation }: Props = $props();        
+</script>
+    <ul class={`flex ${orientation === "vertical" ? "flex-col" : "items-center"}  gap-2 md:gap-5 lg:gap-15 ${groupClass}`}>
+        {#each links as item (item.label)}
+            <li>
+                <a
+                    class={`flex items-center gap-1 ${linkClass}`}
+                    href={item.url || "#"}
+                >
+                    {#if item.icon}
+                        <HugeiconsIcon icon={item.icon} size={15} />
+                    {/if}
+                    {item.label}
+                </a>
+            </li>
+        {/each}
+    </ul>

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

@@ -0,0 +1,10 @@
+import type { NavMenuLinksProps } from "../data/nav-menu";
+type Props = {
+    links: NavMenuLinksProps[];
+    linkClass?: string;
+    groupClass?: string;
+    orientation?: "horizontal" | "vertical";
+};
+declare const MenuLinks: import("svelte").Component<Props, {}, "">;
+type MenuLinks = ReturnType<typeof MenuLinks>;
+export default MenuLinks;

package/dist/components/core/nav/ui/mobile/nav-menu-drawer.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    import * as Drawer from "../../../../ui/drawer/index.js";
+    import { Button } from "../../../../ui/button/index.js";
+    import type { NavMenuLinksProps } from "../../data/nav-menu";
+    import { buttonVariants } from "../../../../ui/button/index.js";
+    import { cn } from "../../../../../utils.js";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import { Login03Icon, Menu, User03Icon } from "@hugeicons/core-free-icons";
+    import MenuLinks from "../menu-links.svelte";
+    import LightSwitch from "../../../../ui/light-switch/light-switch.svelte";
+    import LanguageSwitcher from "../../../../ui/language-switcher/language-switcher.svelte";
+    import { t } from "../../../../../i18n";
+
+    type Props = {
+        links: NavMenuLinksProps[];
+        onclickButtonLogin?: () => void;
+        onclickButtonRegister?: () => void;
+    };
+
+    const { links, onclickButtonLogin, onclickButtonRegister }: Props =
+        $props();
+</script>
+
+<div class="flex flex-wrap gap-2">
+    <Drawer.Root direction="right">
+        <Drawer.Trigger
+            class={cn(buttonVariants({ variant: "outline" }), "capitalize")}
+        >
+            <HugeiconsIcon icon={Menu} />
+        </Drawer.Trigger>
+        <Drawer.Content
+            class="data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]"
+        >
+            <Drawer.Header>
+                <Drawer.Title>{$t("label.menu")}</Drawer.Title>
+                <Drawer.Description>
+                    {$t("label.navigation.text")}
+                </Drawer.Description>
+            </Drawer.Header>
+            <div class="no-scrollbar overflow-y-auto px-4">
+                <nav>
+                    <div class="mt-5 mb-4 font-semibold">{$t("label.navigation")}</div>
+                    <MenuLinks
+                        {links}
+                        groupClass="space-y-3"
+                        orientation="vertical"
+                    />
+                </nav>
+
+                <div class="mt-5">
+                    <div class="mt-5 mb-4 font-semibold">{$t("label.action")}</div>
+                    <section >
+                        {#if onclickButtonRegister}
+                            <Button
+                                variant="outline"
+                                onclick={onclickButtonRegister}
+                            >
+                                <HugeiconsIcon icon={User03Icon} />
+                                {$t("label.register")}
+                            </Button>
+                        {/if}
+                        {#if onclickButtonLogin}
+                            <Button
+                                variant="outline"
+                                onclick={onclickButtonLogin}
+                            >
+                                <HugeiconsIcon icon={Login03Icon} />
+                                {$t("label.login")}
+                            </Button>
+                        {/if}
+                    </section>
+                </div>
+            </div>
+            <Drawer.Footer>
+                <div class="flex justify-center gap-5 py-5">
+                    <LightSwitch />
+                    <LanguageSwitcher />
+                </div>
+                <Drawer.Close class={buttonVariants({ variant: "outline" })}>
+                    {$t("label.close")}
+                </Drawer.Close>
+            </Drawer.Footer>
+        </Drawer.Content>
+    </Drawer.Root>
+</div>

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

@@ -0,0 +1,9 @@
+import type { NavMenuLinksProps } from "../../data/nav-menu";
+type Props = {
+    links: NavMenuLinksProps[];
+    onclickButtonLogin?: () => void;
+    onclickButtonRegister?: () => void;
+};
+declare const NavMenuDrawer: import("svelte").Component<Props, {}, "">;
+type NavMenuDrawer = ReturnType<typeof NavMenuDrawer>;
+export default NavMenuDrawer;

package/dist/components/core/nav/ui/{nav-menu-bottom-bar.svelte → nav-menu-bottom-sidebar.svelte}

@@ -2,13 +2,13 @@
   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 type { NavMenuSidebarProps } from "../data/nav-menu-sidebar";
   import { HugeiconsIcon } from "@hugeicons/svelte";
 
   let {
     items,
     ...restProps
-  }: { items?: NavMenuSidebar[] } & WithoutChildren<
+  }: { items?: NavMenuSidebarProps[] } & WithoutChildren<
     ComponentProps<typeof Sidebar.Group>
   > = $props();
 </script>

package/dist/components/core/nav/ui/nav-menu-bottom-sidebar.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 { NavMenuSidebarProps } from "../data/nav-menu-sidebar";
+type $$ComponentProps = {
+    items?: NavMenuSidebarProps[];
+} & WithoutChildren<ComponentProps<typeof Sidebar.Group>>;
+declare const NavMenuBottomSidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavMenuBottomSidebar = ReturnType<typeof NavMenuBottomSidebar>;
+export default NavMenuBottomSidebar;

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

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

package/dist/components/core/nav/ui/{nav-menu-bar.svelte → nav-menu-sidebar.svelte}

@@ -1,13 +1,13 @@
-<script lang="ts">
+<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,
+    NavMenuAndSubmenuSidebarProps,
     NavMenuItem,
-    NavMenuSidebar,
+    NavMenuSidebarProps,
   } from "../data/nav-menu-sidebar";
 
   let {
@@ -16,13 +16,13 @@
     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.
+  // 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: NavMenuSidebar | NavMenuAndSubmenuSidebar,
-  ): item is NavMenuAndSubmenuSidebar {
+    item: NavMenuSidebarProps | NavMenuAndSubmenuSidebarProps,
+  ): item is NavMenuAndSubmenuSidebarProps {
     return "submenus" in item && Array.isArray(item.submenus);
   }
 

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

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

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

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

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

@@ -0,0 +1,98 @@
+<script lang="ts">
+    import { Button } from "../../../ui/button/index.js";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import type { NavMenuProps } from "../data/nav-menu";
+    import LightSwitch from "../../../ui/light-switch/light-switch.svelte";
+    import LanguageSwitcher from "../../../ui/language-switcher/language-switcher.svelte";
+    import { t } from "../../../../i18n";
+    import { Login03Icon, User03Icon } from "@hugeicons/core-free-icons";
+    import { useIsMobile } from "../../../../hooks/responsive.svelte";
+    import NavMenuDrawer from "./mobile/nav-menu-drawer.svelte";
+    import MenuLinks from "./menu-links.svelte";
+
+    let {
+        logo,
+        links,
+        actions,
+        linkClass = "",
+        buttonClass = "",
+        align = "LINK_SEPARATED_ACTIONS",
+        onclickButtonLogin,
+        onclickButtonRegister,
+    }: NavMenuProps = $props();
+
+    const responsive = useIsMobile();
+</script>
+
+{#snippet actionButtons()}
+    <div class="flex items-center gap-2">
+        <LightSwitch />
+        <LanguageSwitcher />
+        {#each actions as item (item.label)}
+            <Button
+                variant={item.type === "LINK" ? "ghost" : "outline"}
+                class={item.className}
+                onclick={item.onclick}
+            >
+                {#if item.icon}
+                    <HugeiconsIcon icon={item.icon} />
+                {/if}
+                {item.label}
+            </Button>
+        {/each}
+        {#if onclickButtonRegister}
+            <Button
+                variant="outline"
+                onclick={onclickButtonRegister}
+                class={buttonClass}
+            >
+                <HugeiconsIcon icon={User03Icon} />
+                {$t("label.register")}
+            </Button>
+        {/if}
+        {#if onclickButtonLogin}
+            <Button
+                variant="outline"
+                onclick={onclickButtonLogin}
+                class={buttonClass}
+            >
+                <HugeiconsIcon icon={Login03Icon} />
+                {$t("label.login")}
+            </Button>
+        {/if}
+    </div>
+{/snippet}
+
+<nav class="flex items-center justify-between container py-5 md:px-5">
+    {#if logo}
+        <div>
+            {#if logo.img}
+                <img
+                    src={logo.img}
+                    alt="logo of site"
+                    class={`max-h-50 ${logo.className}`}
+                />
+            {:else if logo.label}
+                <span class={logo.className}>{logo.label}</span>
+            {/if}
+        </div>
+    {:else}
+        <div>
+            <span class="hidden">Logo</span>
+        </div>
+    {/if}
+
+    {#if responsive.isMobile}
+        <NavMenuDrawer {links} {onclickButtonLogin} {onclickButtonRegister} />
+    {:else}
+        {#if align === "LINK_SEPARATED_ACTIONS"}
+            <MenuLinks {links} {linkClass} orientation="horizontal" />
+            {@render actionButtons()}
+        {:else if align === "LINK_INTO_ACTIONS"}
+            <div class="flex items-center gap-2">
+                <MenuLinks {links} {linkClass} orientation="vertical" />
+                {@render actionButtons()}
+            </div>
+        {/if}
+    {/if}
+</nav>

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

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

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

@@ -2,7 +2,7 @@
   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 type { NavUserSidebarProps } from "../data/nav-user-sidebar";
   import { useSidebar } from "../../../ui/sidebar/index.js";
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import {
@@ -12,7 +12,7 @@
   } from "@hugeicons/core-free-icons";
   import { t } from "../../../../i18n";
 
-  let { user: userLogged }: { user: NavUserSidebarItem } = $props();
+  let { user: userLogged }: { user: NavUserSidebarProps } = $props();
 
   const sidebar = useSidebar();
 </script>

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

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-  import type { CarouselProps } from "../carousel/data/CarouselModel";
+  import type { LoginCarouselProps } from "../../pages/security/login/types";
   import type { Snippet } from "svelte";
   import Button from "../../ui/button/button.svelte";
   import { t } from "../../../i18n";
@@ -18,7 +18,7 @@
     items = [],
     variant = "DOT",
     autoPlayInterval = 5000,
-  }: Props & CarouselProps = $props();
+  }: Props & LoginCarouselProps = $props();
 
   let currentIndex = $state(0);
   let currentItem = $derived(items[currentIndex] ?? items[0]);
@@ -53,7 +53,7 @@
   </div>
 
   <section class="flex flex-col gap-5">
-    <div class="my-auto max-w-sm md:max-w-md lg:max-w-[430px]">
+    <div class="my-auto max-w-sm md:max-w-md lg:max-w-100">
       {#if currentItem}
         {#key currentIndex}
           <div