negodesign 0.0.61 → 0.0.63

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

@@ -4,6 +4,7 @@ export interface ItemGridProps {
     title: string;
     isLoading?: boolean;
     description?: string;
+    iconClass?: string;
     titleClass?: string;
     descriptionClass?: string;
     icon: string | IconSvgElement;

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

@@ -9,6 +9,7 @@
         icon,
         title,
         isLoading,
+        iconClass,
         titleClass,
         description,
         descriptionClass,
@@ -20,9 +21,9 @@
     onclick={() => {
         if (id && onClick) onClick(id);
     }}
-    class="flex flex-col justify-center items-center gap-2"
+    class="flex flex-col justify-center items-center gap-2 hover:bg-primary/30 rounded-xl"
 >
-    <IconRenderGrid {icon} {isLoading} />
+    <IconRenderGrid {icon} {iconClass} {isLoading} />
     <TitleGrid {titleClass} {title} {isLoading} />
     <DescriptionGrid {descriptionClass} {description} {isLoading} />
 </button>

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

@@ -10,6 +10,7 @@
         title,
         isLoading,
         description,
+        iconClass,
         titleClass,
         descriptionClass,
         onClick,
@@ -20,9 +21,9 @@
     onclick={() => {
         if (id && onClick) onClick(id);
     }}
-    class="flex flex-col justify-center items-center gap-2 border rounded-lg p-2 cursor-pointer"
+    class="flex flex-col justify-center items-center gap-2 border rounded-lg p-2 cursor-pointer hover:bg-primary/30"
 >
-    <IconRenderGrid {icon} {isLoading} />
+    <IconRenderGrid {icon} {iconClass} {isLoading} />
     <TitleGrid {titleClass} {title} {isLoading} />
     <DescriptionGrid {descriptionClass} {description} {isLoading} />
 </button>

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

@@ -17,11 +17,21 @@
     : '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}
+  {#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/core/grid/ui/SimpleGrid.svelte

@@ -4,7 +4,7 @@
   import Grid02 from "./02/Grid02.svelte";
   import Grid01 from "./01/Grid01.svelte";
 
-  let { variant, className, isLoading, items }: GridProps = $props();
+  let { variant, className, isLoading, onClick, items }: GridProps = $props();
 
   const styleMobile = "flex justify-between overflow-x-auto no-scrollbar";
 
@@ -25,11 +25,21 @@
 <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}
+  {#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/core/grid/ui/shared/IconRenderGrid.svelte

@@ -5,9 +5,11 @@
 
     let {
         icon,
+        iconClass,
         isLoading,
     }: {
         icon: string | IconSvgElement;
+        iconClass?: string;
         isLoading?: boolean;
     } = $props();
 </script>
@@ -15,7 +17,7 @@
 {#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>
+    <i class="{icon} text-4xl md:text-6xl {iconClass}"></i>
 {:else}
-    <HugeiconsIcon {icon} class="size-8 md:size-10" />
+    <HugeiconsIcon {icon} class="size-8 md:size-10 {iconClass}" />
 {/if}

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;
+    iconClass?: string;
     isLoading?: boolean;
 };
 declare const IconRenderGrid: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/globals.css

@@ -3353,6 +3353,14 @@
     .hover\:bg-neutral-800:hover {
       background-color: var(--color-neutral-800);
     }
+    .hover\:bg-primary\/30:hover {
+      background-color: var(--primary);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/30:hover {
+        background-color: color-mix(in oklab, var(--primary) 30%, transparent);
+      }
+    }
     .hover\:bg-primary\/80:hover {
       background-color: var(--primary);
     }

package/package.json

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