negodesign 0.0.10 → 0.0.12

package/dist/components/NegoDesign.svelte

@@ -8,7 +8,7 @@
     translations,
     children,
   }: {
-    /** Traduções customizadas por idioma. São mergeadas com as traduções base da lib. */
+    /** Custom translations per language. Merged with the library's base translations. */
     translations?: Translations;
     children: any;
   } = $props();

package/dist/components/NegoDesign.svelte.d.ts

@@ -1,6 +1,6 @@
 type Translations = Record<string, Record<string, string>>;
 type $$ComponentProps = {
-    /** Traduções customizadas por idioma. São mergeadas com as traduções base da lib. */
+    /** Custom translations per language. Merged with the library's base translations. */
     translations?: Translations;
     children: any;
 };

package/dist/components/core/button/ButtonBack.svelte

@@ -14,5 +14,5 @@
   {...restProps}
 >
   <HugeiconsIcon icon={ArrowLeft01Icon} size={16} />
-  <span class="sr-only">{$t("button.back")}</span>
+  <span class="sr-only">{$t("label.back")}</span>
 </Button>

package/dist/components/core/button/ButtonLogin.svelte

@@ -11,5 +11,5 @@
 
 <Button class="w-full flex items-center gap-2" {...restProps}>
   <HugeiconsIcon icon={Login02Icon} size={16} />
-  {$t("button.login")}
+  {$t("label.login")}
 </Button>

package/dist/components/core/button/ButtonLoginWith.svelte

@@ -53,5 +53,5 @@
       <HugeiconsIcon icon={resolvedIcon} size={16} />
     {/if}
   {/if}
-  {$t("button.login.with", { name: resolvedLabel })}
+  {$t("label.login.with", { name: resolvedLabel })}
 </Button>

package/dist/components/core/button/ButtonSend.svelte

@@ -11,5 +11,5 @@
 
 <Button class="w-full flex items-center gap-2" {...restProps}>
   <HugeiconsIcon icon={Login02Icon} size={16} />
-  {$t("button.send")}
+  {$t("label.send")}
 </Button>

