negodesign 0.0.12 → 0.0.14

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

@@ -1,98 +1,105 @@
 <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";
+  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();
+  let {
+    logo,
+    links,
+    actions,
+    navClass = "",
+    linkClass = "",
+    buttonClass = "",
+    align = "LINK_SEPARATED_ACTIONS",
+    isLightSwitch = false,
+    isLanguageSwitcher = false,
+    onclickButtonLogin,
+    onclickButtonRegister,
+  }: NavMenuProps = $props();
 
-    const responsive = useIsMobile();
+  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>
+  <div class="flex items-center gap-2">
+    {#if isLightSwitch}
+      <LightSwitch />
+    {/if}
+    {#if isLanguageSwitcher}
+      <LanguageSwitcher />
+    {/if}
+    {#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}
-    </div>
+        {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}
+<nav
+  class={`flex items-center justify-between container py-5 md:px-5 ${navClass}`}
+>
+  {#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}
+  {#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}
 </nav>

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

@@ -0,0 +1,38 @@
+<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>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type Props = {
+    isBorderBottom?: boolean;
+    isButtonPreviousAndNext?: boolean;
+    buttonPreviousAndNextClass?: string;
+    containerClass?: string;
+    children: Snippet;
+};
+declare const CarouselSlot: import("svelte").Component<Props, {}, "">;
+type CarouselSlot = ReturnType<typeof CarouselSlot>;
+export default CarouselSlot;