negodesign 0.0.81 → 0.0.82

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

@@ -1,18 +1,18 @@
-<script lang="ts">
-  import Button from "./button.svelte";
-  import { ArrowLeft01Icon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { t } from "../../../i18n";
-  import type { ButtonProps } from "./";
-
-  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 "./button.svelte";
+  import { ArrowLeft01Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { t } from "../../../i18n";
+  import type { ButtonProps } from "./";
+
+  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/ui/button/ButtonLogin.svelte

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

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

@@ -1,57 +1,57 @@
-<script lang="ts">
-  import Button, {
-    type ButtonProps,
-  } from "./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 "./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/ui/button/ButtonSend.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-  import Button, {
-    type ButtonProps,
-  } from "./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 "./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/ui/button/button.svelte

@@ -1,86 +1,100 @@
-<script lang="ts" module>
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-
-	const buttonBase =
-		"rounded-sm border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
-
-	const buttonVariantClasses = {
-		default: "bg-primary text-primary-foreground hover:bg-primary/80",
-		outline:
-			"border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
-		secondary:
-			"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-		ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-		destructive:
-			"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-		link: "text-primary underline-offset-4 hover:underline",
-	} as const;
-
-	const buttonSizeClasses = {
-		default:
-			"h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-		xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-		sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-		lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-		icon: "size-9",
-		"icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
-		"icon-sm": "size-8",
-		"icon-lg": "size-10",
-	} as const;
-
-	export type ButtonVariant = keyof typeof buttonVariantClasses;
-	export type ButtonSize = keyof typeof buttonSizeClasses;
-
-	export function buttonVariants(opts: { variant?: ButtonVariant; size?: ButtonSize } = {}): string {
-		const variant = opts.variant ?? "default";
-		const size = opts.size ?? "default";
-		return cn(buttonBase, buttonVariantClasses[variant], buttonSizeClasses[size]);
-	}
-
-	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-		WithElementRef<HTMLAnchorAttributes> & {
-			variant?: ButtonVariant;
-			size?: ButtonSize;
-		};
-</script>
-
-<script lang="ts">
-	let {
-		class: className,
-		variant = "default",
-		size = "default",
-		ref = $bindable(null),
-		href = undefined,
-		type = "button",
-		disabled,
-		children,
-		...restProps
-	}: ButtonProps = $props();
-</script>
-
-{#if href}
-	<a
-		bind:this={ref}
-		data-slot="button"
-		class={cn(buttonVariants({ variant, size }), className)}
-		href={disabled ? undefined : href}
-		aria-disabled={disabled}
-		role={disabled ? "link" : undefined}
-		tabindex={disabled ? -1 : undefined}
-		{...restProps}
-	>
-		{@render children?.()}
-	</a>
-{:else}
-	<button
-		bind:this={ref}
-		data-slot="button"
-		class={cn(buttonVariants({ variant, size }), className)}
-		{type}
-		{disabled}
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
-{/if}
+<script lang="ts" module>
+  import { cn, type WithElementRef } from "../../../utils.js";
+  import type {
+    HTMLAnchorAttributes,
+    HTMLButtonAttributes,
+  } from "svelte/elements";
+
+  const buttonBase =
+    "rounded-sm border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+  const buttonVariantClasses = {
+    default: "bg-primary text-primary-foreground hover:bg-primary/80",
+    outline:
+      "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+    secondary:
+      "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+    ghost:
+      "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+    destructive:
+      "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+    link: "text-primary underline-offset-4 hover:underline",
+  } as const;
+
+  const buttonSizeClasses = {
+    default:
+      "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+    xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+    sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+    lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+    icon: "size-9",
+    "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+    "icon-sm": "size-8",
+    "icon-lg": "size-10",
+  } as const;
+
+  export type ButtonVariant = keyof typeof buttonVariantClasses;
+  export type ButtonSize = keyof typeof buttonSizeClasses;
+
+  export function buttonVariants(
+    opts: { variant?: ButtonVariant; size?: ButtonSize } = {},
+  ): string {
+    const variant = opts.variant ?? "default";
+    const size = opts.size ?? "default";
+    return cn(
+      buttonBase,
+      buttonVariantClasses[variant],
+      buttonSizeClasses[size],
+    );
+  }
+
+  export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+    WithElementRef<HTMLAnchorAttributes> & {
+      variant?: ButtonVariant;
+      size?: ButtonSize;
+      isLoading?: boolean;
+    };
+</script>
+
+<script lang="ts">
+  let {
+    class: className,
+    isLoading,
+    variant = "default",
+    size = "default",
+    ref = $bindable(null),
+    href = undefined,
+    type = "button",
+    disabled,
+    children,
+    ...restProps
+  }: ButtonProps = $props();
+
+  let isDisabled = $derived(disabled || isLoading);
+</script>
+
+{#if href}
+  <a
+    bind:this={ref}
+    data-slot="button"
+    class={cn(buttonVariants({ variant, size }), className)}
+    href={isDisabled ? undefined : href}
+    aria-disabled={isDisabled}
+    role={isDisabled ? "link" : undefined}
+    tabindex={isDisabled ? -1 : undefined}
+    {...restProps}
+  >
+    {@render children?.()}
+  </a>
+{:else}
+  <button
+    bind:this={ref}
+    data-slot="button"
+    class={cn(buttonVariants({ variant, size }), className)}
+    {type}
+    disabled={isDisabled}
+    {...restProps}
+  >
+    {@render children?.()}
+  </button>
+{/if}

package/dist/components/ui/button/button.svelte.d.ts

@@ -27,6 +27,7 @@ export declare function buttonVariants(opts?: {
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    isLoading?: boolean;
 };
 declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;

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

@@ -1,103 +1,103 @@
-<script lang="ts">
-  import Skeleton from "../../../../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 "../../../../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>