package/dist/components/core/card/media/01/CardMedia01.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+    /**
+     * Card component with a title and content.
+     * @component
+     */
+    import {
+        InformationCircleIcon,
+        UserIcon,
+    } from "@hugeicons/core-free-icons";
+    import { t } from "../../../../../i18n";
+    import type { CardMediaProps } from "../../types";
+    import CardStarRating from "../../shared/CardStarRating.svelte";
+    import CardDescription from "../../shared/CardDescription.svelte";
+    import CardTags from "../../shared/CardTags.svelte";
+    import CardThumbnailVideo from "../../shared/CardThumbnailVideo.svelte";
+    import CardButton from "../../shared/CardButton.svelte";
+    import CardFavorite from "../../shared/CardFavorite.svelte";
+
+    let {
+        id,
+        tags,
+        logo,
+        title,
+        content,
+        imageUrl,
+        videoUrl,
+        //videoAction,
+        startNumber,
+        startMax = 5,
+        isImageButtonMaximized = false,
+        isVideoButtonMaximized = false,
+        isTagBorderBottom = false,
+        isFavorite = false,
+        buttonProfileClass,
+        buttonDetailsClass,
+        onFavoriteClick,
+        onButtonProfile,
+        onButtonDetails,
+    }: CardMediaProps = $props();
+
+    let isShowButtonProfileAndDetails = $derived(
+        onButtonProfile != null && onButtonDetails != null,
+    );
+</script>
+
+<article
+    class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3"
+>
+    <div class="flex justify-between items-center w-full mb-4">
+        <div class="flex justify-start gap-2">
+            <div class="flex justify-center items-center">
+                {#if logo}
+                    <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
+                {/if}
+            </div>
+            <div class="flex-col">
+                {#if title}
+                    <div class="text-center font-bold text-lg">{title}</div>
+                {/if}
+                {#if startNumber}
+                    <CardStarRating startNumber={startNumber} startMax={startMax} />
+                {/if}
+            </div>
+        </div>
+        <div class="flex justify-end items-center">
+            <CardFavorite
+                isFavorite={isFavorite}
+                onFavoriteClick={() => onFavoriteClick!(id)}
+            />
+        </div>
+    </div>
+
+    <div class="h-15 my-2">
+        <CardDescription content={content}/>
+    </div>
+
+    <CardTags
+        className="my-6"
+        tags={tags ?? []}
+        isTagBorderBottom={isTagBorderBottom}
+    />    
+    
+    <CardThumbnailVideo
+        {imageUrl}
+        {videoUrl}
+        {isImageButtonMaximized}
+        {isVideoButtonMaximized}
+    />
+
+    {#if onButtonProfile || onButtonDetails}
+        <div class="flex justify-center items-center gap-2 mt-4 w-full">
+            {#if onButtonProfile}
+                <CardButton
+                    id={id}
+                    icon={UserIcon}
+                    className={buttonProfileClass}
+                    text={$t("label.view.profile")}
+                    onClick={onButtonProfile}
+                    isFlex={isShowButtonProfileAndDetails}
+                />
+            {/if}
+            {#if onButtonDetails}
+                <CardButton
+                    id={id}
+                    icon={InformationCircleIcon}
+                    className={buttonDetailsClass}
+                    text={$t("label.more.details")}
+                    onClick={onButtonDetails}
+                    isFlex={isShowButtonProfileAndDetails}
+                />
+            {/if}
+        </div>
+    {/if}
+</article>

package/dist/components/core/card/media/01/CardMedia01.svelte.d.ts

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

package/dist/components/core/card/media/02/CardMedia02.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+    /**
+     * Card component with a title and content.
+     * @component
+     */
+    import {
+        InformationCircleIcon,
+        UserIcon,
+    } from "@hugeicons/core-free-icons";
+    import { t } from "../../../../../i18n";
+    import type { CardMediaProps } from "../../types";
+    import CardStarRating from "../../shared/CardStarRating.svelte";
+    import CardTags from "../../shared/CardTags.svelte";
+    import CardDescription from "../../shared/CardDescription.svelte";
+    import CardThumbnailVideo from "../../shared/CardThumbnailVideo.svelte";
+    import CardButton from "../../shared/CardButton.svelte";
+    import CardFavorite from "../../shared/CardFavorite.svelte";
+    let {
+        id,
+        tags,
+        logo,
+        title,
+        content,
+        className,
+        imageUrl,
+        videoUrl,
+        //videoAction,
+        startNumber,
+        startMax = 5,
+        isImageButtonMaximized = false,
+        isVideoButtonMaximized = false,
+        isTagBorderBottom = false,
+        isFavorite = false,
+        buttonProfileClass,
+        buttonDetailsClass,
+        onFavoriteClick,
+        onButtonProfile,
+        onButtonDetails,
+    }: CardMediaProps = $props();
+
+    let isShowButtonProfileAndDetails = $derived(
+        onButtonProfile != null && onButtonDetails != null,
+    );
+</script>
+
+<article
+    class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3 {className}"
+>
+    <div class="flex flex-col justify-center items-center w-full relative">
+        <div class="flex flex-col justify-start gap-2">
+            <div class="flex justify-center items-center">
+                {#if logo}
+                    <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
+                {/if}
+            </div>
+            <div class="flex flex-col justify-center items-center">
+                {#if title}
+                    <div class="text-center font-bold text-lg">{title}</div>
+                {/if}
+                {#if startNumber}
+                    <CardStarRating startNumber={startNumber} startMax={startMax} />
+                {/if}
+            </div>
+        </div>
+        <div class="flex justify-end items-center absolute top-0 right-0">
+            <CardFavorite
+                isFavorite={isFavorite}
+                onFavoriteClick={() => onFavoriteClick!(id)}
+            />
+        </div>
+        <CardTags
+            className="my-4"
+            tags={tags ?? []}
+            {isTagBorderBottom}
+        />
+    </div>
+
+    <div class="h-15 mb-8">
+        <CardDescription {content} />
+    </div>
+
+    <CardThumbnailVideo
+        {imageUrl}
+        {videoUrl}
+        {isImageButtonMaximized}
+        {isVideoButtonMaximized}
+    />
+
+    {#if onButtonProfile || onButtonDetails}
+        <div class="flex justify-center items-center gap-2 mt-4 w-full">
+            {#if onButtonProfile}
+                <CardButton
+                    {id}
+                    icon={UserIcon}
+                    className={buttonProfileClass}
+                    text={$t("label.view.profile")}
+                    onClick={onButtonProfile}
+                    isFlex={isShowButtonProfileAndDetails}
+                />
+            {/if}
+            {#if onButtonDetails}
+                <CardButton
+                    {id}
+                    icon={InformationCircleIcon}
+                    className={buttonDetailsClass}
+                    text={$t("label.more.details")}
+                    onClick={onButtonDetails}
+                    isFlex={isShowButtonProfileAndDetails}
+                />
+            {/if}
+        </div>
+    {/if}
+</article>

package/dist/components/core/card/media/02/CardMedia02.svelte.d.ts

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

package/dist/components/core/card/media/CardMedia.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import type { CardMediaProps } from "../types";
+    import CardMedia01 from "./01/CardMedia01.svelte";
+    import CardMedia02 from "./02/CardMedia02.svelte";
+
+    type Props = {
+        variant?: 1 | 2;
+    };
+
+    let { variant, ...restProps }: CardMediaProps & Props = $props();
+</script>
+
+{#if variant === 2}
+  <CardMedia02 {...restProps} />
+{:else}
+  <CardMedia01 {...restProps} />
+{/if}

package/dist/components/core/card/media/CardMedia.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CardMediaProps } from "../types";
+type Props = {
+    variant?: 1 | 2;
+};
+type $$ComponentProps = CardMediaProps & Props;
+declare const CardMedia: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardMedia = ReturnType<typeof CardMedia>;
+export default CardMedia;

package/dist/components/core/card/media/data.d.ts

@@ -0,0 +1,3 @@
+import type { CardMediaProps } from "../types";
+declare const items: CardMediaProps[];
+export default items;

package/dist/components/core/card/media/data.js

@@ -0,0 +1,117 @@
+import { GlobalIcon, MapPin, NecklaceIcon } from "@hugeicons/core-free-icons";
+const items = [
+    {
+        id: 1,
+        logo: 'https://api.dicebear.com/9.x/initials/svg?seed=Hotel%20Baía%20Azul&backgroundColor=1a2420&textColor=e3b563',
+        title: 'Hotel Baía Azul',
+        content: 'Hotel à beira-mar com vista panorâmica sobre a baía, piscina infinita e restaurante gastronómico. Resort tropical rodeado de jardins, com acesso direto à praia e atividades para toda a família Resort tropical rodeado de jardins, com acesso direto à praia e atividades para toda a família',
+        startNumber: 5,
+        startMax: 5,
+        imageUrl: 'https://picsum.photos/seed/hotel-baia-azul/800/600',
+        videoUrl: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
+        isFavorite: true,
+        tags: [
+            {
+                icon: GlobalIcon,
+                text: 'Luanda',
+            },
+            {
+                icon: MapPin,
+                text: 'Kilamba',
+            },
+            {
+                icon: NecklaceIcon,
+                text: 'Rua 19',
+            },
+        ],
+    },
+    {
+        id: 2,
+        logo: 'https://api.dicebear.com/9.x/initials/svg?seed=Miramar%20Suites&backgroundColor=1a2420&textColor=e3b563',
+        title: 'Miramar Suites',
+        content: 'Suítes modernas no coração da cidade, com spa completo e serviço de quarto 24 horas.',
+        startNumber: 4,
+        startMax: 5,
+        imageUrl: 'https://picsum.photos/seed/miramar-suites/800/600',
+        videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
+        tags: [
+            {
+                icon: GlobalIcon,
+                text: 'Benguela',
+            },
+            {
+                icon: MapPin,
+                text: 'Catumbela',
+            },
+            {
+                icon: GlobalIcon,
+                text: 'Luanda',
+            },
+            {
+                icon: MapPin,
+                text: 'Kilamba',
+            },
+        ],
+    },
+    {
+        id: 3,
+        logo: 'https://api.dicebear.com/9.x/initials/svg?seed=Palm%20Resort&backgroundColor=1a2420&textColor=e3b563',
+        title: 'Palm Resort & Spa',
+        content: 'Resort tropical rodeado de jardins, com acesso direto à praia e atividades para toda a família.',
+        startNumber: 5,
+        startMax: 5,
+        imageUrl: 'https://picsum.photos/seed/palm-resort/800/600',
+        videoUrl: 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4',
+        isFavorite: true,
+        tags: [
+            {
+                icon: GlobalIcon,
+                text: 'Huíla',
+            },
+            {
+                icon: MapPin,
+                text: 'Huíla',
+            },
+        ],
+    },
+    {
+        id: 4,
+        logo: 'https://api.dicebear.com/9.x/initials/svg?seed=Hotel%20Central%20Park&backgroundColor=1a2420&textColor=e3b563',
+        title: 'Hotel Central Park',
+        content: 'Localização privilegiada no centro urbano, ideal para viagens de negócios, com centro de conferências.',
+        startNumber: 3,
+        startMax: 5,
+        imageUrl: 'https://picsum.photos/seed/hotel-central-park/800/600',
+        videoUrl: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/coffee.mp4',
+        tags: [
+            {
+                icon: NecklaceIcon,
+                text: 'Rua 19',
+            },
+            {
+                icon: GlobalIcon,
+                text: 'Luanda',
+            },
+            {
+                icon: MapPin,
+                text: 'Kilamba',
+            },
+            {
+                icon: NecklaceIcon,
+                text: 'Rua 19',
+            },
+        ]
+    },
+    {
+        id: 5,
+        logo: 'https://api.dicebear.com/9.x/initials/svg?seed=Villa%20Serena&backgroundColor=1a2420&textColor=e3b563',
+        title: 'Villa Serena Boutique',
+        content: 'Boutique hotel intimista com decoração exclusiva, café da manhã artesanal e vista para as montanhas.',
+        startNumber: 4,
+        startMax: 5,
+        imageUrl: 'https://picsum.photos/seed/villa-serena/800/600',
+        videoUrl: 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4',
+        isFavorite: true,
+    },
+];
+export default items;

package/dist/components/core/card/profile/01/CardProfile01.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+    /**
+     * Card component with a title and content.
+     * @component
+     */
+    import {
+        InformationCircleIcon,
+        UserIcon,
+    } from "@hugeicons/core-free-icons";
+    import { t } from "../../../../../i18n";
+    import type { CardProfileProps } from "../../types";
+    import CardStarRating from "../../shared/CardStarRating.svelte";
+    import CardDescription from "../../shared/CardDescription.svelte";
+    import CardTags from "../../shared/CardTags.svelte";
+    import CardButton from "../../shared/CardButton.svelte";
+    import CardFavorite from "../../shared/CardFavorite.svelte";
+
+    let {
+        id,
+        tags,
+        logo,
+        title,
+        content,
+        startNumber,
+        startMax = 5,
+        isTagBorderBottom = true,
+        isFavorite = false,
+        buttonProfileClass,
+        buttonDetailsClass,
+        onFavoriteClick,
+        onButtonProfile,
+        onButtonDetails,
+    }: CardProfileProps = $props();
+
+    let isShowButtonProfileAndDetails = $derived(
+        onButtonProfile != null && onButtonDetails != null,
+    );
+</script>
+
+<article
+    class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3"
+>
+    <div class="flex justify-between items-center w-full mb-4">
+        <div class="flex justify-start gap-2">
+            <div class="flex justify-center items-center">
+                {#if logo}
+                    <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
+                {/if}
+            </div>
+            <div class="flex-col">
+                {#if title}
+                    <div class="text-center font-bold text-lg">{title}</div>
+                {/if}
+                {#if startNumber}
+                    <CardStarRating startNumber={startNumber} startMax={startMax} />
+                {/if}
+            </div>
+        </div>
+        <div class="flex justify-end items-center">
+            <CardFavorite
+                isFavorite={isFavorite}
+                onFavoriteClick={() => onFavoriteClick!(id)}
+            />
+        </div>
+    </div>
+
+    <div class="h-15 my-2">
+        <CardDescription content={content}/>
+    </div>
+
+    <CardTags
+        className="my-6"
+        tags={tags ?? []}
+        isTagBorderBottom={isTagBorderBottom}
+    />    
+
+    {#if onButtonProfile || onButtonDetails}
+        <div class="flex justify-center items-center gap-2 mt-4 w-full">
+            {#if onButtonProfile}
+                <CardButton
+                    id={id}
+                    icon={UserIcon}
+                    className={buttonProfileClass}
+                    text={$t("label.view.profile")}
+                    onClick={onButtonProfile}
+                    isFlex={isShowButtonProfileAndDetails}
+                />
+            {/if}
+            {#if onButtonDetails}
+                <CardButton
+                    id={id}
+                    icon={InformationCircleIcon}
+                    className={buttonDetailsClass}
+                    text={$t("label.more.details")}
+                    onClick={onButtonDetails}
+                    isFlex={isShowButtonProfileAndDetails}
+                />
+            {/if}
+        </div>
+    {/if}
+</article>

package/dist/components/core/card/profile/01/CardProfile01.svelte.d.ts

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

package/dist/components/core/card/profile/02/CardProfile02.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+    /**
+     * Card component with a title and content.
+     * @component
+     */
+    import {
+        InformationCircleIcon,
+        UserIcon,
+    } from "@hugeicons/core-free-icons";
+    import { t } from "../../../../../i18n";
+    import type { CardProfileProps } from "../../types";
+    import CardStarRating from "../../shared/CardStarRating.svelte";
+    import CardTags from "../../shared/CardTags.svelte";
+    import CardDescription from "../../shared/CardDescription.svelte";
+    import CardButton from "../../shared/CardButton.svelte";
+    import CardFavorite from "../../shared/CardFavorite.svelte";
+    let {
+        id,
+        tags,
+        logo,
+        title,
+        content,
+        className,
+        startNumber,
+        startMax = 5,
+        isTagBorderBottom = true,
+        isFavorite = false,
+        buttonProfileClass,
+        buttonDetailsClass,
+        onFavoriteClick,
+        onButtonProfile,
+        onButtonDetails,
+    }: CardProfileProps = $props();
+
+    let isShowButtonProfileAndDetails = $derived(
+        onButtonProfile != null && onButtonDetails != null,
+    );
+</script>
+
+<article
+    class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3 {className}"
+>
+    <div class="flex flex-col justify-center items-center w-full relative">
+        <div class="flex flex-col justify-start gap-2">
+            <div class="flex justify-center items-center">
+                {#if logo}
+                    <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
+                {/if}
+            </div>
+            <div class="flex flex-col justify-center items-center">
+                {#if title}
+                    <div class="text-center font-bold text-lg">{title}</div>
+                {/if}
+                {#if startNumber}
+                    <CardStarRating {startNumber} {startMax} />
+                {/if}
+            </div>
+        </div>
+        <div class="flex justify-end items-center absolute top-0 right-0">
+            <CardFavorite
+                {isFavorite}
+                onFavoriteClick={() => onFavoriteClick!(id)}
+            />
+        </div>
+    </div>
+
+    <div class="h-15 mb-8">
+        <CardDescription {content} />
+    </div>
+
+    <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom}/>
+
+    {#if onButtonProfile || onButtonDetails}
+        <div class="flex justify-center items-center gap-2 mt-4 w-full">
+            {#if onButtonProfile}
+                <CardButton
+                    {id}
+                    icon={UserIcon}
+                    className={buttonProfileClass}
+                    text={$t("label.view.profile")}
+                    onClick={onButtonProfile}
+                    isFlex={isShowButtonProfileAndDetails}
+                />
+            {/if}
+            {#if onButtonDetails}
+                <CardButton
+                    {id}
+                    icon={InformationCircleIcon}
+                    className={buttonDetailsClass}
+                    text={$t("label.more.details")}
+                    onClick={onButtonDetails}
+                    isFlex={isShowButtonProfileAndDetails}
+                />
+            {/if}
+        </div>
+    {/if}
+</article>

package/dist/components/core/card/profile/02/CardProfile02.svelte.d.ts

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

package/dist/components/core/card/profile/CardProfile.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import type { CardProfileProps } from "../types";
+    import CardProfile01 from "./01/CardProfile01.svelte";
+    import CardProfile02 from "./02/CardProfile02.svelte";
+
+    type Props = {
+        variant?: 1 | 2;
+    };
+
+    let { variant, ...restProps }: CardProfileProps & Props = $props();
+</script>
+
+{#if variant === 2}
+  <CardProfile02 {...restProps} />
+{:else}
+  <CardProfile01 {...restProps} />
+{/if}