negodesign 0.0.59 → 0.0.60

package/dist/components/core/form/ui/input-username.svelte

@@ -1,22 +1,22 @@
-<script lang="ts">
-  import type { InputLabelProps } from "../data/InputLabel.svelte";
-  import InputBase from "./input-base.svelte";
-  import { t } from "../../../../i18n";
-
-  /** Username input field with icon and label. */
-  let {
-    label,
-    placeholder,
-    value = $bindable(""),
-    ...restProps
-  }: InputLabelProps = $props();
-</script>
-
-<InputBase
-  label={label || $t("input.username.label")}
-  placeholder={placeholder || $t("input.username.placeholder")}
-  isLabel
-  isIcon
-  bind:value
-  {...restProps}
-/>
+<script lang="ts">
+  import type { InputLabelProps } from "../data/InputLabel.svelte";
+  import InputBase from "./input-base.svelte";
+  import { t } from "../../../../i18n";
+
+  /** Username input field with icon and label. */
+  let {
+    label,
+    placeholder,
+    value = $bindable(""),
+    ...restProps
+  }: InputLabelProps = $props();
+</script>
+
+<InputBase
+  label={label || $t("input.username.label")}
+  placeholder={placeholder || $t("input.username.placeholder")}
+  isLabel
+  isIcon
+  bind:value
+  {...restProps}
+/>

package/dist/components/core/grid/ui/01/Grid01.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-    import type { ItemGridProps } from "../../data/types";
-    import DescriptionGrid from "../shared/DescriptionGrid.svelte";
-    import IconRenderGrid from "../shared/IconRenderGrid.svelte";
-    import TitleGrid from "../shared/TitleGrid.svelte";
-
-    let {
-        id,
-        icon,
-        title,
-        isLoading,
-        titleClass,
-        description,
-        descriptionClass,
-        onClick,
-    }: ItemGridProps = $props();
-</script>
-
-<button
-    onclick={() => {
-        if (id && onClick) onClick(id);
-    }}
-    class="flex flex-col justify-center items-center gap-2"
->
-    <IconRenderGrid {icon} {isLoading} />
-    <TitleGrid {titleClass} {title} {isLoading} />
-    <DescriptionGrid {descriptionClass} {description} {isLoading} />
-</button>
+<script lang="ts">
+    import type { ItemGridProps } from "../../data/types";
+    import DescriptionGrid from "../shared/DescriptionGrid.svelte";
+    import IconRenderGrid from "../shared/IconRenderGrid.svelte";
+    import TitleGrid from "../shared/TitleGrid.svelte";
+
+    let {
+        id,
+        icon,
+        title,
+        isLoading,
+        titleClass,
+        description,
+        descriptionClass,
+        onClick,
+    }: ItemGridProps = $props();
+</script>
+
+<button
+    onclick={() => {
+        if (id && onClick) onClick(id);
+    }}
+    class="flex flex-col justify-center items-center gap-2"
+>
+    <IconRenderGrid {icon} {isLoading} />
+    <TitleGrid {titleClass} {title} {isLoading} />
+    <DescriptionGrid {descriptionClass} {description} {isLoading} />
+</button>

package/dist/components/core/grid/ui/02/Grid02.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-    import type { ItemGridProps } from "../../data/types";
-    import DescriptionGrid from "../shared/DescriptionGrid.svelte";
-    import IconRenderGrid from "../shared/IconRenderGrid.svelte";
-    import TitleGrid from "../shared/TitleGrid.svelte";
-
-    let {
-        id,
-        icon,
-        title,
-        isLoading,
-        description,
-        titleClass,
-        descriptionClass,
-        onClick,
-    }: ItemGridProps = $props();
-</script>
-
-<button
-    onclick={() => {
-        if (id && onClick) onClick(id);
-    }}
-    class="flex flex-col justify-center items-center gap-2 border rounded-lg p-2 cursor-pointer"
->
-    <IconRenderGrid {icon} {isLoading} />
-    <TitleGrid {titleClass} {title} {isLoading} />
-    <DescriptionGrid {descriptionClass} {description} {isLoading} />
-</button>
+<script lang="ts">
+    import type { ItemGridProps } from "../../data/types";
+    import DescriptionGrid from "../shared/DescriptionGrid.svelte";
+    import IconRenderGrid from "../shared/IconRenderGrid.svelte";
+    import TitleGrid from "../shared/TitleGrid.svelte";
+
+    let {
+        id,
+        icon,
+        title,
+        isLoading,
+        description,
+        titleClass,
+        descriptionClass,
+        onClick,
+    }: ItemGridProps = $props();
+</script>
+
+<button
+    onclick={() => {
+        if (id && onClick) onClick(id);
+    }}
+    class="flex flex-col justify-center items-center gap-2 border rounded-lg p-2 cursor-pointer"
+>
+    <IconRenderGrid {icon} {isLoading} />
+    <TitleGrid {titleClass} {title} {isLoading} />
+    <DescriptionGrid {descriptionClass} {description} {isLoading} />
+</button>

