negodesign 0.0.24 → 0.0.25

package/dist/components/core/breadcrumb/breadcrumb-list.svelte

@@ -1,32 +1,32 @@
-<script lang="ts">
-  import * as Breadcrumb from "../../ui/breadcrumb/index.js";
-
-  type Props = {
-    items: {
-      url?: string;
-      label: string;
-    }[];
-  };
-
-  let { items }: Props = $props();
-</script>
-
-<Breadcrumb.Root>
-  <Breadcrumb.List>
-    {#each items as item, i (item.label)}
-      {@const isLast = i === items.length - 1}
-
-      <Breadcrumb.Item class={isLast ? "" : "hidden md:block"}>
-        {#if isLast}
-          <Breadcrumb.Page>{item.label}</Breadcrumb.Page>
-        {:else}
-          <Breadcrumb.Link href={item.url ?? "##"}>{item.label}</Breadcrumb.Link>
-        {/if}
-      </Breadcrumb.Item>
-
-      {#if !isLast}
-        <Breadcrumb.Separator class="hidden md:block" />
-      {/if}
-    {/each}
-  </Breadcrumb.List>
+<script lang="ts">
+  import * as Breadcrumb from "../../ui/breadcrumb/index.js";
+
+  type Props = {
+    items: {
+      url?: string;
+      label: string;
+    }[];
+  };
+
+  let { items }: Props = $props();
+</script>
+
+<Breadcrumb.Root>
+  <Breadcrumb.List>
+    {#each items as item, i (item.label)}
+      {@const isLast = i === items.length - 1}
+
+      <Breadcrumb.Item class={isLast ? "" : "hidden md:block"}>
+        {#if isLast}
+          <Breadcrumb.Page>{item.label}</Breadcrumb.Page>
+        {:else}
+          <Breadcrumb.Link href={item.url ?? "##"}>{item.label}</Breadcrumb.Link>
+        {/if}
+      </Breadcrumb.Item>
+
+      {#if !isLast}
+        <Breadcrumb.Separator class="hidden md:block" />
+      {/if}
+    {/each}
+  </Breadcrumb.List>
 </Breadcrumb.Root>

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

@@ -1,18 +1,18 @@
-<script lang="ts">
-  import Button from "../../ui/button/button.svelte";
-  import { ArrowLeft01Icon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { t } from "../../../i18n";
-  import type { ButtonProps } from "../../ui/button";
-
-  let { ...restProps }: ButtonProps = $props();
-</script>
-
-<Button
-  variant="outline"
-  class="inline-flex items-center gap-1 text-sm text-slate-600 hover:text-slate-900 transition-colors rounded-full bg-input"
-  {...restProps}
->
-  <HugeiconsIcon icon={ArrowLeft01Icon} size={16} />
-  <span class="sr-only">{$t("label.back")}</span>
-</Button>
+<script lang="ts">
+  import Button from "../../ui/button/button.svelte";
+  import { ArrowLeft01Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { t } from "../../../i18n";
+  import type { ButtonProps } from "../../ui/button";
+
+  let { ...restProps }: ButtonProps = $props();
+</script>
+
+<Button
+  variant="outline"
+  class="inline-flex items-center gap-1 text-sm text-slate-600 hover:text-slate-900 transition-colors rounded-full bg-input"
+  {...restProps}
+>
+  <HugeiconsIcon icon={ArrowLeft01Icon} size={16} />
+  <span class="sr-only">{$t("label.back")}</span>
+</Button>

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

@@ -1,15 +1,15 @@
-<script lang="ts">
-  import Button, {
-    type ButtonProps,
-  } from "../../ui/button/button.svelte";
-  import { t } from "../../../i18n";
-  import { Login02Icon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  let { ...restProps }: ButtonProps = $props();
-</script>
-
-<Button class="w-full flex items-center gap-2" {...restProps}>
-  <HugeiconsIcon icon={Login02Icon} size={16} />
-  {$t("label.login")}
-</Button>
+<script lang="ts">
+  import Button, {
+    type ButtonProps,
+  } from "../../ui/button/button.svelte";
+  import { t } from "../../../i18n";
+  import { Login02Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let { ...restProps }: ButtonProps = $props();
+</script>
+
+<Button class="w-full flex items-center gap-2" {...restProps}>
+  <HugeiconsIcon icon={Login02Icon} size={16} />
+  {$t("label.login")}
+</Button>

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

@@ -1,57 +1,57 @@
-<script lang="ts">
-  import Button, {
-    type ButtonProps,
-  } from "../../ui/button/button.svelte";
-  import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
-  import { t } from "../../../i18n";
-  import {
-    GoogleIcon,
-    Facebook01Icon as Facebook,
-    Linkedin01Icon as Linkedin,
-  } from "@hugeicons/core-free-icons";
-  import type { Snippet } from "svelte";
-
-  type IconDefault = "GOOGLE" | "FACEBOOK" | "LINKEDLN";
-
-  type Props = {
-    icon?: IconSvgElement | IconDefault | Snippet;
-    label?: string;
-  };
-
-  let { icon, label, ...restProps }: Props & ButtonProps = $props();
-
-  const defaultIconMap: Record<IconDefault, IconSvgElement> = {
-    GOOGLE: GoogleIcon,
-    FACEBOOK: Facebook,
-    LINKEDLN: Linkedin,
-  };
-
-  const defaultLabelMap: Record<IconDefault, string> = {
-    GOOGLE: "Google",
-    FACEBOOK: "Facebook",
-    LINKEDLN: "Linkedin",
-  };
-
-  function isIconDefault(value: unknown): value is IconDefault {
-    return typeof value === "string" && value in defaultLabelMap;
-  }
-
-  let resolvedIcon = $derived(
-    isIconDefault(icon) ? defaultIconMap[icon] : icon,
-  );
-
-  let resolvedLabel = $derived(
-    label ?? (isIconDefault(icon) ? defaultLabelMap[icon] : ""),
-  );
-</script>
-
-<Button variant="outline" class="w-full flex items-center gap-2" {...restProps}>
-  {#if resolvedIcon}
-    {#if typeof resolvedIcon === "function"}
-      {@render resolvedIcon()}
-    {:else}
-      <HugeiconsIcon icon={resolvedIcon} size={16} />
-    {/if}
-  {/if}
-  {$t("label.login.with", { name: resolvedLabel })}
-</Button>
+<script lang="ts">
+  import Button, {
+    type ButtonProps,
+  } from "../../ui/button/button.svelte";
+  import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
+  import { t } from "../../../i18n";
+  import {
+    GoogleIcon,
+    Facebook01Icon as Facebook,
+    Linkedin01Icon as Linkedin,
+  } from "@hugeicons/core-free-icons";
+  import type { Snippet } from "svelte";
+
+  type IconDefault = "GOOGLE" | "FACEBOOK" | "LINKEDLN";
+
+  type Props = {
+    icon?: IconSvgElement | IconDefault | Snippet;
+    label?: string;
+  };
+
+  let { icon, label, ...restProps }: Props & ButtonProps = $props();
+
+  const defaultIconMap: Record<IconDefault, IconSvgElement> = {
+    GOOGLE: GoogleIcon,
+    FACEBOOK: Facebook,
+    LINKEDLN: Linkedin,
+  };
+
+  const defaultLabelMap: Record<IconDefault, string> = {
+    GOOGLE: "Google",
+    FACEBOOK: "Facebook",
+    LINKEDLN: "Linkedin",
+  };
+
+  function isIconDefault(value: unknown): value is IconDefault {
+    return typeof value === "string" && value in defaultLabelMap;
+  }
+
+  let resolvedIcon = $derived(
+    isIconDefault(icon) ? defaultIconMap[icon] : icon,
+  );
+
+  let resolvedLabel = $derived(
+    label ?? (isIconDefault(icon) ? defaultLabelMap[icon] : ""),
+  );
+</script>
+
+<Button variant="outline" class="w-full flex items-center gap-2" {...restProps}>
+  {#if resolvedIcon}
+    {#if typeof resolvedIcon === "function"}
+      {@render resolvedIcon()}
+    {:else}
+      <HugeiconsIcon icon={resolvedIcon} size={16} />
+    {/if}
+  {/if}
+  {$t("label.login.with", { name: resolvedLabel })}
+</Button>

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

@@ -1,15 +1,15 @@
-<script lang="ts">
-  import Button, {
-    type ButtonProps,
-  } from "../../ui/button/button.svelte";
-  import { t } from "../../../i18n";
-  import { Login02Icon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  let { ...restProps }: ButtonProps = $props();
-</script>
-
-<Button class="w-full flex items-center gap-2" {...restProps}>
-  <HugeiconsIcon icon={Login02Icon} size={16} />
-  {$t("label.send")}
-</Button>
+<script lang="ts">
+  import Button, {
+    type ButtonProps,
+  } from "../../ui/button/button.svelte";
+  import { t } from "../../../i18n";
+  import { Login02Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let { ...restProps }: ButtonProps = $props();
+</script>
+
+<Button class="w-full flex items-center gap-2" {...restProps}>
+  <HugeiconsIcon icon={Login02Icon} size={16} />
+  {$t("label.send")}
+</Button>

package/dist/components/core/card/highlight/CardHighlight.svelte

@@ -1,44 +1,67 @@
-<script lang="ts">
-  import CardFavorite from "../shared/CardFavorite.svelte";
-  /**
-   * Card component with a title and content.
-   * @component
-   */
-  import type { CardPromotionProps } from "../types";
-
-  let {
-    logo,
-    imageUrl,
-    title,
-    isFavorite = false,
-  }: CardPromotionProps = $props();
-</script>
-
-<article class="relative rounded-sm">
-  {#if logo}
-    <div class="absolute top-1 left-1 z-2 flex gap-1 p-2">
-      <img src={logo} width={30} height={30} alt={title} class="rounded-lg" />
-    </div>
-  {/if}
-
-  <div class="absolute top-1 right-1 z-2 flex gap-1 p-2">
-    <CardFavorite {isFavorite} />
-  </div>
-
-  {#if imageUrl}
-    <img
-      src={imageUrl}
-      alt={imageUrl}
-      class="rounded-lg md:h-37.5 md:w-37.5 lg:h-50 lg:w-50 object-cover object-center"
-    />
-  {/if}
-  <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
-
-  <div
-    class="absolute bottom-1 inset-x-0 flex justify-center m-auto bg-black/10 backdrop-blur-sm max-w-11/12 p-2 rounded-md"
-  >
-    {#if title}
-      <div class="text-center font-semibold text-[12px]">{title}</div>
-    {/if}
-  </div>
-</article>
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import CardFavorite from "../shared/CardFavorite.svelte";
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardPromotionProps } from "../types";
+
+  let {
+    id,
+    logo,
+    imageUrl,
+    title,
+    isLoading = false,
+    isFavorite = false,
+    onClickFavorite,
+  }: CardPromotionProps = $props();
+</script>
+
+<article class="relative rounded-sm">
+  {#if logo}
+    <div class="absolute top-1 left-1 z-2 flex gap-1 p-2">
+      {#if isLoading}
+        <Skeleton class="h-30 w-30 rounded-lg" />
+      {:else}
+        <img src={logo} width={30} height={30} alt={title} class="rounded-lg" />
+      {/if}
+    </div>
+  {/if}
+
+  <div class="absolute top-1 right-1 z-2 flex gap-1 p-2">
+    <CardFavorite
+      {id}
+      {isFavorite}
+      {isLoading}
+      onFavoriteClick={() => onClickFavorite?.(id)}
+    />
+  </div>
+
+  {#if imageUrl}
+    {#if isLoading}
+      <Skeleton
+        class="rounded-lg md:h-37.5 md:w-37.5 lg:h-50 lg:w-50 object-cover object-center"
+      />
+    {:else}
+      <img
+        src={imageUrl}
+        alt={imageUrl}
+        class="rounded-lg md:h-37.5 md:w-37.5 lg:h-50 lg:w-50 object-cover object-center"
+      />
+    {/if}
+  {/if}
+  <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+
+  <div
+    class="absolute bottom-1 inset-x-0 flex justify-center m-auto bg-black/10 backdrop-blur-sm max-w-11/12 p-2 rounded-md"
+  >
+    {#if title}
+      {#if isLoading}
+        <Skeleton class="h-4 w-30 rounded-lg" />
+      {:else}
+        <div class="text-center font-semibold text-[12px]">{title}</div>
+      {/if}
+    {/if}
+  </div>
+</article>

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

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