negodesign 0.0.61 → 0.0.62

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/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.62",
 	"type": "module",
 	"license": "MIT",
 	"sideEffects": [