negodesign 0.0.81 → 0.0.82

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

@@ -1,22 +1,22 @@
-<script lang="ts">
-  import type { InputLabelProps } from "../data/InputLabel.svelte.js";
-  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.js";
+  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/ui/grid/core/ui/01/Grid01.svelte

@@ -1,30 +1,30 @@
-<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,
-        iconClass,
-        titleClass,
-        description,
-        itemClassName,
-        descriptionClass,
-        onClick,
-    }: ItemGridProps = $props();
-</script>
-
-<button
-    onclick={() => {
-        if (id && onClick) onClick(id);
-    }}
-    class="flex flex-col justify-center items-center gap-2 rounded-xl {itemClassName}"
->
-    <IconRenderGrid {icon} {iconClass} {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,
+        iconClass,
+        titleClass,
+        description,
+        itemClassName,
+        descriptionClass,
+        onClick,
+    }: ItemGridProps = $props();
+</script>
+
+<button
+    onclick={() => {
+        if (id && onClick) onClick(id);
+    }}
+    class="flex flex-col justify-center items-center gap-2 rounded-xl {itemClassName}"
+>
+    <IconRenderGrid {icon} {iconClass} {isLoading} />
+    <TitleGrid {titleClass} {title} {isLoading} />
+    <DescriptionGrid {descriptionClass} {description} {isLoading} />
+</button>

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

