refactor(styles): Migrate Chip From ReactJS

Author: Brayan-724

js/react/lib/components/chip/chip.component.tsx

@@ -12,12 +12,7 @@ export const Chip = (props: ChipProps) => {
   const { label, variant = "featured", className, ...attr } = props;
   return (
     <div
-      className={cn(
-        ...variants[variant],
-        "flex w-fit cursor-default items-center justify-center gap-1 transition",
-        "[&>svg]:size-3.5",
-        className
-      )}
+      className={cn(variants[variant], "rustlanges-chip", className)}
       {...attr}
     >
       {icons[variant] ? React.createElement(icons[variant]) : null}

js/react/lib/components/chip/chip.const.ts

@@ -1,41 +1,11 @@
 import { Location, StarBold } from "@/icons";
 
 export const variants = {
-  featured: [
-    "border rounded-[20px]",
-    "bg-primary-400 border-black text-black",
-    "min-h-[32px]",
-    "text-sm",
-    "p-[4px] px-[12px]",
-  ],
-  numeric: [
-    "border rounded-[20px]",
-    "bg-primary-200 border-black text-black",
-    "min-h-[32px]",
-    "text-sm",
-    "p-[4px] px-[12px]",
-  ],
-  description: [
-    "border rounded-[20px]",
-    "bg-secondary-200 border-black text-black",
-    "min-h-[32px]",
-    "text-sm",
-    "p-[4px] px-[12px]",
-  ],
-  location: [
-    "border rounded-[20px]",
-    "bg-secondary-200 border-black text-black",
-    "min-h-[24px]",
-    "text-sm",
-    "p-[2px] px-[12px]",
-  ],
-  small: [
-    "border rounded-[20px]",
-    "bg-secondary-200 border-black text-black",
-    "min-h-[22px]",
-    "text-xs",
-    "p-[2px] px-[8px]",
-  ],
+  featured: "rustlanges-chip--featured",
+  numeric:  "rustlanges-chip--numeric",
+  description:  "rustlanges-chip--description",
+  location:  "rustlanges-chip--location",
+  small:  "rustlanges-chip--small",
 };
 
 export type ChipVariants = keyof typeof variants;

styles/components.css

@@ -1,4 +1,5 @@
 @import "./components/avatar.css";
 @import "./components/badge.css";
 @import "./components/button.css";
+@import "./components/chip.css";
 @import "./components/text.css";

styles/components/chip.css

@@ -0,0 +1,46 @@
+@layer components {
+  .rustlanges-chip {
+    @apply flex w-fit cursor-default items-center justify-center gap-1 transition;
+    @apply [&>svg]:size-3.5;
+  }
+
+  .rustlanges-chip--featured {
+    @apply rounded-[20px] border;
+    @apply bg-primary-400 border-black text-black;
+    @apply min-h-[32px];
+    @apply text-sm;
+    @apply p-[4px] px-[12px];
+  }
+
+  .rustlanges-chip--numeric {
+    @apply rounded-[20px] border;
+    @apply bg-primary-200 border-black text-black;
+    @apply min-h-[32px];
+    @apply text-sm;
+    @apply p-[4px] px-[12px];
+  }
+
+  .rustlanges-chip--description {
+    @apply rounded-[20px] border;
+    @apply bg-secondary-200 border-black text-black;
+    @apply min-h-[32px];
+    @apply text-sm;
+    @apply p-[4px] px-[12px];
+  }
+
+  .rustlanges-chip--location {
+    @apply rounded-[20px] border;
+    @apply bg-secondary-200 border-black text-black;
+    @apply min-h-[24px];
+    @apply text-sm;
+    @apply p-[2px] px-[12px];
+  }
+
+  .rustlanges-chip--small {
+    @apply rounded-[20px] border;
+    @apply bg-secondary-200 border-black text-black;
+    @apply min-h-[22px];
+    @apply text-xs;
+    @apply p-[2px] px-[8px];
+  }
+}