Chip and RadioButton first implementation

app/components/Chip.tsx

@@ -1,16 +1,35 @@
 "use client";
 import styled from "styled-components";
 
-// TODO: Add props for Chip
+// Props for Chip
 type ChipProps = {
-  propName: string; // replace string with actual prop type
+  label: string; // Text
+  onClick?: () => void; //Click handler for the chip (optional)
+  onRemove?: () => void; // Remove action (optional)
 };
 
-// TODO: implement Chip component
-export default function Chip({}: ChipProps) {
-  return <StyledChip />;
+// Chip component
+export default function Chip({ label, onClick }: ChipProps) {
+  return <StyledChip onClick={onClick}>{label}</StyledChip>;
 }
 
+// Styled chip container
 const StyledChip = styled.div`
-  /* TODO: Add styles for Chip */
+  display: inline-flex; /* Inline flex container */
+  padding: var(--Scaling-3XS, 2px) var(--Scaling-XS, 8px); /* Inside spacing */
+  justify-content: center; /* Center content horizontally */
+  align-items: center; /* Center content vertically */
+  gap: var(--Scaling-3XS, 2px); /* Space between items */
+
+  border-radius: 100px;
+  background: var(--light-orange);
+
+  color: var(--black);
+  font-family: Inter;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 160% */
+
+  cursor: pointer;
 `;

app/components/RadioButton.tsx

@@ -3,14 +3,104 @@ import styled from "styled-components";
 
 // TODO: Add props for Radio
 type RadioProps = {
-  propName: string; // replace string with actual prop type
+  name: string; // Groups - Ensures one in the group can be selected
+  value: string; // Value - The value this specific radio button represents
+  checked?: boolean; // Checked -Whether the radio button is currently selected
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void; // OnChange - What happens when the radio button is selected
+  label?: string; // Label - Optional text displayed next to the radio button
+  id?: string; // Id - Optional unique identifier (helps with accessibility and linking labels)
 };
 
 // TODO: implement Radio component
-export default function Radio({}: RadioProps) {
-  return <StyledRadio />;
+export default function Radio({
+  name,
+  value,
+  checked = false,
+  onChange,
+  label,
+  id,
+}: RadioProps) {
+  return (
+    <Label htmlFor={id}>
+      <StyledRadio
+        id={id}
+        name={name}
+        value={value}
+        checked={checked}
+        onChange={onChange}
+      />
+      {label && <span>{label}</span>}{" "}
+      {/* Optional text displayed next to the radio button, in span for separation in styling */}
+    </Label>
+  );
 }
 
 const StyledRadio = styled.input.attrs({ type: "radio" })`
-  /* TODO: Add styles for Radio */
+  /* Base styles (applied to all states) */
+  width: 22px;
+  height: 22px;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 50%;
+  border: 1px solid var(--gray);
+  background: var(--white);
+
+  &:hover:not(:checked) {
+    background: var(--light-gray);
+    border-color: var(--gray);
+  }
+
+  &:checked:not(:hover) {
+    border: 1px solid var(--orange);
+    background: var(--white);
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: var(--orange);
+    }
+  }
+
+  &:hover:checked {
+    border: 1px solid var(--light-orange);
+    background: var(--white);
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: var(--light-orange);
+    }
+  }
+`;
+
+// Figma Body 1 typography
+const Label = styled.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+
+  span {
+    color: #000;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px; /* 150% */
+  }
 `;