@@ -1,30 +1,30 @@
-<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,
-        iconClass,
-        titleClass,
-        itemClassName,
-        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 {itemClassName}"
->
-    <IconRenderGrid {icon} {iconClass} {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,
+        iconClass,
+        titleClass,
+        itemClassName,
+        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 {itemClassName}"
+>
+    <IconRenderGrid {icon} {iconClass} {isLoading} />
+    <TitleGrid {titleClass} {title} {isLoading} />
+    <DescriptionGrid {descriptionClass} {description} {isLoading} />
+</button>

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

@@ -1,26 +1,26 @@
-<script lang="ts">
-  import type { GridProps } from "../data/types";
-  import PanelCarousel from "./ItemsPanelCarousel.svelte";
-  import PanelGrid from "./ItemsPanelGrid.svelte";
-
-  let {
-    style = "grid",
-    onClick,
-    ...restProps
-  }: GridProps & {
-    style?: "inline" | "grid";
-  } = $props();
-
-  let selectedKey = $state<string | number | undefined>("");
-
-  function selectItem(id: string | number) {
-    selectedKey = `${id}`;
-    onClick?.(id);
-  }
-</script>
-
-{#if style == "inline"}
-  <PanelCarousel {...restProps} {selectedKey} onClick={selectItem} />
-{:else}
-  <PanelGrid {...restProps} {selectedKey} onClick={selectItem} />
-{/if}
+<script lang="ts">
+  import type { GridProps } from "../data/types";
+  import PanelCarousel from "./ItemsPanelCarousel.svelte";
+  import PanelGrid from "./ItemsPanelGrid.svelte";
+
+  let {
+    style = "grid",
+    onClick,
+    ...restProps
+  }: GridProps & {
+    style?: "inline" | "grid";
+  } = $props();
+
+  let selectedKey = $state<string | number | undefined>("");
+
+  function selectItem(id: string | number) {
+    selectedKey = `${id}`;
+    onClick?.(id);
+  }
+</script>
+
+{#if style == "inline"}
+  <PanelCarousel {...restProps} {selectedKey} onClick={selectItem} />
+{:else}
+  <PanelGrid {...restProps} {selectedKey} onClick={selectItem} />
+{/if}

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

@@ -1,37 +1,37 @@
-<script lang="ts">
-  import * as Carousel from "../../../carousel/index.js";
-  import type { GridProps } from "../data/types";
-  import Grid02 from "./02/Grid02.svelte";
-  import Grid01 from "./01/Grid01.svelte";
-
-  let { variant, isLoading, items, itemClassName, onClick }: GridProps =
-    $props();
-</script>
-
-<Carousel.Root>
-  <Carousel.Content>
-    {#if isLoading}
-      <div class="flex items-center justify-between w-full gap-1 md:gap-2">
-        {#each Array.from({ length: 10 }) as _, i (`skeleton-${i}`)}
-          <Carousel.Item class="basis-auto relative">
-            {#if variant == 2}
-              <Grid02 title={`${i}`} description="" icon="" {isLoading} />
-            {:else}
-              <Grid01 title={`${i}`} description="" icon="" {isLoading} />
-            {/if}
-          </Carousel.Item>
-        {/each}
-      </div>
-    {:else}
-      {#each items as item, i (`panel-${i}`)}
-        <Carousel.Item class="basis-auto relative">
-          {#if variant == 2}
-            <Grid02 {...item} {onClick} {itemClassName} />
-          {:else}
-            <Grid01 {...item} {onClick} {itemClassName} />
-          {/if}
-        </Carousel.Item>
-      {/each}
-    {/if}
-  </Carousel.Content>
-</Carousel.Root>
+<script lang="ts">
+  import * as Carousel from "../../../carousel/index.js";
+  import type { GridProps } from "../data/types";
+  import Grid02 from "./02/Grid02.svelte";
+  import Grid01 from "./01/Grid01.svelte";
+
+  let { variant, isLoading, items, itemClassName, onClick }: GridProps =
+    $props();
+</script>
+
+<Carousel.Root>
+  <Carousel.Content>
+    {#if isLoading}
+      <div class="flex items-center justify-between w-full gap-1 md:gap-2">
+        {#each Array.from({ length: 10 }) as _, i (`skeleton-${i}`)}
+          <Carousel.Item class="basis-auto relative">
+            {#if variant == 2}
+              <Grid02 title={`${i}`} description="" icon="" {isLoading} />
+            {:else}
+              <Grid01 title={`${i}`} description="" icon="" {isLoading} />
+            {/if}
+          </Carousel.Item>
+        {/each}
+      </div>
+    {:else}
+      {#each items as item, i (`panel-${i}`)}
+        <Carousel.Item class="basis-auto relative">
+          {#if variant == 2}
+            <Grid02 {...item} {onClick} {itemClassName} />
+          {:else}
+            <Grid01 {...item} {onClick} {itemClassName} />
+          {/if}
+        </Carousel.Item>
+      {/each}
+    {/if}
+  </Carousel.Content>
+</Carousel.Root>

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

@@ -1,43 +1,43 @@
-<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,
-    itemClassName,
-    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}"
->
-  {#if isLoading}
-    {#each Array.from({ length: responsive.isMobile ? 3 : 10 }) as it, i (i)}
-      {#if variant == 2}
-        <Grid02 title={`${it}`} description="" icon="" {isLoading} />
-      {:else}
-        <Grid01 title={`${it}`} description="" icon="" {isLoading} />
-      {/if}
-    {/each}
-  {:else}
-    {#each items as item, i (i)}
-      {#if variant == 2}
-        <Grid02 {...item} {onClick} {itemClassName} />
-      {:else}
-        <Grid01 {...item} {onClick} {itemClassName} />
-      {/if}
-    {/each}
-  {/if}
-</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,
+    itemClassName,
+    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}"
+>
+  {#if isLoading}
+    {#each Array.from({ length: responsive.isMobile ? 3 : 10 }) as it, i (i)}
+      {#if variant == 2}
+        <Grid02 title={`${it}`} description="" icon="" {isLoading} />
+      {:else}
+        <Grid01 title={`${it}`} description="" icon="" {isLoading} />
+      {/if}
+    {/each}
+  {:else}
+    {#each items as item, i (i)}
+      {#if variant == 2}
+        <Grid02 {...item} {onClick} {itemClassName} />
+      {:else}
+        <Grid01 {...item} {onClick} {itemClassName} />
+      {/if}
+    {/each}
+  {/if}
+</div>

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

@@ -1,45 +1,45 @@
-<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, onClick, 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}"
->
-  {#if isLoading}
-    {#each Array.from({ length: responsive.isMobile ? 3 : 10 }) as it, i (i)}
-      {#if variant == 2}
-        <Grid02 title={`${it}`} description="" icon="" {isLoading} />
-      {:else}
-        <Grid01 title={`${it}`} description="" icon="" {isLoading} />
-      {/if}
-    {/each}
-  {:else}
-    {#each items as item, i (i)}
-      {#if variant == 2}
-        <Grid02 {...item} {onClick} />
-      {:else}
-        <Grid01 {...item} {onClick} />
-      {/if}
-    {/each}
-  {/if}
-</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, onClick, 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}"
+>
+  {#if isLoading}
+    {#each Array.from({ length: responsive.isMobile ? 3 : 10 }) as it, i (i)}
+      {#if variant == 2}
+        <Grid02 title={`${it}`} description="" icon="" {isLoading} />
+      {:else}
+        <Grid01 title={`${it}`} description="" icon="" {isLoading} />
+      {/if}
+    {/each}
+  {:else}
+    {#each items as item, i (i)}
+      {#if variant == 2}
+        <Grid02 {...item} {onClick} />
+      {:else}
+        <Grid01 {...item} {onClick} />
+      {/if}
+    {/each}
+  {/if}
+</div>

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

@@ -1,23 +1,23 @@
-<script lang="ts">
-    import Skeleton from "../../../../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 "../../../../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/ui/grid/core/ui/shared/IconRenderGrid.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-    import Skeleton from "../../../../skeleton/skeleton.svelte";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import type { IconSvgElement } from "@hugeicons/svelte";
-
-    let {
-        icon,
-        iconClass,
-        isLoading,
-    }: {
-        icon: string | IconSvgElement;
-        iconClass?: string;
-        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 {iconClass}"></i>
-{:else}
-    <HugeiconsIcon {icon} class="size-8 md:size-10 {iconClass}" />
-{/if}
+<script lang="ts">
+    import Skeleton from "../../../../skeleton/skeleton.svelte";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import type { IconSvgElement } from "@hugeicons/svelte";
+
+    let {
+        icon,
+        iconClass,
+        isLoading,
+    }: {
+        icon: string | IconSvgElement;
+        iconClass?: string;
+        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 {iconClass}"></i>
+{:else}
+    <HugeiconsIcon {icon} class="size-8 md:size-10 {iconClass}" />
+{/if}

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

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