From 349a17a71f846b6e3c1f060880605225cee46737 Mon Sep 17 00:00:00 2001
From: indaviande <vianney@double.cat>
Date: Wed, 11 Dec 2024 12:50:18 +0100
Subject: [PATCH 1/3] working on table row + new hero image

---
 src/components/extenders/Modal.tsx  |   2 +-
 src/components/primitives/Box.tsx   |  27 ++++++-
 src/components/primitives/Icon.tsx  |  37 ++++++---
 src/components/primitives/Table.tsx |  91 +++++++++++++++++-----
 src/components/primitives/Tabs.tsx  |  33 ++++++++
 src/components/primitives/Text.tsx  | 116 ++++++++++++++++------------
 src/components/primitives/Title.tsx |  52 +++++++++++--
 src/utils/css.ts                    |  30 ++++++-
 8 files changed, 297 insertions(+), 91 deletions(-)

diff --git a/src/components/extenders/Modal.tsx b/src/components/extenders/Modal.tsx
index 2b44e36c6..e591d53f0 100644
--- a/src/components/extenders/Modal.tsx
+++ b/src/components/extenders/Modal.tsx
@@ -28,7 +28,7 @@ export default function Modal({ state, title, description, modal, children, clas
         <Dialog.Content
           style={vars}
           className={mergeClass("fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2", className)}>
-          <Box size="xl" className="!p-md*4 lg:!p-lg*4 shadow-md" {...props}>
+          <Box size="xl" className="p-lg*4 shadow-md" {...props}>
             {title && (
               <Dialog.Title asChild={!!title}>
                 {typeof title === "string" ? <Title h={3}>{title}</Title> : title}
diff --git a/src/components/primitives/Box.tsx b/src/components/primitives/Box.tsx
index f1361fc7f..bbea75a65 100644
--- a/src/components/primitives/Box.tsx
+++ b/src/components/primitives/Box.tsx
@@ -1,3 +1,27 @@
+/**
+ * Box Component
+ * 
+ * A flexible container component that serves as a fundamental building block for layouts.
+ * It provides various visual styles and sizing options through variants.
+ * 
+ * @variants
+ * content:
+ *  - xs to xl: Content size variants
+ * 
+ * container:
+ *  - true/false: Controls container behavior
+ * 
+ * @compoundVariants
+ * The component uses compound variants to determine border radius (rounded corners):
+ * - When container=true: Uses both size and content values (rounded-${size}+${content})
+ * - When container=false: Uses only size value (rounded-${size})
+ * 
+ * @example
+ * <Box look="soft" size="md" content="sm" container={true}>
+ *   Content goes here
+ * </Box>
+ */
+
 import { tv } from "tailwind-variants";
 import useThemedVariables from "../../hooks/theming/useThemedVariables";
 import { mergeClass } from "../../utils/css";
@@ -57,7 +81,6 @@ export const boxStyles = tv(
       ]),
     ),
   },
-  { twMerge: false },
 );
 
 export type BoxProps = Component<Styled<typeof boxStyles> & Themable>;
