negodesign 0.0.55 → 0.0.57

package/dist/components/core/card/highlight/01/CardHighlight01.svelte

@@ -1,103 +1,103 @@
-<script lang="ts">
-  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
-  import ImgPlaceholder from "../../../../../assets/placeholder-image.png";
-  import CardDescription from "../../shared/CardDescription.svelte";
-  import CardFavorite from "../../shared/CardFavorite.svelte";
-  import CardTags from "../../shared/CardTags.svelte";
-
-  /**
-   * Card component with a title and content.
-   * @component
-   */
-  import type { CardHighlightProps } from "../../types";
-  import CardButton from "../../shared/CardButton.svelte";
-  import CardLogo from "../../shared/CardLogo.svelte";
-  import { t } from "../../../../../i18n";
-
-  let {
-    id,
-    logo,
-    tags,
-    title,
-    content,
-    imageUrl,
-    isLoading = false,
-    isFavorite = false,
-    buttonText,
-    buttonClass,
-    isDescriptionIcon,
-    isDescriptionLabel,
-    isExpandButton = false,
-    onClickBtn,
-    onClickFavorite,
-  }: CardHighlightProps = $props();
-</script>
-
-<article
-  class="flex gap-1 bg-white dark:bg-background p-3 rounded-lg shadow border"
->
-  <aside class="relative rounded-lg border h-50">
-    <div class="absolute top-3 left-1 z-2 flex gap-1 w-50">
-      <CardLogo {isLoading} {logo} />
-    </div>
-
-    <div class="absolute top-3 right-1 z-2">
-      <CardFavorite
-        {id}
-        {isFavorite}
-        {isLoading}
-        onFavoriteClick={() => onClickFavorite?.(id)}
-      />
-    </div>
-
-    {#if isLoading}
-      <Skeleton class="rounded-lg w-50 h-full object-cover object-center" />
-    {:else if imageUrl}
-      <img
-        src={imageUrl}
-        alt={imageUrl}
-        class="rounded-lg w-50 h-full object-cover object-center"
-      />
-    {:else}
-      <img
-        src={ImgPlaceholder}
-        alt={imageUrl}
-        class="rounded-lg w-50 h-full object-cover object-center"
-      />
-    {/if}
-    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
-  </aside>
-  <div class="px-5">
-    <div class="p-2 rounded-md">
-      {#if isLoading}
-        <Skeleton class="h-4 w-30 rounded-lg" />
-      {:else if title}
-        <div class="font-semibold">{title}</div>
-      {/if}
-    </div>
-
-    <div class="w-75">
-      <CardDescription
-        {content}
-        {isLoading}
-        {isDescriptionIcon}
-        {isDescriptionLabel}
-      />
-    </div>
-
-    {#if tags && tags.length > 0}
-      <div class="w-full mb-2">
-        <CardTags {tags} />
-      </div>
-    {/if}
-
-    <CardButton
-      {id}
-      {isLoading}
-      className={buttonClass}
-      isFlex={isExpandButton}
-      onClick={() => onClickBtn!(id)}
-      text={buttonText || $t("label.buy")}
-    />
-  </div>
-</article>
+<script lang="ts">
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import ImgPlaceholder from "../../../../../assets/placeholder-image.png";
+  import CardDescription from "../../shared/CardDescription.svelte";
+  import CardFavorite from "../../shared/CardFavorite.svelte";
+  import CardTags from "../../shared/CardTags.svelte";
+
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardHighlightProps } from "../../types";
+  import CardButton from "../../shared/CardButton.svelte";
+  import CardLogo from "../../shared/CardLogo.svelte";
+  import { t } from "../../../../../i18n";
+
+  let {
+    id,
+    logo,
+    tags,
+    title,
+    content,
+    imageUrl,
+    isLoading = false,
+    isFavorite = false,
+    buttonText,
+    buttonClass,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    isExpandButton = false,
+    onClickBtn,
+    onClickFavorite,
+  }: CardHighlightProps = $props();
+</script>
+
+<article
+  class="flex gap-1 bg-white dark:bg-background p-3 rounded-lg shadow border"
+>
+  <aside class="relative rounded-lg border h-50">
+    <div class="absolute top-3 left-1 z-2 flex gap-1 w-50">
+      <CardLogo {isLoading} {logo} />
+    </div>
+
+    <div class="absolute top-3 right-1 z-2">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        {isLoading}
+        onFavoriteClick={() => onClickFavorite?.(id)}
+      />
+    </div>
+
+    {#if isLoading}
+      <Skeleton class="rounded-lg w-50 h-full object-cover object-center" />
+    {:else if imageUrl}
+      <img
+        src={imageUrl}
+        alt={imageUrl}
+        class="rounded-lg w-50 h-full object-cover object-center"
+      />
+    {:else}
+      <img
+        src={ImgPlaceholder}
+        alt={imageUrl}
+        class="rounded-lg w-50 h-full object-cover object-center"
+      />
+    {/if}
+    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+  </aside>
+  <div class="px-5">
+    <div class="p-2 rounded-md">
+      {#if isLoading}
+        <Skeleton class="h-4 w-30 rounded-lg" />
+      {:else if title}
+        <div class="font-semibold">{title}</div>
+      {/if}
+    </div>
+
+    <div class="w-75">
+      <CardDescription
+        {content}
+        {isLoading}
+        {isDescriptionIcon}
+        {isDescriptionLabel}
+      />
+    </div>
+
+    {#if tags && tags.length > 0}
+      <div class="w-full mb-2">
+        <CardTags {tags} />
+      </div>
+    {/if}
+
+    <CardButton
+      {id}
+      {isLoading}
+      className={buttonClass}
+      isFlex={isExpandButton}
+      onClick={() => onClickBtn!(id)}
+      text={buttonText || $t("label.buy")}
+    />
+  </div>
+</article>

package/dist/components/core/card/highlight/02/CardHighlight02.svelte

@@ -1,99 +1,99 @@
-<script lang="ts">
-  import Button from "../../../../ui/button/button.svelte";
-  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
-  import { t } from "../../../../../i18n";
-  import CardDescription from "../../shared/CardDescription.svelte";
-  import CardFavorite from "../../shared/CardFavorite.svelte";
-  import CardTags from "../../shared/CardTags.svelte";
-  import ImgPlaceholderCompany from "../../../../../assets/placeholder-company.png";
-  import ImgPlaceholder from "../../../../../assets/placeholder-image.png";
-  /**
-   * Card component with a title and content.
-   * @component
-   */
-  import type { CardHighlightProps } from "../../types";
-  import CardButton from "../../shared/CardButton.svelte";
-  import CardLogo from "../../shared/CardLogo.svelte";
-
-  let {
-    id,
-    logo,
-    tags,
-    title,
-    content,
-    imageUrl,
-    isLoading = false,
-    isFavorite = false,
-    isDescriptionIcon,
-    isDescriptionLabel,
-    isExpandButton = false,
-    buttonText,
-    buttonClass,
-    onClickBtn,
-    onClickFavorite,
-  }: CardHighlightProps = $props();
-</script>
-
-<article
-  class="flex flex-col gap-1 bg-white dark:bg-background p-3 rounded-lg shadow border"
->
-  <aside class="relative rounded-lg border h-36">
-    <div class="absolute top-3 left-1 z-2 flex gap-1">
-      <CardLogo {isLoading} {logo} />
-    </div>
-
-    <div class="absolute top-3 right-1 z-2">
-      <CardFavorite
-        {id}
-        {isFavorite}
-        {isLoading}
-        onFavoriteClick={() => onClickFavorite?.(id)}
-      />
-    </div>
-
-    {#if isLoading}
-      <Skeleton class="rounded-lg w-full h-full object-cover object-center" />
-    {:else if imageUrl}
-      <img
-        src={imageUrl}
-        alt={imageUrl}
-        class="rounded-lg w-full h-full object-cover object-center"
-        onerror={(e) => ((e.target as HTMLImageElement).src = ImgPlaceholder)}
-      />
-    {/if}
-    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
-  </aside>
-  <div class="px-2 w-55">
-    <div class="rounded-md">
-      {#if isLoading}
-        <Skeleton class="h-4 w-30 rounded-lg" />
-      {:else if title}
-        <div class="font-semibold my-2">{title}</div>
-      {/if}
-    </div>
-
-    <div class="my-2">
-      <CardDescription
-        {content}
-        {isLoading}
-        {isDescriptionIcon}
-        {isDescriptionLabel}
-      />
-    </div>
-
-    {#if tags && tags.length > 0}
-      <div class="my-2">
-        <CardTags {tags} {isLoading} />
-      </div>
-    {/if}
-
-    <CardButton
-      {id}
-      {isLoading}
-      className={buttonClass}
-      isFlex={isExpandButton}
-      onClick={() => onClickBtn!(id)}
-      text={buttonText || $t("label.buy")}
-    />
-  </div>
-</article>
+<script lang="ts">
+  import Button from "../../../../ui/button/button.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import { t } from "../../../../../i18n";
+  import CardDescription from "../../shared/CardDescription.svelte";
+  import CardFavorite from "../../shared/CardFavorite.svelte";
+  import CardTags from "../../shared/CardTags.svelte";
+  import ImgPlaceholderCompany from "../../../../../assets/placeholder-company.png";
+  import ImgPlaceholder from "../../../../../assets/placeholder-image.png";
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardHighlightProps } from "../../types";
+  import CardButton from "../../shared/CardButton.svelte";
+  import CardLogo from "../../shared/CardLogo.svelte";
+
+  let {
+    id,
+    logo,
+    tags,
+    title,
+    content,
+    imageUrl,
+    isLoading = false,
+    isFavorite = false,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    isExpandButton = false,
+    buttonText,
+    buttonClass,
+    onClickBtn,
+    onClickFavorite,
+  }: CardHighlightProps = $props();
+</script>
+
+<article
+  class="flex flex-col gap-1 bg-white dark:bg-background p-3 rounded-lg shadow border"
+>
+  <aside class="relative rounded-lg border h-36">
+    <div class="absolute top-3 left-1 z-2 flex gap-1">
+      <CardLogo {isLoading} {logo} />
+    </div>
+
+    <div class="absolute top-3 right-1 z-2">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        {isLoading}
+        onFavoriteClick={() => onClickFavorite?.(id)}
+      />
+    </div>
+
+    {#if isLoading}
+      <Skeleton class="rounded-lg w-full h-full object-cover object-center" />
+    {:else if imageUrl}
+      <img
+        src={imageUrl}
+        alt={imageUrl}
+        class="rounded-lg w-full h-full object-cover object-center"
+        onerror={(e) => ((e.target as HTMLImageElement).src = ImgPlaceholder)}
+      />
+    {/if}
+    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+  </aside>
+  <div class="px-2 w-55">
+    <div class="rounded-md">
+      {#if isLoading}
+        <Skeleton class="h-4 w-30 rounded-lg" />
+      {:else if title}
+        <div class="font-semibold my-2">{title}</div>
+      {/if}
+    </div>
+
+    <div class="my-2">
+      <CardDescription
+        {content}
+        {isLoading}
+        {isDescriptionIcon}
+        {isDescriptionLabel}
+      />
+    </div>
+
+    {#if tags && tags.length > 0}
+      <div class="my-2">
+        <CardTags {tags} {isLoading} />
+      </div>
+    {/if}
+
+    <CardButton
+      {id}
+      {isLoading}
+      className={buttonClass}
+      isFlex={isExpandButton}
+      onClick={() => onClickBtn!(id)}
+      text={buttonText || $t("label.buy")}
+    />
+  </div>
+</article>

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

@@ -1,22 +1,22 @@
-<script lang="ts">
-  /**
-   * Card component with a title and content.
-   * @component
-   */
-  import type { CardHighlightProps } from "../types";
-  import CardHighlight01 from "./01/CardHighlight01.svelte";
-  import CardHighlight02 from "./02/CardHighlight02.svelte";
-
-  let {
-    varient = 1,
-    ...restProps
-  }: CardHighlightProps & {
-    varient?: 1 | 2;
-  } = $props();
-</script>
-
-{#if varient == 2}
-  <CardHighlight02 {...restProps} />
-{:else}
-  <CardHighlight01 {...restProps} />
-{/if}
+<script lang="ts">
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardHighlightProps } from "../types";
+  import CardHighlight01 from "./01/CardHighlight01.svelte";
+  import CardHighlight02 from "./02/CardHighlight02.svelte";
+
+  let {
+    varient = 1,
+    ...restProps
+  }: CardHighlightProps & {
+    varient?: 1 | 2;
+  } = $props();
+</script>
+
+{#if varient == 2}
+  <CardHighlight02 {...restProps} />
+{:else}
+  <CardHighlight01 {...restProps} />
+{/if}