feat(col): add support for extra small column size (4) (#520)

Author: Sembauke

src/col/col.stories.tsx

@@ -7,11 +7,11 @@ const story = {
 	component: Col,
 	argTypes: {
 		className: { control: { type: "text" } },
-		xs: { options: [8, 12, undefined] },
+		xs: { options: [4, 6, 8, 12, undefined] },
 		sm: { options: [2, 4, 6, 8, 10, 12, undefined] },
-		md: { options: [4, 6, 8, 10, undefined] },
+		md: { options: [4, 6, 8, 10, 12, undefined] },
 		lg: { options: [6, 8, 10, undefined] },
-		xsOffset: { options: [2, 3, undefined] },
+		xsOffset: { options: [1, 2, 3, undefined] },
 		smOffset: { options: [1, 2, 3, 4, undefined] },
 		mdOffset: { options: [1, 2, 3, 4, undefined] },
 		lgOffset: { options: [0, 1, 2, undefined] },

src/col/col.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { ColProps } from "./types";
 
 const ExtraSmallClasses = {
+	4: "w-1/3",
 	6: "w-1/2",
 	8: "w-2/3",
 	10: "w-5/6",

src/col/types.ts

@@ -1,7 +1,7 @@
 export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
 	className?: string;
 	children?: React.ReactNode;
-	xs?: 6 | 8 | 10 | 12;
+	xs?: 4 | 6 | 8 | 10 | 12;
 	sm?: 2 | 4 | 5 | 6 | 8 | 10 | 12;
 	md?: 4 | 6 | 8 | 10 | 12;
 	lg?: 6 | 8 | 10;