@@ -78,7 +101,7 @@ export default function Box({
   return (
     <div
       style={Object.assign(style ?? {}, themeVars)}
-      className={mergeClass(boxStyles({ look, size, content, container: container !== false }), className)}
+      className={mergeClass(boxStyles({ look, size, content, container: container !== false }),className)}
       {...props}
     />
   );
diff --git a/src/components/primitives/Icon.tsx b/src/components/primitives/Icon.tsx
index fe28ef0e4..33d65f6bb 100644
--- a/src/components/primitives/Icon.tsx
+++ b/src/components/primitives/Icon.tsx
@@ -2,11 +2,12 @@ import * as RemixIcon from "@remixicon/react";
 import { type ReactElement, useMemo } from "react";
 import { tv } from "tailwind-variants";
 import { mergeClass } from "../..";
-import type { Component, Styled } from "../..";
+import type { Component, Styled, Themable } from "../..";
+import useThemableProps from "../../hooks/theming/useThemableProps";
 import Image from "./Image";
 
 export const iconStyles = tv({
-  base: "flex flex-col border-0   overflow-hidden self-center rounded-sm w-[1em] h-[1em]",
+  base: "flex flex-col border-0 overflow-hidden self-center rounded-sm w-[1em] h-[1em]",
   variants: {
     size: {
       xs: "",
@@ -26,20 +27,38 @@ export const iconStyles = tv({
 });
 
 export type IconProps = Component<
-  Styled<typeof iconStyles> & {
-    src?: string;
-    remix?: keyof typeof RemixIcon;
-  },
+  Styled<typeof iconStyles> &
+    Themable & {
+      src?: string;
+      remix?: keyof typeof RemixIcon;
+    },
   HTMLImageElement
 >;
 
-export default function Icon({ rounded, remix, size, src, alt, className, ...props }: IconProps) {
+export default function Icon({
+  rounded,
+  remix,
+  size,
+  src,
+  alt,
+  className,
+  ...props
+}: IconProps) {
+  const themeVars = useThemableProps(props);
   const styles = useMemo(() => iconStyles({ rounded, size }), [rounded, size]);
 
   const Component = useMemo(() => {
     if (remix) return RemixIcon[remix] as () => ReactElement;
-    return (imageProps: Component<unknown>) => <Image alt={alt} src={src} {...imageProps} />;
+    return (imageProps: Component<unknown>) => (
+      <Image alt={alt} src={src} {...imageProps} />
+    );
   }, [remix, alt, src]);
 
-  return <Component {...props} className={mergeClass(styles, className)} />;
+  return (
+    <Component
+      {...props}
+      style={themeVars}
+      className={mergeClass(styles, className)}
+    />
+  );
 }
diff --git a/src/components/primitives/Table.tsx b/src/components/primitives/Table.tsx
index a98e74021..9d6cb7646 100644
--- a/src/components/primitives/Table.tsx
+++ b/src/components/primitives/Table.tsx
@@ -1,4 +1,9 @@
-import { type PropsWithChildren, type ReactNode, useMemo, useState } from "react";
+import {
+  type PropsWithChildren,
+  type ReactNode,
+  useMemo,
+  useState,
+} from "react";
 import { useMediaQuery } from "react-responsive";
 import { tv } from "tailwind-variants";
 import { mergeClass } from "../../utils/css";
@@ -72,7 +77,12 @@ export type RowProps<T extends Columns> = Component<
   >
 >;
 
-export function Row<T extends Columns>({ columns, exclude, children, ...props }: RowProps<T>) {
+export function Row<T extends Columns>({
+  columns,
+  exclude,
+  children,
+  ...props
+}: RowProps<T>) {
   const isScreenSmall = useMediaQuery({ maxWidth: 640 });
   const [ids, grid, compact] = useMemo(() => {
     const cols = Object.keys(columns ?? {}) as (keyof T)[];
@@ -84,7 +94,7 @@ export function Row<T extends Columns>({ columns, exclude, children, ...props }:
       display: "grid",
       rowGap: "0px",
       gridTemplateColumns: cols
-        .map(id => {
+        .map((id) => {
           if (exclude?.includes(id)) return;
           return columns?.[id]?.size ?? "1fr";
         })
@@ -93,8 +103,8 @@ export function Row<T extends Columns>({ columns, exclude, children, ...props }:
     const compactStyle: { display: "grid"; gridTemplateColumns: string } = {
       display: "grid",
       gridTemplateColumns: cols
-        .filter(id => !columns?.[id]?.main)
-        .map(id => columns?.[id]?.compactSize ?? "1fr")
+        .filter((id) => !columns?.[id]?.main)
+        .map((id) => columns?.[id]?.compactSize ?? "1fr")
         .join(" "),
     };
 
@@ -112,8 +122,10 @@ export function Row<T extends Columns>({ columns, exclude, children, ...props }:
 
   return (
     <Box style={isScreenSmall ? compact : grid} {...divProps}>
-      {ids?.map(id => {
-        const element = props[`${String(id)}Column` as keyof typeof props] as ReactNode;
+      {ids?.map((id) => {
+        const element = props[
+          `${String(id)}Column` as keyof typeof props
+        ] as ReactNode;
         const { className, main } = columns[id];
 
         if (exclude?.includes(id)) return;
@@ -123,17 +135,22 @@ export function Row<T extends Columns>({ columns, exclude, children, ...props }:
             style={
               main && isScreenSmall
                 ? {
-                    gridColumn: `span ${ids?.length - 1} / span ${ids?.length - 1}`,
+                    gridColumn: `span ${ids?.length - 1} / span ${
+                      ids?.length - 1
+                    }`,
                   }
                 : {}
             }
             key={String(id)}
-            className={[className, "inline-flex items-center"].join(" ")}>
+            className={[className, "inline-flex items-center"].join(" ")}
+          >
             {element}
           </div>
         );
       })}
-      {children && <EventBlocker style={{ gridColumn: "1 / -1" }}>{children}</EventBlocker>}
+      {children && (
+        <EventBlocker style={{ gridColumn: "1 / -1" }}>{children}</EventBlocker>
+      )}
     </Box>
   );
 }
@@ -161,7 +178,7 @@ export function useHeaders<T extends Columns>(
   onHeaderClick?: (id: keyof T) => void,
   sortBy?: keyof T,
   order?: Order,
-  props?: TableHeaders<T>,
+  props?: TableHeaders<T>
 ) {
   //TODO: assess if props needs to be updated for columns and how to memo all columns
   // biome-ignore lint/correctness/useExhaustiveDependencies: props in dependency would render the memo useless
@@ -172,15 +189,26 @@ export function useHeaders<T extends Columns>(
     for (const id of ids) {
       const { name: title, className: _className } = columns[id];
       const isSortable = sortable?.includes(id);
-      const handler = title && isSortable ? () => onHeaderClick?.(id) : undefined;
+      const handler =
+        title && isSortable ? () => onHeaderClick?.(id) : undefined;
 
       head[`${id}Column` as keyof TableColumns<T>] = (
-        <Text className="relative font-text" size="md" interactable={isSortable} onKeyDown={handler} onClick={handler}>
+        <Text
+          className="relative font-text"
+          size="md"
+          interactable={isSortable}
+          onKeyDown={handler}
+          onClick={handler}
+        >
           {props?.[`${id}Header` as keyof TableHeaders<T>] ?? title}
           <span className="absolute -right-5 top-1/2 -translate-y-1/2">
             {sortable &&
               id === sortBy &&
-              (order === "desc" ? <Icon remix={"RiArrowDropDownLine"} /> : <Icon remix={"RiArrowDropUpLine"} />)}
+              (order === "desc" ? (
+                <Icon remix={"RiArrowDropDownLine"} />
+              ) : (
+                <Icon remix={"RiArrowDropUpLine"} />
+              ))}
           </span>
         </Text>
       );
@@ -209,7 +237,8 @@ export function Table<T extends Columns>({
   const [sortBy, setSortBy] = useState<keyof T | undefined>(sortable?.[0]);
 
   function onHeaderClick(id: keyof T) {
-    const currentOrder = id !== sortBy ? "desc" : _order === "desc" ? "asc" : "desc";
+    const currentOrder =
+      id !== sortBy ? "desc" : _order === "desc" ? "asc" : "desc";
 
     setOrder(currentOrder);
     setSortBy(id);
@@ -217,13 +246,27 @@ export function Table<T extends Columns>({
   }
 
   // biome-ignore lint/suspicious/noExplicitAny: please forgive this any
-  const headers = useHeaders(columns, sortable, onHeaderClick, sort ?? sortBy, order ?? _order, props as any);
+  const headers = useHeaders(
+    columns,
+    sortable,
+    onHeaderClick,
+    sort ?? sortBy,
+    order ?? _order,
+    props as any
+  );
 
   return (
-    <List indexOffset={header ? 0 : 1} className={mergeClass(className)} look={look} {...props}>
+    <List
+      indexOffset={header ? 0 : 1}
+      className={mergeClass(className)}
+      look={look}
+      {...props}
+    >
       {!!header ? <Box className="bg-auto">{header}</Box> : undefined}
       {/* biome-ignore lint/suspicious/noExplicitAny: please forgive this one as well */}
-      {!hideLabels ? <Row {...(headers as any)} columns={columns} /> : undefined}
+      {!hideLabels ? (
+        <Row {...(headers as any)} columns={columns} />
+      ) : undefined}
       {children}
       {!!footer ? <Box className="bg-auto">{footer}</Box> : undefined}
     </List>
@@ -233,11 +276,17 @@ export function Table<T extends Columns>({
 export function createTable<T extends Columns>(columns: T) {
   const TemplateTable = (props: Omit<TableProps<T>, "columns"> & ListProps) => (
     // biome-ignore lint/suspicious/noExplicitAny: no reasons for it to have type errors
-    <Table {...(props as any)} columns={columns} />
+    <Table size="lg" {...(props as any)} columns={columns} />
   );
 
   // biome-ignore lint/suspicious/noExplicitAny: no reasons for it to have type errors
-  const TemplateRow = (props: Omit<RowProps<T>, "columns">) => <Row {...(props as any)} columns={columns} />;
+  const TemplateRow = (props: Omit<RowProps<T>, "columns">) => (
+    <Row {...(props as any)} columns={columns} />
+  );
 
-  return [TemplateTable, TemplateRow, Object.keys(columns)] as [typeof TemplateTable, typeof TemplateRow, (keyof T)[]];
+  return [TemplateTable, TemplateRow, Object.keys(columns)] as [
+    typeof TemplateTable,
+    typeof TemplateRow,
+    (keyof T)[]
+  ];
 }
diff --git a/src/components/primitives/Tabs.tsx b/src/components/primitives/Tabs.tsx
index 6c10178d3..1a1fd80bd 100644
--- a/src/components/primitives/Tabs.tsx
+++ b/src/components/primitives/Tabs.tsx
@@ -1,3 +1,36 @@
+/**
+ * @component Tabs
+ * @description A flexible and customizable tabs component that supports different visual styles and navigation.
+ * 
+ * @features
+ * - Multiple visual styles (soft, base, bold, tint, hype)
+ * - Responsive design with Tailwind CSS
+ * - Built-in navigation support using Remix's Link component
+ * - Customizable themes
+ * - Accessibility features including keyboard navigation
+ * 
+ * @usage
+ * ```tsx
+ * <Tabs
+ *   tabs={[
+ *     { label: "Tab 1", link: "/tab1", key: "1" },
+ *     { label: "Tab 2", link: "/tab2", key: "2" }
+ *   ]}
+ *   look="soft"
+ *   theme="custom"
+ * />
+ * ```
+ * 
+ * @props
+ * - tabs: Array of tab items with label, link, and key
+ * - look: Visual style variant (soft, base, bold, tint, hype)
+ * - size: Size variant
+ * - theme: Custom theme override
+ * - className: Additional CSS classes
+ * - disabled: Whether the tabs are disabled
+ * - to: Default navigation path
+ */
+
 import { Link, useLocation } from "@remix-run/react";
 
 import type { ReactNode } from "react";
diff --git a/src/components/primitives/Text.tsx b/src/components/primitives/Text.tsx
index 1134fa8b7..b82f7281f 100644
--- a/src/components/primitives/Text.tsx
+++ b/src/components/primitives/Text.tsx
@@ -2,59 +2,77 @@ import { tv } from "tailwind-variants";
 import { mergeClass } from "../../utils/css";
 import type { Component, Styled } from "../../utils/types";
 
-export const textStyles = tv(
-  {
-    base: "text-main-11 font-text text-[clamp(15px,0.4167vw+0.78125rem,20px)]",
-    variants: {
-      look: {
-        base: "text-main-11",
-        soft: "text-main-11",
-        bold: "text-main-12",
-        tint: "text-accent-12",
-        hype: "text-accent-11",
-      },
-      size: {
-        xs: "text-xs",
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
-        xl: "text-xl",
-        display1: "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]",
-        1: "font-title !text-3xl",
-        2: "font-title font-bold leading-none italic !text-[clamp(38px,0.667vw+2.125rem,46px)]",
-        3: "font-title font-bold leading-none italic !text-[clamp(26px,0.667vw+1.375rem,34px)]",
-        4: "font-title font-bold leading-[1.18] !text-[clamp(18px,0.667vw+0.875rem,26px)]",
-        5: "font-title font-bold leading-normal !text-[clamp(15px,0.25vw+0.84375rem,18px)] uppercase tracking-[1.6px] ",
-        6: "font-title !text-sm",
-      },
-      interactable: {
-        true: "cursor-pointer select-none",
-        false: "",
-      },
+export const textStyles = tv({
+  base: "font-text text-[clamp(15px,0.4167vw+0.78125rem,20px)]",
+  variants: {
+    look: {
+      base: "text-main-11",
+      soft: "text-main-11",
+      bold: "text-main-12",
+      tint: "text-accent-12",
+      hype: "text-accent-11",
     },
-    defaultVariants: {
-      size: "md",
-      look: "base",
-      interactable: false,
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      display1:
+        "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]",
+      1: "font-title !text-3xl",
+      2: "font-title font-bold leading-none italic !text-[clamp(38px,0.667vw+2.125rem,46px)]",
+      3: "font-title font-bold leading-none italic !text-[clamp(26px,0.667vw+1.375rem,34px)]",
+      4: "font-title font-bold leading-[1.18] !text-[clamp(18px,0.667vw+0.875rem,26px)]",
+      5: "font-title font-bold leading-none !text-[clamp(15px,0.25vw+0.84375rem,18px)] uppercase tracking-[0.8px] ",
+      6: "font-title !text-sm",
+    },
+    interactable: {
+      true: "cursor-pointer select-none",
+      false: "",
     },
-    compoundVariants: [
-      { look: "soft", interactable: true, class: "hover:text-main-12" },
-      {
-        look: "base",
-        interactable: true,
-        class: "hover:text-main-12 active:text-main-11",
-      },
-      { look: "bold", interactable: true, class: "hover:text-main-12" },
-      { look: "tint", interactable: true, class: "hover:text-main-12" },
-      { look: "hype", interactable: true, class: "hover:text-main-12" },
-    ],
   },
-  { twMerge: false },
-);
+  defaultVariants: {
+    size: "md",
+    look: "base",
+    interactable: false,
+  },
+  compoundVariants: [
+    { look: "soft", interactable: true, class: "hover:text-main-12" },
+    {
+      look: "base",
+      interactable: true,
+      class: "hover:text-main-12 active:text-main-11",
+    },
+    { look: "bold", interactable: true, class: "hover:text-main-12" },
+    { look: "tint", interactable: true, class: "hover:text-main-12" },
+    { look: "hype", interactable: true, class: "hover:text-main-12" },
+  ],
+});
 
-export type TextProps = Component<Styled<typeof textStyles> & { bold?: boolean }, HTMLParagraphElement>;
+export type TextProps = Component<
+  Styled<typeof textStyles> & { bold?: boolean },
+  HTMLParagraphElement
+>;
 
-export default function Text({ look, size, style, bold, interactable, className, ...props }: TextProps) {
+export default function Text({
+  look,
+  size,
+  style,
+  bold,
+  interactable,
+  className,
+  ...props
+}: TextProps) {
   const styleBold = bold ? "font-bold" : "";
-  return <p className={mergeClass(textStyles({ look, size, interactable }), styleBold, className)} {...props} />;
+  return (
+    <p
+      className={mergeClass(
+        textStyles({ look, size, interactable }),
+        styleBold,
+        className
+      )}
+      {...props}
+    />
+  );
 }
diff --git a/src/components/primitives/Title.tsx b/src/components/primitives/Title.tsx
index 2880c70d1..ebd6a792b 100644
--- a/src/components/primitives/Title.tsx
+++ b/src/components/primitives/Title.tsx
@@ -6,7 +6,7 @@ import { textStyles } from "./Text";
 export const titleStyles = tv(
   {
     extend: textStyles,
-    base: "text-main-12 font-title font-bold",
+    base: "font-title font-bold",
     variants: {
       look: {
         base: "text-main-12",
@@ -20,7 +20,7 @@ export const titleStyles = tv(
       look: "base",
     },
   },
-  { twMerge: false },
+  { twMerge: false }
 );
 
 export type TitleProps = Component<
@@ -31,19 +31,55 @@ export type TitleProps = Component<
   HTMLHeadingElement
 >;
 
-export default function Title({ look, h, size: _size, className, ...props }: TitleProps) {
+export default function Title({
+  look,
+  h,
+  size: _size,
+  className,
+  ...props
+}: TitleProps) {
   const size = _size ?? h;
   switch (h) {
     case 1:
-      return <h1 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return (
+        <h1
+          className={clsx(titleStyles({ look, size }), className)}
+          children={" "}
+          {...props}
+        />
+      );
     case 2:
-      return <h2 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return (
+        <h2
+          className={clsx(titleStyles({ look, size }), className)}
+          children={" "}
+          {...props}
+        />
+      );
     case 3:
-      return <h3 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return (
+        <h3
+          className={clsx(titleStyles({ look, size }), className)}
+          children={" "}
+          {...props}
+        />
+      );
     case 4:
-      return <h4 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return (
+        <h4
+          className={clsx(titleStyles({ look, size }), className)}
+          children={" "}
+          {...props}
+        />
+      );
     case 5:
-      return <h5 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return (
+        <h5
+          className={clsx(titleStyles({ look, size }), className)}
+          children={" "}
+          {...props}
+        />
+      );
     default:
       break;
   }
diff --git a/src/utils/css.ts b/src/utils/css.ts
index 396ab454d..6b4ed489a 100644
--- a/src/utils/css.ts
+++ b/src/utils/css.ts
@@ -1,5 +1,33 @@
 import clsx, { type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      p: ['p-sm/2', 'p-sm/4', 'p-sm*2', 'p-sm*4',
+          'p-md/2', 'p-md/4', 'p-md*2', 'p-md*4',
+          'p-lg/2', 'p-lg/4', 'p-lg*2', 'p-lg*4'],
+      px: ['px-sm/2', 'px-sm/4', 'px-sm*2', 'px-sm*4',
+           'px-md/2', 'px-md/4', 'px-md*2', 'px-md*4',
+           'px-lg/2', 'px-lg/4', 'px-lg*2', 'px-lg*4'],
+      py: ['py-sm/2', 'py-sm/4', 'py-sm*2', 'py-sm*4',
+           'py-md/2', 'py-md/4', 'py-md*2', 'py-md*4',
+           'py-lg/2', 'py-lg/4', 'py-lg*2', 'py-lg*4'],
+      m: ['m-sm/2', 'm-sm/4', 'm-sm*2', 'm-sm*4',
+          'm-md/2', 'm-md/4', 'm-md*2', 'm-md*4',
+          'm-lg/2', 'm-lg/4', 'm-lg*2', 'm-lg*4'],
+      mx: ['mx-sm/2', 'mx-sm/4', 'mx-sm*2', 'mx-sm*4',
+           'mx-md/2', 'mx-md/4', 'mx-md*2', 'mx-md*4',
+           'mx-lg/2', 'mx-lg/4', 'mx-lg*2', 'mx-lg*4'],
+      my: ['my-sm/2', 'my-sm/4', 'my-sm*2', 'my-sm*4',
+           'my-md/2', 'my-md/4', 'my-md*2', 'my-md*4',
+           'my-lg/2', 'my-lg/4', 'my-lg*2', 'my-lg*4'],
+      gap: ['gap-sm/2', 'gap-sm/4', 'gap-sm*2', 'gap-sm*4',
+            'gap-md/2', 'gap-md/4', 'gap-md*2', 'gap-md*4',
+            'gap-lg/2', 'gap-lg/4', 'gap-lg*2', 'gap-lg*4'],
+    },
+  },
+});
 
 /**
  * Merges classes together with the most compatibility possible

From aaf64c4f485e2d37c71d685e45d05e1074d22914 Mon Sep 17 00:00:00 2001
From: indaviande <vianney@double.cat>
Date: Wed, 11 Dec 2024 13:10:37 +0100
Subject: [PATCH 2/3] add fitlers

---
 src/components/extenders/Select.tsx | 101 ++++++++++++++++++----------
 src/components/primitives/Input.tsx |  68 +++++++++++++------
 2 files changed, 115 insertions(+), 54 deletions(-)

diff --git a/src/components/extenders/Select.tsx b/src/components/extenders/Select.tsx
index 8c0b0fdd3..8eecc5c73 100644
--- a/src/components/extenders/Select.tsx
+++ b/src/components/extenders/Select.tsx
@@ -17,7 +17,8 @@ export const selectStyles = tv({
     "text-main-11 rounded-sm flex items-center dim focus-visible:outline-main-12 !leading-none justify-between text-nowrap font-text font-semibold",
   ],
   slots: {
-    dropdown: "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]",
+    dropdown:
+      "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]",
     item: "rounded-sm flex justify-between items-center gap-lg cursor-pointer select-none p-sm outline-offset-0 outline-0 text-nowrap focus-visible:outline-main-12",
     icon: "flex items-center",
     value: "flex gap-sm items-center",
@@ -137,12 +138,14 @@ export type SelectProps<Value> = Component<{
 }> &
   RadixSelect.SelectProps;
 
-type MaybeArray<T, IsArray extends undefined | boolean> = IsArray extends true ? T[] : T;
+type MaybeArray<T, IsArray extends undefined | boolean> = IsArray extends true
+  ? T[]
+  : T;
 
 export default function Select<
   T extends string | number,
   Multiple extends undefined | boolean,
-  Value extends MaybeArray<T, Multiple>,
+  Value extends MaybeArray<T, Multiple>
 >({
   look,
   size,
@@ -174,35 +177,45 @@ export default function Select<
   });
 
   const value = useMemo(() => getter ?? internal, [getter, internal]);
-  const setValue = useCallback((v: Value) => setter?.(v) ?? setInternal(v), [setter]);
+  const setValue = useCallback(
+    (v: Value) => setter?.(v) ?? setInternal(v),
+    [setter]
+  );
 
   const [searchInput, setSearch] = useState<string>();
 
   const matches = useMemo(() => {
     if (!search) return Object.keys(options ?? {});
     // const textToMatch = Object.keys(options ?? {}).map(option => `${option}_${options[option]?.props?.children?.filter(a => typeof a !== "object").join(" ")}`)
-    const textToMatch = Object.keys(options ?? {}).reduce(
-      (matches, option) => {
-        const opt = options?.[option];
-        const key =
-          typeof opt === "string"
-            ? opt
-            : (
-                options?.[option] as Exclude<ReactNode, string | number | boolean | Iterable<ReactNode>>
-              )?.props?.children
-                ?.filter?.((a: unknown) => typeof a !== "object")
-                ?.join(" ");
+    const textToMatch = Object.keys(options ?? {}).reduce((matches, option) => {
+      const opt = options?.[option];
+      const key =
+        typeof opt === "string"
+          ? opt
+          : (
+              options?.[option] as Exclude<
+                ReactNode,
+                string | number | boolean | Iterable<ReactNode>
+              >
+            )?.props?.children
+              ?.filter?.((a: unknown) => typeof a !== "object")
+              ?.join(" ");
 
-        return Object.assign(matches, { [`${option}`]: option }, { [`${key}`]: option });
-      },
-      {} as { [key: string]: keyof typeof options },
-    );
-    const searchMatches = matchSorter(Object.keys(textToMatch), searchInput ?? "").map(key => textToMatch[key]);
+      return Object.assign(
+        matches,
+        { [`${option}`]: option },
+        { [`${key}`]: option }
+      );
+    }, {} as { [key: string]: keyof typeof options });
+    const searchMatches = matchSorter(
+      Object.keys(textToMatch),
+      searchInput ?? ""
+    ).map((key) => textToMatch[key]);
     const uniqueOptionMatches = Array.from(
       searchMatches.reduce((set, option) => {
         set.add(option);
         return set;
-      }, new Set()),
+      }, new Set())
     ) as (typeof value)[];
 
     return uniqueOptionMatches;
@@ -211,7 +224,9 @@ export default function Select<
   const label = useMemo(() => {
     if (
       value &&
-      (typeof value === "number" || typeof value === "string" || typeof value === "symbol") &&
+      (typeof value === "number" ||
+        typeof value === "string" ||
+        typeof value === "symbol") &&
       options?.[value]
     )
       return options?.[value];
@@ -221,8 +236,9 @@ export default function Select<
           <Text
             className={mergeClass(
               prefixLabel(),
-              "w-[1.2em] h-[1.2em] flex items-center justify-center rounded-full bg-main-6 text-main-12",
-            )}>
+              "w-[1.2em] h-[1.2em] flex items-center justify-center rounded-full bg-main-6 text-main-12"
+            )}
+          >
             {value.length}
           </Text>{" "}
           {placeholder}
@@ -234,17 +250,23 @@ export default function Select<
   return (
     <Ariakit.ComboboxProvider
       resetValueOnHide
-      setValue={value => {
+      setValue={(value) => {
         setSearch(value);
-      }}>
+      }}
+    >
       <Ariakit.SelectProvider
-        setValue={v => setValue(v as Value)}
+        setValue={(v) => setValue(v as Value)}
         value={value as string}
-        defaultValue={multiple ? [] : undefined}>
+        defaultValue={multiple ? [] : undefined}
+      >
         <Ariakit.Select className={mergeClass(base(), className)}>
           <div className={valueStyle()}>{label}</div>
           <div className={icon()}>
-            {loading ? <Icon className="animate-spin" remix="RiLoader4Fill" /> : <Icon remix="RiArrowDropDownLine" />}
+            {loading ? (
+              <Icon className="animate-spin" remix="RiLoader4Fill" />
+            ) : (
+              <Icon remix="RiArrowDropDownLine" />
+            )}
           </div>
         </Ariakit.Select>
         <Ariakit.SelectPopover gutter={4} className={dropdown()}>
@@ -254,7 +276,11 @@ export default function Select<
                 <Ariakit.Combobox
                   autoSelect
                   placeholder="Search..."
-                  className={mergeClass(inputStyles({ size: "sm", look: "base" }), "w-full", !search && "hidden")}
+                  className={mergeClass(
+                    inputStyles({ size: "sm", look: "base" }),
+                    "w-full",
+                    !search && "hidden"
+                  )}
                 />
               </div>
             )}
@@ -277,7 +303,11 @@ export default function Select<
                             key="select"
                             className={mergeClass(
                               check(),
-                              !((typeof value === "object" && value?.length > 0) || value === undefined) && "opacity-0",
+                              !(
+                                (typeof value === "object" &&
+                                  value?.length > 0) ||
+                                value === undefined
+                              ) && "opacity-0"
                             )}
                             size="sm"
                             remix="RiCheckFill"
@@ -287,7 +317,7 @@ export default function Select<
                     }
                   />
                 )}
-                {matches?.map(_value => (
+                {matches?.map((_value) => (
                   <Ariakit.SelectItem
                     key={_value as string}
                     value={_value as string}
@@ -302,8 +332,11 @@ export default function Select<
                             key="select"
                             className={mergeClass(
                               check(),
-                              !((typeof value === "object" && value?.includes(_value as T)) || value === _value) &&
-                                "opacity-0",
+                              !(
+                                (typeof value === "object" &&
+                                  value?.includes(_value as T)) ||
+                                value === _value
+                              ) && "opacity-0"
                             )}
                             size="sm"
                             remix="RiCheckFill"
diff --git a/src/components/primitives/Input.tsx b/src/components/primitives/Input.tsx
index 2c7c3bc4d..214a12be2 100644
--- a/src/components/primitives/Input.tsx
+++ b/src/components/primitives/Input.tsx
@@ -7,22 +7,22 @@ import type { Component, GetSet, Styled } from "../../utils/types";
 import Group from "../extenders/Group";
 
 export const inputStyles = tv({
-  base: "text-main-12 flex items-center   text-nowrap font-text",
+  base: "flex items-center placeholder:text-main-11 text-nowrap font-text",
   variants: {
     look: {
-      none: "bg-main-0 border-0",
-      soft: "bg-main-2 border-main-2 hover:border-main-4 active:border-main-7 hover:text-main-12 focus-within:outline focus-within:outline-main-12",
-      base: "bg-main-6 focus-within:outline focus-within:outline-main-12",
-      bold: "bg-main-3 border-main-4 hover:border-main-4 active:border-main-7 hover:text-main-12 focus-within:outline focus-within:outline-main-12",
-      tint: "bg-main-1 border-accent-6 hover:border-accent-8 active:bg-main-2 text-main-12 focus-within:outline focus-within:outline-main-12",
-      hype: "bg-main-0 border-accent-8 hover:border-accent-10 active:border-accent-8 hover:text-main-12 focus-within:outline focus-within:outline-main-12",
+      none: "text-main-12 bg-main-0 border-0",
+      soft: "text-main-11 bg-main-0 border-main-9 border-1 active:border-main-7 focus-within:outline focus-within:outline-main-12",
+      base: "text-main-12 bg-main-6 focus-within:outline focus-within:outline-main-12",
+      bold: "text-main-12 bg-main-3 border-main-4 hover:border-main-4 active:border-main-7 hover:text-main-12 focus-within:outline focus-within:outline-main-12",
+      tint: "text-main-12 bg-main-1 border-accent-6 hover:border-accent-8 active:bg-main-2 focus-within:outline focus-within:outline-main-12",
+      hype: "text-main-12 bg-main-0 border-accent-8 hover:border-accent-10 active:border-accent-8 hover:text-main-12 focus-within:outline focus-within:outline-main-12",
     },
     size: {
       xs: "px-xs py-xs text-xs rounded-xs",
       sm: "px-sm py-sm text-sm rounded-sm",
-      md: "px-md py-md text-md rounded-md",
-      lg: "px-lg py-lg text-lg rounded-lg",
-      xl: "px-xl py-xl text-3xl rounded-xl",
+      md: "px-md py-sm text-md rounded-md",
+      lg: "px-lg py-md text-lg rounded-lg",
+      xl: "px-xl py-lg text-3xl rounded-xl",
     },
   },
   defaultVariants: {
@@ -31,7 +31,14 @@ export const inputStyles = tv({
   },
 });
 
-export const extensions = ["header", "footer", "prefix", "suffix", "label", "hint"] as const;
+export const extensions = [
+  "header",
+  "footer",
+  "prefix",
+  "suffix",
+  "label",
+  "hint",
+] as const;
 export type InputExtension = (typeof extensions)[number];
 
 export type InputProps<T = string> = Component<
@@ -44,9 +51,16 @@ export type InputProps<T = string> = Component<
 function Input({ look, size, state, className, ...props }: InputProps) {
   const { header, footer, prefix, suffix, label, hint, ...rest } = props;
 
-  if (extensions.some(extension => !!props?.[extension]))
+  if (extensions.some((extension) => !!props?.[extension]))
     return (
-      <label className={mergeClass(inputStyles({ look, size }), className, "flex-col flex")} htmlFor="input">
+      <label
+        className={mergeClass(
+          inputStyles({ look, size }),
+          className,
+          "flex-col flex"
+        )}
+        htmlFor="input"
+      >
         <label htmlFor="input" className="w-full flex">
           {header}
         </label>
@@ -54,9 +68,13 @@ function Input({ look, size, state, className, ...props }: InputProps) {
           {prefix && <label htmlFor="input">{prefix}</label>}
           <input
             id="input"
-            className={mergeClass(inputStyles({ look: "none", size }), className, "w-full !flex-1 !px-0 !py-0")}
+            className={mergeClass(
+              inputStyles({ look: "none", size }),
+              className,
+              "w-full !flex-1 !px-0 !py-0"
+            )}
             value={state?.[0]}
-            onChange={e => state?.[1]?.(e?.target?.value)}
+            onChange={(e) => state?.[1]?.(e?.target?.value)}
             {...rest}
           />
           {suffix && <label htmlFor="input">{suffix}</label>}
@@ -70,13 +88,17 @@ function Input({ look, size, state, className, ...props }: InputProps) {
     <input
       className={mergeClass(inputStyles({ look, size }), className)}
       value={state?.[0]}
-      onChange={e => state?.[1]?.(e?.target?.value)}
+      onChange={(e) => state?.[1]?.(e?.target?.value)}
       {...rest}
     />
   );
 }
 
-Input.BigInt = function InputBigInt({ state, base, ...props }: InputProps<bigint> & { base: number }) {
+Input.BigInt = function InputBigInt({
+  state,
+  base,
+  ...props
+}: InputProps<bigint> & { base: number }) {
   const [internal, setInternal] = useState<bigint>();
   const [displayed, setDisplayed] = useState("0.0");
   const [_getter, setter] = state ?? [];
@@ -98,7 +120,8 @@ Input.BigInt = function InputBigInt({ state, base, ...props }: InputProps<bigint
 
         const raw = v?.replaceAll(",", "") ?? "";
         const isInputtingDecimals =
-          v?.split(".")?.[1]?.[v?.split?.(".")?.[1]?.length - 1] === "0" || v?.[v.length - 1] === ".";
+          v?.split(".")?.[1]?.[v?.split?.(".")?.[1]?.length - 1] === "0" ||
+          v?.[v.length - 1] === ".";
         const transformed = parseUnits(raw, base);
 
         if (raw === "0") setDisplayed("");
@@ -107,11 +130,16 @@ Input.BigInt = function InputBigInt({ state, base, ...props }: InputProps<bigint
         setter?.(transformed) ?? setInternal(transformed);
       } catch (_err) {}
     },
-    [setter, base],
+    [setter, base]
   );
 
   //TODO: implement setter callback
-  return <Input state={[displayed, v => typeof v !== "function" && setValue(v)]} {...props} />;
+  return (
+    <Input
+      state={[displayed, (v) => typeof v !== "function" && setValue(v)]}
+      {...props}
+    />
+  );
 };
 
 export default Input;

From 6f473c5100cb9891eaf828afb32feb713e6cdb65 Mon Sep 17 00:00:00 2001
From: indaviande <vianney@double.cat>
Date: Wed, 11 Dec 2024 13:13:25 +0100
Subject: [PATCH 3/3] lint

---
 src/components/extenders/Select.tsx | 101 ++++++++---------------
 src/components/primitives/Box.tsx   | 112 +++++++++++++-------------
 src/components/primitives/Icon.tsx  |  22 +----
 src/components/primitives/Input.tsx |  48 +++--------
 src/components/primitives/Table.tsx |  89 +++++----------------
 src/components/primitives/Tabs.tsx  |   6 +-
 src/components/primitives/Text.tsx  |  29 +------
 src/components/primitives/Title.tsx |  50 ++----------
 src/utils/css.ts                    | 119 +++++++++++++++++++++++-----
 9 files changed, 234 insertions(+), 342 deletions(-)

diff --git a/src/components/extenders/Select.tsx b/src/components/extenders/Select.tsx
index 8eecc5c73..8c0b0fdd3 100644
--- a/src/components/extenders/Select.tsx
+++ b/src/components/extenders/Select.tsx
@@ -17,8 +17,7 @@ export const selectStyles = tv({
     "text-main-11 rounded-sm flex items-center dim focus-visible:outline-main-12 !leading-none justify-between text-nowrap font-text font-semibold",
   ],
   slots: {
-    dropdown:
-      "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]",
+    dropdown: "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]",
     item: "rounded-sm flex justify-between items-center gap-lg cursor-pointer select-none p-sm outline-offset-0 outline-0 text-nowrap focus-visible:outline-main-12",
     icon: "flex items-center",
     value: "flex gap-sm items-center",
@@ -138,14 +137,12 @@ export type SelectProps<Value> = Component<{
 }> &
   RadixSelect.SelectProps;
 
-type MaybeArray<T, IsArray extends undefined | boolean> = IsArray extends true
-  ? T[]
-  : T;
+type MaybeArray<T, IsArray extends undefined | boolean> = IsArray extends true ? T[] : T;
 
 export default function Select<
   T extends string | number,
   Multiple extends undefined | boolean,
-  Value extends MaybeArray<T, Multiple>
+  Value extends MaybeArray<T, Multiple>,
 >({
   look,
   size,
@@ -177,45 +174,35 @@ export default function Select<
   });
 
   const value = useMemo(() => getter ?? internal, [getter, internal]);
-  const setValue = useCallback(
-    (v: Value) => setter?.(v) ?? setInternal(v),
-    [setter]
-  );
+  const setValue = useCallback((v: Value) => setter?.(v) ?? setInternal(v), [setter]);
 
   const [searchInput, setSearch] = useState<string>();
 
   const matches = useMemo(() => {
     if (!search) return Object.keys(options ?? {});
     // const textToMatch = Object.keys(options ?? {}).map(option => `${option}_${options[option]?.props?.children?.filter(a => typeof a !== "object").join(" ")}`)
-    const textToMatch = Object.keys(options ?? {}).reduce((matches, option) => {
-      const opt = options?.[option];
-      const key =
-        typeof opt === "string"
-          ? opt
-          : (
-              options?.[option] as Exclude<
-                ReactNode,
-                string | number | boolean | Iterable<ReactNode>
-              >
-            )?.props?.children
-              ?.filter?.((a: unknown) => typeof a !== "object")
-              ?.join(" ");
+    const textToMatch = Object.keys(options ?? {}).reduce(
+      (matches, option) => {
+        const opt = options?.[option];
+        const key =
+          typeof opt === "string"
+            ? opt
+            : (
+                options?.[option] as Exclude<ReactNode, string | number | boolean | Iterable<ReactNode>>
+              )?.props?.children
+                ?.filter?.((a: unknown) => typeof a !== "object")
+                ?.join(" ");
 
-      return Object.assign(
-        matches,
-        { [`${option}`]: option },
-        { [`${key}`]: option }
-      );
-    }, {} as { [key: string]: keyof typeof options });
-    const searchMatches = matchSorter(
-      Object.keys(textToMatch),
-      searchInput ?? ""
-    ).map((key) => textToMatch[key]);
+        return Object.assign(matches, { [`${option}`]: option }, { [`${key}`]: option });
+      },
+      {} as { [key: string]: keyof typeof options },
+    );
+    const searchMatches = matchSorter(Object.keys(textToMatch), searchInput ?? "").map(key => textToMatch[key]);
     const uniqueOptionMatches = Array.from(
       searchMatches.reduce((set, option) => {
         set.add(option);
         return set;
-      }, new Set())
+      }, new Set()),
     ) as (typeof value)[];
 
     return uniqueOptionMatches;
@@ -224,9 +211,7 @@ export default function Select<
   const label = useMemo(() => {
     if (
       value &&
-      (typeof value === "number" ||
-        typeof value === "string" ||
-        typeof value === "symbol") &&
+      (typeof value === "number" || typeof value === "string" || typeof value === "symbol") &&
       options?.[value]
     )
       return options?.[value];
@@ -236,9 +221,8 @@ export default function Select<
           <Text
             className={mergeClass(
               prefixLabel(),
-              "w-[1.2em] h-[1.2em] flex items-center justify-center rounded-full bg-main-6 text-main-12"
-            )}
-          >
+              "w-[1.2em] h-[1.2em] flex items-center justify-center rounded-full bg-main-6 text-main-12",
+            )}>
             {value.length}
           </Text>{" "}
           {placeholder}
@@ -250,23 +234,17 @@ export default function Select<
   return (
     <Ariakit.ComboboxProvider
       resetValueOnHide
-      setValue={(value) => {
+      setValue={value => {
         setSearch(value);
-      }}
-    >
+      }}>
       <Ariakit.SelectProvider
-        setValue={(v) => setValue(v as Value)}
+        setValue={v => setValue(v as Value)}
         value={value as string}
-        defaultValue={multiple ? [] : undefined}
-      >
+        defaultValue={multiple ? [] : undefined}>
         <Ariakit.Select className={mergeClass(base(), className)}>
           <div className={valueStyle()}>{label}</div>
           <div className={icon()}>
-            {loading ? (
-              <Icon className="animate-spin" remix="RiLoader4Fill" />
-            ) : (
-              <Icon remix="RiArrowDropDownLine" />
-            )}
+            {loading ? <Icon className="animate-spin" remix="RiLoader4Fill" /> : <Icon remix="RiArrowDropDownLine" />}
           </div>
         </Ariakit.Select>
         <Ariakit.SelectPopover gutter={4} className={dropdown()}>
@@ -276,11 +254,7 @@ export default function Select<
                 <Ariakit.Combobox
                   autoSelect
                   placeholder="Search..."
-                  className={mergeClass(
-                    inputStyles({ size: "sm", look: "base" }),
-                    "w-full",
-                    !search && "hidden"
-                  )}
+                  className={mergeClass(inputStyles({ size: "sm", look: "base" }), "w-full", !search && "hidden")}
                 />
               </div>
             )}
@@ -303,11 +277,7 @@ export default function Select<
                             key="select"
                             className={mergeClass(
                               check(),
-                              !(
-                                (typeof value === "object" &&
-                                  value?.length > 0) ||
-                                value === undefined
-                              ) && "opacity-0"
+                              !((typeof value === "object" && value?.length > 0) || value === undefined) && "opacity-0",
                             )}
                             size="sm"
                             remix="RiCheckFill"
@@ -317,7 +287,7 @@ export default function Select<
                     }
                   />
                 )}
-                {matches?.map((_value) => (
+                {matches?.map(_value => (
                   <Ariakit.SelectItem
                     key={_value as string}
                     value={_value as string}
@@ -332,11 +302,8 @@ export default function Select<
                             key="select"
                             className={mergeClass(
                               check(),
-                              !(
-                                (typeof value === "object" &&
-                                  value?.includes(_value as T)) ||
-                                value === _value
-                              ) && "opacity-0"
+                              !((typeof value === "object" && value?.includes(_value as T)) || value === _value) &&
+                                "opacity-0",
                             )}
                             size="sm"
                             remix="RiCheckFill"
diff --git a/src/components/primitives/Box.tsx b/src/components/primitives/Box.tsx
index bbea75a65..f59ca4c95 100644
--- a/src/components/primitives/Box.tsx
+++ b/src/components/primitives/Box.tsx
@@ -1,21 +1,21 @@
 /**
  * Box Component
- * 
+ *
  * A flexible container component that serves as a fundamental building block for layouts.
  * It provides various visual styles and sizing options through variants.
- * 
+ *
  * @variants
  * content:
  *  - xs to xl: Content size variants
- * 
+ *
  * container:
  *  - true/false: Controls container behavior
- * 
+ *
  * @compoundVariants
  * The component uses compound variants to determine border radius (rounded corners):
  * - When container=true: Uses both size and content values (rounded-${size}+${content})
  * - When container=false: Uses only size value (rounded-${size})
- * 
+ *
  * @example
  * <Box look="soft" size="md" content="sm" container={true}>
  *   Content goes here
@@ -28,60 +28,58 @@ import { mergeClass } from "../../utils/css";
 import { sizeScale } from "../../utils/tailwind";
 import type { Component, Styled, Themable } from "../../utils/types";
 
-export const boxStyles = tv(
-  {
-    base: "flex flex-col border-1",
-    variants: {
-      look: {
-        soft: "bg-main-1 border-main-0",
-        base: "bg-main-3 border-main-0 text-main-12",
-        bold: "bg-main-2 border-main-6 text-main-12",
-        tint: "bg-accent-4 border-main-0 text-main-12",
-        hype: "bg-accent-4 border-accent-6 text-main-12",
-      },
-      size: {
-        xs: "p-xs gap-xs",
-        sm: "p-sm gap-sm",
-        md: "p-md gap-md",
-        lg: "p-lg gap-md",
-        xl: "p-xl gap-xl",
-      },
-      container: {
-        true: "",
-        false: "",
-      },
-      content: {
-        xs: "",
-        sm: "",
-        md: "",
-        lg: "",
-        xl: "",
-      },
+export const boxStyles = tv({
+  base: "flex flex-col border-1",
+  variants: {
+    look: {
+      soft: "bg-main-1 border-main-0",
+      base: "bg-main-3 border-main-0 text-main-12",
+      bold: "bg-main-2 border-main-6 text-main-12",
+      tint: "bg-accent-4 border-main-0 text-main-12",
+      hype: "bg-accent-4 border-accent-6 text-main-12",
+    },
+    size: {
+      xs: "p-xs gap-xs",
+      sm: "p-sm gap-sm",
+      md: "p-md gap-md",
+      lg: "p-lg gap-md",
+      xl: "p-xl gap-xl",
     },
-    defaultVariants: {
-      size: "md",
-      content: "md",
-      look: "base",
-      container: true,
+    container: {
+      true: "",
+      false: "",
     },
-    compoundVariants: sizeScale.flatMap(size =>
-      sizeScale.flatMap(content => [
-        {
-          size,
-          content,
-          container: true as const,
-          class: `rounded-${size}+${content}` as `rounded-${typeof size}+${typeof content}`,
-        },
-        {
-          size,
-          content,
-          container: false as const,
-          class: `rounded-${size}` as `rounded-${typeof size}`,
-        },
-      ]),
-    ),
+    content: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: "",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    content: "md",
+    look: "base",
+    container: true,
   },
-);
+  compoundVariants: sizeScale.flatMap(size =>
+    sizeScale.flatMap(content => [
+      {
+        size,
+        content,
+        container: true as const,
+        class: `rounded-${size}+${content}` as `rounded-${typeof size}+${typeof content}`,
+      },
+      {
+        size,
+        content,
+        container: false as const,
+        class: `rounded-${size}` as `rounded-${typeof size}`,
+      },
+    ]),
+  ),
+});
 
 export type BoxProps = Component<Styled<typeof boxStyles> & Themable>;
 
@@ -101,7 +99,7 @@ export default function Box({
   return (
     <div
       style={Object.assign(style ?? {}, themeVars)}
-      className={mergeClass(boxStyles({ look, size, content, container: container !== false }),className)}
+      className={mergeClass(boxStyles({ look, size, content, container: container !== false }), className)}
       {...props}
     />
   );
diff --git a/src/components/primitives/Icon.tsx b/src/components/primitives/Icon.tsx
index 33d65f6bb..516a10c99 100644
--- a/src/components/primitives/Icon.tsx
+++ b/src/components/primitives/Icon.tsx
@@ -35,30 +35,14 @@ export type IconProps = Component<
   HTMLImageElement
 >;
 
-export default function Icon({
-  rounded,
-  remix,
-  size,
-  src,
-  alt,
-  className,
-  ...props
-}: IconProps) {
+export default function Icon({ rounded, remix, size, src, alt, className, ...props }: IconProps) {
   const themeVars = useThemableProps(props);
   const styles = useMemo(() => iconStyles({ rounded, size }), [rounded, size]);
 
   const Component = useMemo(() => {
     if (remix) return RemixIcon[remix] as () => ReactElement;
-    return (imageProps: Component<unknown>) => (
-      <Image alt={alt} src={src} {...imageProps} />
-    );
+    return (imageProps: Component<unknown>) => <Image alt={alt} src={src} {...imageProps} />;
   }, [remix, alt, src]);
 
-  return (
-    <Component
-      {...props}
-      style={themeVars}
-      className={mergeClass(styles, className)}
-    />
-  );
+  return <Component {...props} style={themeVars} className={mergeClass(styles, className)} />;
 }
diff --git a/src/components/primitives/Input.tsx b/src/components/primitives/Input.tsx
index 214a12be2..df3457ae4 100644
--- a/src/components/primitives/Input.tsx
+++ b/src/components/primitives/Input.tsx
@@ -31,14 +31,7 @@ export const inputStyles = tv({
   },
 });
 
-export const extensions = [
-  "header",
-  "footer",
-  "prefix",
-  "suffix",
-  "label",
-  "hint",
-] as const;
+export const extensions = ["header", "footer", "prefix", "suffix", "label", "hint"] as const;
 export type InputExtension = (typeof extensions)[number];
 
 export type InputProps<T = string> = Component<
@@ -51,16 +44,9 @@ export type InputProps<T = string> = Component<
 function Input({ look, size, state, className, ...props }: InputProps) {
   const { header, footer, prefix, suffix, label, hint, ...rest } = props;
 
-  if (extensions.some((extension) => !!props?.[extension]))
+  if (extensions.some(extension => !!props?.[extension]))
     return (
-      <label
-        className={mergeClass(
-          inputStyles({ look, size }),
-          className,
-          "flex-col flex"
-        )}
-        htmlFor="input"
-      >
+      <label className={mergeClass(inputStyles({ look, size }), className, "flex-col flex")} htmlFor="input">
         <label htmlFor="input" className="w-full flex">
           {header}
         </label>
@@ -68,13 +54,9 @@ function Input({ look, size, state, className, ...props }: InputProps) {
           {prefix && <label htmlFor="input">{prefix}</label>}
           <input
             id="input"
-            className={mergeClass(
-              inputStyles({ look: "none", size }),
-              className,
-              "w-full !flex-1 !px-0 !py-0"
-            )}
+            className={mergeClass(inputStyles({ look: "none", size }), className, "w-full !flex-1 !px-0 !py-0")}
             value={state?.[0]}
-            onChange={(e) => state?.[1]?.(e?.target?.value)}
+            onChange={e => state?.[1]?.(e?.target?.value)}
             {...rest}
           />
           {suffix && <label htmlFor="input">{suffix}</label>}
@@ -88,17 +70,13 @@ function Input({ look, size, state, className, ...props }: InputProps) {
     <input
       className={mergeClass(inputStyles({ look, size }), className)}
       value={state?.[0]}
-      onChange={(e) => state?.[1]?.(e?.target?.value)}
+      onChange={e => state?.[1]?.(e?.target?.value)}
       {...rest}
     />
   );
 }
 
-Input.BigInt = function InputBigInt({
-  state,
-  base,
-  ...props
-}: InputProps<bigint> & { base: number }) {
+Input.BigInt = function InputBigInt({ state, base, ...props }: InputProps<bigint> & { base: number }) {
   const [internal, setInternal] = useState<bigint>();
   const [displayed, setDisplayed] = useState("0.0");
   const [_getter, setter] = state ?? [];
@@ -120,8 +98,7 @@ Input.BigInt = function InputBigInt({
 
         const raw = v?.replaceAll(",", "") ?? "";
         const isInputtingDecimals =
-          v?.split(".")?.[1]?.[v?.split?.(".")?.[1]?.length - 1] === "0" ||
-          v?.[v.length - 1] === ".";
+          v?.split(".")?.[1]?.[v?.split?.(".")?.[1]?.length - 1] === "0" || v?.[v.length - 1] === ".";
         const transformed = parseUnits(raw, base);
 
         if (raw === "0") setDisplayed("");
@@ -130,16 +107,11 @@ Input.BigInt = function InputBigInt({
         setter?.(transformed) ?? setInternal(transformed);
       } catch (_err) {}
     },
-    [setter, base]
+    [setter, base],
   );
 
   //TODO: implement setter callback
-  return (
-    <Input
-      state={[displayed, (v) => typeof v !== "function" && setValue(v)]}
-      {...props}
-    />
-  );
+  return <Input state={[displayed, v => typeof v !== "function" && setValue(v)]} {...props} />;
 };
 
 export default Input;
diff --git a/src/components/primitives/Table.tsx b/src/components/primitives/Table.tsx
index 9d6cb7646..c48cd155b 100644
--- a/src/components/primitives/Table.tsx
+++ b/src/components/primitives/Table.tsx
@@ -1,9 +1,4 @@
-import {
-  type PropsWithChildren,
-  type ReactNode,
-  useMemo,
-  useState,
-} from "react";
+import { type PropsWithChildren, type ReactNode, useMemo, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import { tv } from "tailwind-variants";
 import { mergeClass } from "../../utils/css";
@@ -77,12 +72,7 @@ export type RowProps<T extends Columns> = Component<
   >
 >;
 
-export function Row<T extends Columns>({
-  columns,
-  exclude,
-  children,
-  ...props
-}: RowProps<T>) {
+export function Row<T extends Columns>({ columns, exclude, children, ...props }: RowProps<T>) {
   const isScreenSmall = useMediaQuery({ maxWidth: 640 });
   const [ids, grid, compact] = useMemo(() => {
     const cols = Object.keys(columns ?? {}) as (keyof T)[];
@@ -94,7 +84,7 @@ export function Row<T extends Columns>({
       display: "grid",
       rowGap: "0px",
       gridTemplateColumns: cols
-        .map((id) => {
+        .map(id => {
           if (exclude?.includes(id)) return;
           return columns?.[id]?.size ?? "1fr";
         })
@@ -103,8 +93,8 @@ export function Row<T extends Columns>({
     const compactStyle: { display: "grid"; gridTemplateColumns: string } = {
       display: "grid",
       gridTemplateColumns: cols
-        .filter((id) => !columns?.[id]?.main)
-        .map((id) => columns?.[id]?.compactSize ?? "1fr")
+        .filter(id => !columns?.[id]?.main)
+        .map(id => columns?.[id]?.compactSize ?? "1fr")
         .join(" "),
     };
 
@@ -122,10 +112,8 @@ export function Row<T extends Columns>({
 
   return (
     <Box style={isScreenSmall ? compact : grid} {...divProps}>
-      {ids?.map((id) => {
-        const element = props[
-          `${String(id)}Column` as keyof typeof props
-        ] as ReactNode;
+      {ids?.map(id => {
+        const element = props[`${String(id)}Column` as keyof typeof props] as ReactNode;
         const { className, main } = columns[id];
 
         if (exclude?.includes(id)) return;
@@ -135,22 +123,17 @@ export function Row<T extends Columns>({
             style={
               main && isScreenSmall
                 ? {
-                    gridColumn: `span ${ids?.length - 1} / span ${
-                      ids?.length - 1
-                    }`,
+                    gridColumn: `span ${ids?.length - 1} / span ${ids?.length - 1}`,
                   }
                 : {}
             }
             key={String(id)}
-            className={[className, "inline-flex items-center"].join(" ")}
-          >
+            className={[className, "inline-flex items-center"].join(" ")}>
             {element}
           </div>
         );
       })}
-      {children && (
-        <EventBlocker style={{ gridColumn: "1 / -1" }}>{children}</EventBlocker>
-      )}
+      {children && <EventBlocker style={{ gridColumn: "1 / -1" }}>{children}</EventBlocker>}
     </Box>
   );
 }
@@ -178,7 +161,7 @@ export function useHeaders<T extends Columns>(
   onHeaderClick?: (id: keyof T) => void,
   sortBy?: keyof T,
   order?: Order,
-  props?: TableHeaders<T>
+  props?: TableHeaders<T>,
 ) {
   //TODO: assess if props needs to be updated for columns and how to memo all columns
   // biome-ignore lint/correctness/useExhaustiveDependencies: props in dependency would render the memo useless
@@ -189,26 +172,15 @@ export function useHeaders<T extends Columns>(
     for (const id of ids) {
       const { name: title, className: _className } = columns[id];
       const isSortable = sortable?.includes(id);
-      const handler =
-        title && isSortable ? () => onHeaderClick?.(id) : undefined;
+      const handler = title && isSortable ? () => onHeaderClick?.(id) : undefined;
 
       head[`${id}Column` as keyof TableColumns<T>] = (
-        <Text
-          className="relative font-text"
-          size="md"
-          interactable={isSortable}
-          onKeyDown={handler}
-          onClick={handler}
-        >
+        <Text className="relative font-text" size="md" interactable={isSortable} onKeyDown={handler} onClick={handler}>
           {props?.[`${id}Header` as keyof TableHeaders<T>] ?? title}
           <span className="absolute -right-5 top-1/2 -translate-y-1/2">
             {sortable &&
               id === sortBy &&
-              (order === "desc" ? (
-                <Icon remix={"RiArrowDropDownLine"} />
-              ) : (
-                <Icon remix={"RiArrowDropUpLine"} />
-              ))}
+              (order === "desc" ? <Icon remix={"RiArrowDropDownLine"} /> : <Icon remix={"RiArrowDropUpLine"} />)}
           </span>
         </Text>
       );
@@ -237,8 +209,7 @@ export function Table<T extends Columns>({
   const [sortBy, setSortBy] = useState<keyof T | undefined>(sortable?.[0]);
 
   function onHeaderClick(id: keyof T) {
-    const currentOrder =
-      id !== sortBy ? "desc" : _order === "desc" ? "asc" : "desc";
+    const currentOrder = id !== sortBy ? "desc" : _order === "desc" ? "asc" : "desc";
 
     setOrder(currentOrder);
     setSortBy(id);
@@ -246,27 +217,13 @@ export function Table<T extends Columns>({
   }
 
   // biome-ignore lint/suspicious/noExplicitAny: please forgive this any
-  const headers = useHeaders(
-    columns,
-    sortable,
-    onHeaderClick,
-    sort ?? sortBy,
-    order ?? _order,
-    props as any
-  );
+  const headers = useHeaders(columns, sortable, onHeaderClick, sort ?? sortBy, order ?? _order, props as any);
 
   return (
-    <List
-      indexOffset={header ? 0 : 1}
-      className={mergeClass(className)}
-      look={look}
-      {...props}
-    >
+    <List indexOffset={header ? 0 : 1} className={mergeClass(className)} look={look} {...props}>
       {!!header ? <Box className="bg-auto">{header}</Box> : undefined}
       {/* biome-ignore lint/suspicious/noExplicitAny: please forgive this one as well */}
-      {!hideLabels ? (
-        <Row {...(headers as any)} columns={columns} />
-      ) : undefined}
+      {!hideLabels ? <Row {...(headers as any)} columns={columns} /> : undefined}
       {children}
       {!!footer ? <Box className="bg-auto">{footer}</Box> : undefined}
     </List>
@@ -280,13 +237,7 @@ export function createTable<T extends Columns>(columns: T) {
   );
 
   // biome-ignore lint/suspicious/noExplicitAny: no reasons for it to have type errors
-  const TemplateRow = (props: Omit<RowProps<T>, "columns">) => (
-    <Row {...(props as any)} columns={columns} />
-  );
+  const TemplateRow = (props: Omit<RowProps<T>, "columns">) => <Row {...(props as any)} columns={columns} />;
 
-  return [TemplateTable, TemplateRow, Object.keys(columns)] as [
-    typeof TemplateTable,
-    typeof TemplateRow,
-    (keyof T)[]
-  ];
+  return [TemplateTable, TemplateRow, Object.keys(columns)] as [typeof TemplateTable, typeof TemplateRow, (keyof T)[]];
 }
diff --git a/src/components/primitives/Tabs.tsx b/src/components/primitives/Tabs.tsx
index 1a1fd80bd..be4fa7b32 100644
--- a/src/components/primitives/Tabs.tsx
+++ b/src/components/primitives/Tabs.tsx
@@ -1,14 +1,14 @@
 /**
  * @component Tabs
  * @description A flexible and customizable tabs component that supports different visual styles and navigation.
- * 
+ *
  * @features
  * - Multiple visual styles (soft, base, bold, tint, hype)
  * - Responsive design with Tailwind CSS
  * - Built-in navigation support using Remix's Link component
  * - Customizable themes
  * - Accessibility features including keyboard navigation
- * 
+ *
  * @usage
  * ```tsx
  * <Tabs
@@ -20,7 +20,7 @@
  *   theme="custom"
  * />
  * ```
- * 
+ *
  * @props
  * - tabs: Array of tab items with label, link, and key
  * - look: Visual style variant (soft, base, bold, tint, hype)
diff --git a/src/components/primitives/Text.tsx b/src/components/primitives/Text.tsx
index b82f7281f..963b8b74f 100644
--- a/src/components/primitives/Text.tsx
+++ b/src/components/primitives/Text.tsx
@@ -18,8 +18,7 @@ export const textStyles = tv({
       md: "text-base",
       lg: "text-lg",
       xl: "text-xl",
-      display1:
-        "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]",
+      display1: "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]",
       1: "font-title !text-3xl",
       2: "font-title font-bold leading-none italic !text-[clamp(38px,0.667vw+2.125rem,46px)]",
       3: "font-title font-bold leading-none italic !text-[clamp(26px,0.667vw+1.375rem,34px)]",
@@ -50,29 +49,9 @@ export const textStyles = tv({
   ],
 });
 
-export type TextProps = Component<
-  Styled<typeof textStyles> & { bold?: boolean },
-  HTMLParagraphElement
->;
+export type TextProps = Component<Styled<typeof textStyles> & { bold?: boolean }, HTMLParagraphElement>;
 
-export default function Text({
-  look,
-  size,
-  style,
-  bold,
-  interactable,
-  className,
-  ...props
-}: TextProps) {
+export default function Text({ look, size, style, bold, interactable, className, ...props }: TextProps) {
   const styleBold = bold ? "font-bold" : "";
-  return (
-    <p
-      className={mergeClass(
-        textStyles({ look, size, interactable }),
-        styleBold,
-        className
-      )}
-      {...props}
-    />
-  );
+  return <p className={mergeClass(textStyles({ look, size, interactable }), styleBold, className)} {...props} />;
 }
diff --git a/src/components/primitives/Title.tsx b/src/components/primitives/Title.tsx
index ebd6a792b..a57ac2e9b 100644
--- a/src/components/primitives/Title.tsx
+++ b/src/components/primitives/Title.tsx
@@ -20,7 +20,7 @@ export const titleStyles = tv(
       look: "base",
     },
   },
-  { twMerge: false }
+  { twMerge: false },
 );
 
 export type TitleProps = Component<
@@ -31,55 +31,19 @@ export type TitleProps = Component<
   HTMLHeadingElement
 >;
 
-export default function Title({
-  look,
-  h,
-  size: _size,
-  className,
-  ...props
-}: TitleProps) {
+export default function Title({ look, h, size: _size, className, ...props }: TitleProps) {
   const size = _size ?? h;
   switch (h) {
     case 1:
-      return (
-        <h1
-          className={clsx(titleStyles({ look, size }), className)}
-          children={" "}
-          {...props}
-        />
-      );
+      return <h1 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 2:
-      return (
-        <h2
-          className={clsx(titleStyles({ look, size }), className)}
-          children={" "}
-          {...props}
-        />
-      );
+      return <h2 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 3:
-      return (
-        <h3
-          className={clsx(titleStyles({ look, size }), className)}
-          children={" "}
-          {...props}
-        />
-      );
+      return <h3 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 4:
-      return (
-        <h4
-          className={clsx(titleStyles({ look, size }), className)}
-          children={" "}
-          {...props}
-        />
-      );
+      return <h4 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 5:
-      return (
-        <h5
-          className={clsx(titleStyles({ look, size }), className)}
-          children={" "}
-          {...props}
-        />
-      );
+      return <h5 className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
     default:
       break;
   }
diff --git a/src/utils/css.ts b/src/utils/css.ts
index 6b4ed489a..8abd137db 100644
--- a/src/utils/css.ts
+++ b/src/utils/css.ts
@@ -4,27 +4,104 @@ import { extendTailwindMerge } from "tailwind-merge";
 const twMerge = extendTailwindMerge({
   extend: {
     classGroups: {
-      p: ['p-sm/2', 'p-sm/4', 'p-sm*2', 'p-sm*4',
-          'p-md/2', 'p-md/4', 'p-md*2', 'p-md*4',
-          'p-lg/2', 'p-lg/4', 'p-lg*2', 'p-lg*4'],
-      px: ['px-sm/2', 'px-sm/4', 'px-sm*2', 'px-sm*4',
-           'px-md/2', 'px-md/4', 'px-md*2', 'px-md*4',
-           'px-lg/2', 'px-lg/4', 'px-lg*2', 'px-lg*4'],
-      py: ['py-sm/2', 'py-sm/4', 'py-sm*2', 'py-sm*4',
-           'py-md/2', 'py-md/4', 'py-md*2', 'py-md*4',
-           'py-lg/2', 'py-lg/4', 'py-lg*2', 'py-lg*4'],
-      m: ['m-sm/2', 'm-sm/4', 'm-sm*2', 'm-sm*4',
-          'm-md/2', 'm-md/4', 'm-md*2', 'm-md*4',
-          'm-lg/2', 'm-lg/4', 'm-lg*2', 'm-lg*4'],
-      mx: ['mx-sm/2', 'mx-sm/4', 'mx-sm*2', 'mx-sm*4',
-           'mx-md/2', 'mx-md/4', 'mx-md*2', 'mx-md*4',
-           'mx-lg/2', 'mx-lg/4', 'mx-lg*2', 'mx-lg*4'],
-      my: ['my-sm/2', 'my-sm/4', 'my-sm*2', 'my-sm*4',
-           'my-md/2', 'my-md/4', 'my-md*2', 'my-md*4',
-           'my-lg/2', 'my-lg/4', 'my-lg*2', 'my-lg*4'],
-      gap: ['gap-sm/2', 'gap-sm/4', 'gap-sm*2', 'gap-sm*4',
-            'gap-md/2', 'gap-md/4', 'gap-md*2', 'gap-md*4',
-            'gap-lg/2', 'gap-lg/4', 'gap-lg*2', 'gap-lg*4'],
+      p: [
+        "p-sm/2",
+        "p-sm/4",
+        "p-sm*2",
+        "p-sm*4",
+        "p-md/2",
+        "p-md/4",
+        "p-md*2",
+        "p-md*4",
+        "p-lg/2",
+        "p-lg/4",
+        "p-lg*2",
+        "p-lg*4",
+      ],
+      px: [
+        "px-sm/2",
+        "px-sm/4",
+        "px-sm*2",
+        "px-sm*4",
+        "px-md/2",
+        "px-md/4",
+        "px-md*2",
+        "px-md*4",
+        "px-lg/2",
+        "px-lg/4",
+        "px-lg*2",
+        "px-lg*4",
+      ],
+      py: [
+        "py-sm/2",
+        "py-sm/4",
+        "py-sm*2",
+        "py-sm*4",
+        "py-md/2",
+        "py-md/4",
+        "py-md*2",
+        "py-md*4",
+        "py-lg/2",
+        "py-lg/4",
+        "py-lg*2",
+        "py-lg*4",
+      ],
+      m: [
+        "m-sm/2",
+        "m-sm/4",
+        "m-sm*2",
+        "m-sm*4",
+        "m-md/2",
+        "m-md/4",
+        "m-md*2",
+        "m-md*4",
+        "m-lg/2",
+        "m-lg/4",
+        "m-lg*2",
+        "m-lg*4",
+      ],
+      mx: [
+        "mx-sm/2",
+        "mx-sm/4",
+        "mx-sm*2",
+        "mx-sm*4",
+        "mx-md/2",
+        "mx-md/4",
+        "mx-md*2",
+        "mx-md*4",
+        "mx-lg/2",
+        "mx-lg/4",
+        "mx-lg*2",
+        "mx-lg*4",
+      ],
+      my: [
+        "my-sm/2",
+        "my-sm/4",
+        "my-sm*2",
+        "my-sm*4",
+        "my-md/2",
+        "my-md/4",
+        "my-md*2",
+        "my-md*4",
+        "my-lg/2",
+        "my-lg/4",
+        "my-lg*2",
+        "my-lg*4",
+      ],
+      gap: [
+        "gap-sm/2",
+        "gap-sm/4",
+        "gap-sm*2",
+        "gap-sm*4",
+        "gap-md/2",
+        "gap-md/4",
+        "gap-md*2",
+        "gap-md*4",
+        "gap-lg/2",
+        "gap-lg/4",
+        "gap-lg*2",
+        "gap-lg*4",
+      ],
     },
   },
 });