@syscore/ui-library 1.3.2 → 1.3.3

package/client/components/ui/card.tsx

@@ -83,10 +83,10 @@ const CardWithIcon = React.forwardRef<
 >(({ icon: Icon, title, description }, ref) => (
   <Card
     ref={ref}
-    className="border-gray-100 bg-white p-6 gap-6 hover:scale-102 hover:border-gray-200 ease-in-out duration-200 will-change-transform"
+    className="card-with-icon"
   >
-    <div className="flex items-center gap-4">
-      {Icon && <Icon className="size-12" />}
+    <div className="card-with-icon__header">
+      {Icon && <Icon className="card-with-icon__icon" />}
       <Text as="h3" variant="overline-large">{title}</Text>
     </div>
     <Text as="p" variant="body-base">{description}</Text>

package/client/global.css

@@ -400,6 +400,31 @@
   color: var(--color-gray-800, #282a31);
 }
 
+.card-with-icon {
+  border: 1px solid var(--color-gray-100, #eff1f2);
+  background-color: var(--color-white, #fff);
+  padding: 1.5rem;
+  gap: 1.5rem;
+  transition: transform 200ms ease-in-out, border-color 200ms ease-in-out;
+  will-change: transform;
+}
+
+.card-with-icon:hover {
+  transform: scale(1.02);
+  border-color: var(--color-gray-200, #dedfe3);
+}
+
+.card-with-icon__header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.card-with-icon__icon {
+  width: 3rem;
+  height: 3rem;
+}
+
 /* Input Styles */
 .input-wrapper {
   display: flex;