package/dist/components/core/grid/ui/PanelGrid.svelte

@@ -1,27 +1,27 @@
-<script lang="ts">
-  import { useDevice } from "../../../../hooks/responsive.svelte";
-  import type { GridProps } from "../data/types";
-  import Grid02 from "./02/Grid02.svelte";
-  import Grid01 from "./01/Grid01.svelte";
-
-  let { variant, className, isLoading, items, onClick }: GridProps = $props();
-
-  const styleMobile = "flex justify-between overflow-x-auto no-scrollbar";
-
-  const responsive = useDevice();
-</script>
-
-<div
-  class="gap-4 my-2 {responsive.isMobile
-    ? styleMobile
-    : 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 max-h-237.5 overflow-y-auto'} 
-    {className}"
->
-  {#each items as item, i (i)}
-    {#if variant == 2}
-      <Grid02 {...item} {onClick} {isLoading} />
-    {:else}
-      <Grid01 {...item} {onClick} {isLoading} />
-    {/if}
-  {/each}
-</div>
+<script lang="ts">
+  import { useDevice } from "../../../../hooks/responsive.svelte";
+  import type { GridProps } from "../data/types";
+  import Grid02 from "./02/Grid02.svelte";
+  import Grid01 from "./01/Grid01.svelte";
+
+  let { variant, className, isLoading, items, onClick }: GridProps = $props();
+
+  const styleMobile = "flex justify-between overflow-x-auto no-scrollbar";
+
+  const responsive = useDevice();
+</script>
+
+<div
+  class="gap-4 my-2 {responsive.isMobile
+    ? styleMobile
+    : 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 max-h-237.5 overflow-y-auto'} 
+    {className}"
+>
+  {#each items as item, i (i)}
+    {#if variant == 2}
+      <Grid02 {...item} {onClick} {isLoading} />
+    {:else}
+      <Grid01 {...item} {onClick} {isLoading} />
+    {/if}
+  {/each}
+</div>

package/dist/components/core/grid/ui/SimpleGrid.svelte

@@ -1,35 +1,35 @@
-<script lang="ts">
-  import { useDevice } from "../../../../hooks/responsive.svelte";
-  import type { GridProps } from "../data/types";
-  import Grid02 from "./02/Grid02.svelte";
-  import Grid01 from "./01/Grid01.svelte";
-
-  let { variant, className, isLoading, items }: GridProps = $props();
-
-  const styleMobile = "flex justify-between overflow-x-auto no-scrollbar";
-
-  const cols = (): string => {
-    const len = items?.length ?? 0;
-    if (len <= 3) return "grid grid-cols-3";
-    if (len <= 4) return "grid grid-cols-4";
-    if (len <= 5) return "grid grid-cols-5";
-    if (len <= 6) return "grid grid-cols-6";
-    if (len <= 7) return "grid grid-cols-7";
-    if (len > 7) return styleMobile;
-    return "grid grid-cols-1";
-  };
-
-  const responsive = useDevice();
-</script>
-
-<div
-  class="{responsive.isMobile ? styleMobile : cols()} gap-4 my-2 {className}"
->
-  {#each items as item, i (i)}
-    {#if variant == 2}
-      <Grid02 {...item} {isLoading} />
-    {:else}
-      <Grid01 {...item} {isLoading} />
-    {/if}
-  {/each}
-</div>
+<script lang="ts">
+  import { useDevice } from "../../../../hooks/responsive.svelte";
+  import type { GridProps } from "../data/types";
+  import Grid02 from "./02/Grid02.svelte";
+  import Grid01 from "./01/Grid01.svelte";
+
+  let { variant, className, isLoading, items }: GridProps = $props();
+
+  const styleMobile = "flex justify-between overflow-x-auto no-scrollbar";
+
+  const cols = (): string => {
+    const len = items?.length ?? 0;
+    if (len <= 3) return "grid grid-cols-3";
+    if (len <= 4) return "grid grid-cols-4";
+    if (len <= 5) return "grid grid-cols-5";
+    if (len <= 6) return "grid grid-cols-6";
+    if (len <= 7) return "grid grid-cols-7";
+    if (len > 7) return styleMobile;
+    return "grid grid-cols-1";
+  };
+
+  const responsive = useDevice();
+</script>
+
+<div
+  class="{responsive.isMobile ? styleMobile : cols()} gap-4 my-2 {className}"
+>
+  {#each items as item, i (i)}
+    {#if variant == 2}
+      <Grid02 {...item} {isLoading} />
+    {:else}
+      <Grid01 {...item} {isLoading} />
+    {/if}
+  {/each}
+</div>

package/dist/components/core/grid/ui/shared/DescriptionGrid.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-    import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
-
-    let {
-        isLoading,
-        description,
-        descriptionClass,
-    }: {
-        isLoading?: boolean;
-        description?: string;
-        descriptionClass?: string;
-    } = $props();
-</script>
-
-{#if isLoading}
-    <Skeleton class="w-full h-2.5 bg-gray-500/95" />
-{:else if description}
-    <p
-        class="{descriptionClass} text-center min-w-48 md:w-52 lg:w-56 text-muted-foreground line-clamp-2 md:line-clamp-3"
-    >
-        {description}
-    </p>
-{/if}
+<script lang="ts">
+    import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+
+    let {
+        isLoading,
+        description,
+        descriptionClass,
+    }: {
+        isLoading?: boolean;
+        description?: string;
+        descriptionClass?: string;
+    } = $props();
+</script>
+
+{#if isLoading}
+    <Skeleton class="w-full h-2.5 bg-gray-500/95" />
+{:else if description}
+    <p
+        class="{descriptionClass} text-center min-w-48 md:w-52 lg:w-56 text-muted-foreground line-clamp-2 md:line-clamp-3"
+    >
+        {description}
+    </p>
+{/if}

package/dist/components/core/grid/ui/shared/IconRenderGrid.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-    import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import type { IconSvgElement } from "@hugeicons/svelte";
-
-    let {
-        icon,
-        isLoading,
-    }: {
-        icon: string | IconSvgElement;
-        isLoading?: boolean;
-    } = $props();
-</script>
-
-{#if isLoading}
-    <Skeleton class="min-w-17.5 md:min-w-25 h-2.5 bg-gray-400" />
-{:else if typeof icon === "string"}
-    <i class="{icon} text-4xl md:text-6xl"></i>
-{:else}
-    <HugeiconsIcon {icon} class="size-8 md:size-10" />
-{/if}
+<script lang="ts">
+    import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import type { IconSvgElement } from "@hugeicons/svelte";
+
+    let {
+        icon,
+        isLoading,
+    }: {
+        icon: string | IconSvgElement;
+        isLoading?: boolean;
+    } = $props();
+</script>
+
+{#if isLoading}
+    <Skeleton class="min-w-17.5 md:min-w-25 h-2.5 bg-gray-400" />
+{:else if typeof icon === "string"}
+    <i class="{icon} text-4xl md:text-6xl"></i>
+{:else}
+    <HugeiconsIcon {icon} class="size-8 md:size-10" />
+{/if}

package/dist/components/core/grid/ui/shared/TitleGrid.svelte

@@ -1,19 +1,19 @@
-<script lang="ts">
-    import { Skeleton } from "../../../../ui/skeleton";
-
-    let {
-        isLoading,
-        title,
-        titleClass,
-    }: {
-        isLoading?: boolean;
-        title?: string;
-        titleClass?: string;
-    } = $props();
-</script>
-
-{#if isLoading}
-    <Skeleton class="w-full h-12.5 bg-gray-500/95" />
-{:else}
-    <p class={titleClass}>{title}</p>
-{/if}
+<script lang="ts">
+    import { Skeleton } from "../../../../ui/skeleton";
+
+    let {
+        isLoading,
+        title,
+        titleClass,
+    }: {
+        isLoading?: boolean;
+        title?: string;
+        titleClass?: string;
+    } = $props();
+</script>
+
+{#if isLoading}
+    <Skeleton class="w-full h-12.5 bg-gray-500/95" />
+{:else}
+    <p class={titleClass}>{title}</p>
+{/if}

package/dist/components/core/hero/SimpleHero.svelte

@@ -1,65 +1,65 @@
-<script lang="ts">
-  import { Button } from "../../ui/button/index.js";
-  import type { HeroSimpleProps } from "./types";
-  let {
-    title,
-    subTitle,
-    description,
-    image,
-    buttons,
-    titleClass,
-    subTitleClass,
-    descriptionClass,
-    imageClass,
-  }: HeroSimpleProps = $props();
-</script>
-
-<section class="relative flex p-2">
-  <div class="w-full grid grid-cols-10 md:grid-cols-2 min-h-50 md:min-h-125">
-    <div class="flex justify-center items-center">
-      <div class="space-y-1">
-        {#if title}
-          <h1
-            class="font-bold text-[24px] md:text-[60px] lg:text-[80px] {titleClass}"
-          >
-            {title}
-          </h1>
-        {/if}
-        {#if subTitle}
-          <p class="font-semibold text-[16px] md:text-[40px] {subTitleClass}">
-            {subTitle}
-          </p>
-        {/if}
-        {#if description}
-          <p
-            class="text-[12px] md:text-[20px] md:w-8/12 mt-5 {descriptionClass}"
-          >
-            {description}
-          </p>
-        {/if}
-        {#if buttons}
-          <div class="flex flex-wrap gap-2 mt-5 md:mt-10">
-            {#each buttons as button, i (i)}
-              <Button
-                href={button.href}
-                class={button.className}
-                onclick={button.onClick}
-              >
-                {button.label}
-              </Button>
-            {/each}
-          </div>
-        {/if}
-      </div>
-    </div>
-    <div class="flex justify-center items-center">
-      {#if image}
-        <img
-          src={image}
-          alt={image}
-          class="rounded-lg h-50 md:h-125 w-[60%] object-cover {imageClass}"
-        />
-      {/if}
-    </div>
-  </div>
-</section>
+<script lang="ts">
+  import { Button } from "../../ui/button/index.js";
+  import type { HeroSimpleProps } from "./types";
+  let {
+    title,
+    subTitle,
+    description,
+    image,
+    buttons,
+    titleClass,
+    subTitleClass,
+    descriptionClass,
+    imageClass,
+  }: HeroSimpleProps = $props();
+</script>
+
+<section class="relative flex p-2">
+  <div class="w-full grid grid-cols-10 md:grid-cols-2 min-h-50 md:min-h-125">
+    <div class="flex justify-center items-center">
+      <div class="space-y-1">
+        {#if title}
+          <h1
+            class="font-bold text-[24px] md:text-[60px] lg:text-[80px] {titleClass}"
+          >
+            {title}
+          </h1>
+        {/if}
+        {#if subTitle}
+          <p class="font-semibold text-[16px] md:text-[40px] {subTitleClass}">
+            {subTitle}
+          </p>
+        {/if}
+        {#if description}
+          <p
+            class="text-[12px] md:text-[20px] md:w-8/12 mt-5 {descriptionClass}"
+          >
+            {description}
+          </p>
+        {/if}
+        {#if buttons}
+          <div class="flex flex-wrap gap-2 mt-5 md:mt-10">
+            {#each buttons as button, i (i)}
+              <Button
+                href={button.href}
+                class={button.className}
+                onclick={button.onClick}
+              >
+                {button.label}
+              </Button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    </div>
+    <div class="flex justify-center items-center">
+      {#if image}
+        <img
+          src={image}
+          alt={image}
+          class="rounded-lg h-50 md:h-125 w-[60%] object-cover {imageClass}"
+        />
+      {/if}
+    </div>
+  </div>
+</section>

package/dist/components/core/label/LabelOr.svelte

@@ -1,25 +1,25 @@
-<script lang="ts">
-  import Separator from "../../ui/separator/separator.svelte";
-  import { t } from "../../../i18n";
-
-  type Props = {
-    variant?: "SEPARATOR";
-  };
-
-  let { variant }: Props = $props();
-</script>
-
-{#if variant === "SEPARATOR"}
-  <div class="relative my-1 text-center">
-    <div class="absolute inset-0 flex items-center">
-      <Separator />
-    </div>
-    <span
-      class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
-    >
-      {$t("label.or")}
-    </span>
-  </div>
-{:else}
-  {$t("label.or")}
-{/if}
+<script lang="ts">
+  import Separator from "../../ui/separator/separator.svelte";
+  import { t } from "../../../i18n";
+
+  type Props = {
+    variant?: "SEPARATOR";
+  };
+
+  let { variant }: Props = $props();
+</script>
+
+{#if variant === "SEPARATOR"}
+  <div class="relative my-1 text-center">
+    <div class="absolute inset-0 flex items-center">
+      <Separator />
+    </div>
+    <span
+      class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
+    >
+      {$t("label.or")}
+    </span>
+  </div>
+{:else}
+  {$t("label.or")}
+{/if}

package/dist/components/core/link/link-forget-password.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.forget.password")}!
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.forget.password")}!
+</a>

package/dist/components/core/link/link-privacy-polity.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.privacy-policy.label")}
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.privacy-policy.label")}
+</a>