negodesign 0.0.58 → 0.0.59

package/dist/components/core/grid/data/types.d.ts

@@ -2,6 +2,7 @@ import type { IconSvgElement } from "@hugeicons/svelte";
 export interface ItemGridProps {
     id?: string | number;
     title: string;
+    isLoading?: boolean;
     description?: string;
     titleClass?: string;
     descriptionClass?: string;
@@ -12,5 +13,6 @@ export interface GridProps {
     items?: ItemGridProps[];
     className?: string;
     variant?: 1 | 2;
+    isLoading?: boolean;
     onClick?: (id: string | number) => void;
 }

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

@@ -8,8 +8,9 @@
         id,
         icon,
         title,
-        description,
+        isLoading,
         titleClass,
+        description,
         descriptionClass,
         onClick,
     }: ItemGridProps = $props();
@@ -21,7 +22,7 @@
     }}
     class="flex flex-col justify-center items-center gap-2"
 >
-    <IconRenderGrid {icon} />
-    <TitleGrid {titleClass} {title} />
-    <DescriptionGrid {descriptionClass} {description} />
+    <IconRenderGrid {icon} {isLoading} />
+    <TitleGrid {titleClass} {title} {isLoading} />
+    <DescriptionGrid {descriptionClass} {description} {isLoading} />
 </button>

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

@@ -8,6 +8,7 @@
         id,
         icon,
         title,
+        isLoading,
         description,
         titleClass,
         descriptionClass,
@@ -21,7 +22,7 @@
     }}
     class="flex flex-col justify-center items-center gap-2 border rounded-lg p-2 cursor-pointer"
 >
-    <IconRenderGrid {icon} />
-    <TitleGrid {titleClass} {title} />
-    <DescriptionGrid {descriptionClass} {description} />
+    <IconRenderGrid {icon} {isLoading} />
+    <TitleGrid {titleClass} {title} {isLoading} />
+    <DescriptionGrid {descriptionClass} {description} {isLoading} />
 </button>

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

@@ -4,7 +4,7 @@
   import Grid02 from "./02/Grid02.svelte";
   import Grid01 from "./01/Grid01.svelte";
 
-  let { variant, className, onClick, items }: GridProps = $props();
+  let { variant, className, isLoading, items, onClick }: GridProps = $props();
 
   const styleMobile = "flex justify-between overflow-x-auto no-scrollbar";
 
@@ -19,9 +19,9 @@
 >
   {#each items as item, i (i)}
     {#if variant == 2}
-      <Grid02 {...item} {onClick} />
+      <Grid02 {...item} {onClick} {isLoading} />
     {:else}
-      <Grid01 {...item} {onClick} />
+      <Grid01 {...item} {onClick} {isLoading} />
     {/if}
   {/each}
 </div>

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

@@ -4,7 +4,7 @@
   import Grid02 from "./02/Grid02.svelte";
   import Grid01 from "./01/Grid01.svelte";
 
-  let { variant, className, items }: GridProps = $props();
+  let { variant, className, isLoading, items }: GridProps = $props();
 
   const styleMobile = "flex justify-between overflow-x-auto no-scrollbar";
 
@@ -27,9 +27,9 @@
 >
   {#each items as item, i (i)}
     {#if variant == 2}
-      <Grid02 {...item} />
+      <Grid02 {...item} {isLoading} />
     {:else}
-      <Grid01 {...item} />
+      <Grid01 {...item} {isLoading} />
     {/if}
   {/each}
 </div>

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

@@ -1,14 +1,20 @@
 <script lang="ts">
+    import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+
     let {
+        isLoading,
         description,
         descriptionClass,
     }: {
+        isLoading?: boolean;
         description?: string;
         descriptionClass?: string;
     } = $props();
 </script>
 
-{#if description}
+{#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"
     >

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

@@ -1,4 +1,5 @@
 type $$ComponentProps = {
+    isLoading?: boolean;
     description?: string;
     descriptionClass?: string;
 };

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

@@ -1,15 +1,20 @@
 <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 typeof icon === "string"}
+{#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" />

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

@@ -1,6 +1,7 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
 type $$ComponentProps = {
     icon: string | IconSvgElement;
+    isLoading?: boolean;
 };
 declare const IconRenderGrid: import("svelte").Component<$$ComponentProps, {}, "">;
 type IconRenderGrid = ReturnType<typeof IconRenderGrid>;

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

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

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

@@ -1,4 +1,5 @@
 type $$ComponentProps = {
+    isLoading?: boolean;
     title?: string;
     titleClass?: string;
 };

package/dist/globals.css

@@ -768,6 +768,9 @@
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
+  .h-2\.5 {
+    height: calc(var(--spacing) * 2.5);
+  }
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
@@ -1104,6 +1107,9 @@
   .min-w-5 {
     min-width: calc(var(--spacing) * 5);
   }
+  .min-w-17\.5 {
+    min-width: calc(var(--spacing) * 17.5);
+  }
   .min-w-25 {
     min-width: calc(var(--spacing) * 25);
   }
@@ -1828,6 +1834,12 @@
       background-color: color-mix(in oklab, var(--color-gray-500) 90%, transparent);
     }
   }
+  .bg-gray-500\/95 {
+    background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 95%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-500) 95%, transparent);
+    }
+  }
   .bg-gray-800\/50 {
     background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -4368,6 +4380,9 @@
     .md\:max-w-md {
       max-width: var(--container-md);
     }
+    .md\:min-w-25 {
+      min-width: calc(var(--spacing) * 25);
+    }
     .md\:min-w-32 {
       min-width: calc(var(--spacing) * 32);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "negodesign",
-	"version": "0.0.58",
+	"version": "0.0.59",
 	"type": "module",
 	"license": "MIT",
 	"sideEffects": [