Chore/tag migration

package.json

@@ -92,6 +92,7 @@
     "simplebar-react": "^2.3.6",
     "smooth-scroll-into-view-if-needed": "^1.1.33",
     "tailwind-merge": "^3.0.2",
+    "tailwindcss-react-aria-components": "^2.0.0",
     "usehooks-ts": "^2.9.1"
   },
   "lint-staged": {

src/examples/displays.tsx

@@ -11,7 +11,7 @@ const Displays = () => (
     <DisplaySmall text="250 DAI" label="Amount" Icon={Dai} />
     <DisplayLarge text="$244.08" label="ETH Price" Icon={Dai} />
     <DisplayIcon text="247" label="Disputes" Icon={Balance} />
-    <Tag text={"First tag"} as="div" />
+    <Tag text={"First tag"} />
     <Tag active text={"Active tag"} />
     <Tag text={"Tag with lots and lots of text, ok maybe not that much"} />
   </>

src/examples/form.tsx

@@ -1,14 +1,13 @@
-import React, { useState } from "react";
+import React from "react";
 import FileUploader from "../lib/form/file-uploader";
-import Field from "../lib/form/field";
 import Searchbar from "../lib/form/searchbar";
-import Textarea from "../lib/form/textarea";
 import Slider from "../lib/form/slider";
 import Datepicker from "../lib/form/datepicker";
 import Telegram from "../assets/svgs/telegram.svg";
-
+import NumberField from "../lib/form/number-field";
+import TextField from "../lib/form/text-field";
+import TextArea from "../lib/form/text-area";
 const Form = () => {
-  const [value, setValue] = useState(1);
   return (
     <>
       <Datepicker
@@ -22,18 +21,33 @@ const Form = () => {
           // Called when select is clicked with date as args
         }}
       />
-      <Field
-        placeholder={"eg. Escrow"}
+      <TextField
+        placeholder={"eg. Email"}
         variant="success"
         message="success msg"
+        type="email"
+      />
+      <NumberField
+        placeholder={"Number"}
+        variant="info"
+        message="Age is your"
+        Icon={Telegram}
       />
-      <Field placeholder={"Number"} type="number" Icon={Telegram} />
-      <Field placeholder={"Number"} type="number" />
+
+      <NumberField
+        placeholder={"Number"}
+        variant="warning"
+        label="Enter your age"
+        minValue={0}
+      />
+
+      <NumberField placeholder={"Number"} />
       <Searchbar />
-      <Textarea
+      <TextArea
         placeholder={"eg. longer text"}
         message={"Error msg"}
         variant="error"
+        resizeY
       />
       <FileUploader
         callback={() => {
@@ -43,12 +57,13 @@ const Form = () => {
         msg="Some msg"
       />
       <Slider
-        callback={setValue}
-        min={1}
-        max={30}
+        callback={() => {}}
+        minValue={1}
+        maxValue={30}
         leftLabel="1 day"
         rightLabel="1 month"
-        label={`${value} days`}
+        formatter={(value) => `${value} days`}
+        defaultValue={3}
       />
     </>
   );

src/examples/input.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import Radio from "../lib/form/radio";
 import Checkbox from "../lib/form/checkbox";
 import Switch from "../lib/form/switch";
+import RadioGroup from "../lib/form/radio-group";
 
 const VerticalWrapper = styled.div`
   display: flex;
@@ -14,72 +14,40 @@ const Input: React.FC = () => {
   const [checked, setChecked] = useState(false);
   const [radioValue, setRadioValue] = useState("bitcoin");
 
-  const changeRadioValue: React.ChangeEventHandler<HTMLInputElement> = (
-    event,
-  ) => setRadioValue(event.target.value);
+  const changeRadioValue = (val: string) => setRadioValue(val);
 
   return (
     <>
       <VerticalWrapper>
-        <Checkbox
-          label="Checkbox"
-          checked={checked}
-          onChange={() => setChecked((old) => !old)}
-        />
+        <Checkbox label="Checkbox" />
         <Checkbox
           label="Inverted"
-          checked={!checked}
+          isSelected={!checked}
           onChange={() => setChecked((old) => !old)}
         />
         <Checkbox
           label="One"
           small
-          checked={checked}
+          isSelected={checked}
           onChange={() => setChecked((old) => !old)}
         />
       </VerticalWrapper>
-      <VerticalWrapper>
-        <VerticalWrapper>
-          <Radio
-            label="Bitcoin"
-            value="bitcoin"
-            checked={radioValue === "bitcoin"}
-            onChange={changeRadioValue}
-          />
-          <Radio
-            label="Ethereum"
-            value="ethereum"
-            checked={radioValue === "ethereum"}
-            onChange={changeRadioValue}
-          />
-          <Radio
-            label="Pinakion"
-            value="pinakion"
-            checked={radioValue === "pinakion"}
-            onChange={changeRadioValue}
-          />
-        </VerticalWrapper>
-        <VerticalWrapper>
-          <Radio
-            label="Bitcoin"
-            small
-            value="bitcoin"
-            checked={radioValue === "bitcoin"}
-            onChange={changeRadioValue}
-          />
-          <Radio
-            small
-            label="Ethereum"
-            value="ethereum"
-            checked={radioValue === "ethereum"}
-            onChange={changeRadioValue}
-          />
-        </VerticalWrapper>
-      </VerticalWrapper>
-      <Switch checked={checked} onChange={() => setChecked((old) => !old)} />
+      <RadioGroup
+        groupLabel="Variants"
+        small
+        orientation="horizontal"
+        value={radioValue}
+        onChange={changeRadioValue}
+        options={[
+          { value: "primary", label: "Primary" },
+          { value: "secondary", label: "Secondary" },
+        ]}
+      />
+
+      <Switch isSelected={checked} onChange={() => setChecked((old) => !old)} />
       <Switch
         small
-        checked={checked}
+        isSelected={checked}
         onChange={() => setChecked((old) => !old)}
       />
     </>

src/examples/tooltip.tsx

@@ -28,51 +28,29 @@ const Tooltips: React.FC = () => (
     <VerticalContainer>
       <SimpleContainer>
         <Tooltip small text={SHORT_TEXT}>
-          <Tooltip small place="bottom" text={SHORT_TEXT}>
-            <Tooltip small place="right" text={SHORT_TEXT}>
-              <Tooltip small place="left" text={SHORT_TEXT}>
-                <StyledText>{"Hover me, I'm simple text"}</StyledText>
-              </Tooltip>
-            </Tooltip>
-          </Tooltip>
+          <StyledText>{"Hover me, I'm simple text"}</StyledText>
         </Tooltip>
       </SimpleContainer>
       <SimpleContainer>
         <Tooltip small text={SHORT_TEXT}>
-          <Tooltip small place="bottom" text={SHORT_TEXT}>
-            <Tooltip small place="right" text={SHORT_TEXT}>
-              <Tooltip small place="left" text={SHORT_TEXT}>
-                <Tag active text="Hover me, I'm a tag" />
-              </Tooltip>
-            </Tooltip>
-          </Tooltip>
+          <Tag active text="Hover me, I'm a tag" />
         </Tooltip>
       </SimpleContainer>
     </VerticalContainer>
     <Tooltip small text={SHORT_TEXT}>
-      <Tooltip small place="bottom" text={SHORT_TEXT}>
-        <Tooltip small place="right" text={SHORT_TEXT}>
-          <Tooltip small place="left" text={SHORT_TEXT}>
-            <Card>
-              <StyledText>{"Hover me, I'm a card"}</StyledText>
-            </Card>
-          </Tooltip>
-        </Tooltip>
-      </Tooltip>
+      <Card>
+        <StyledText>{"Hover me, I'm a card"}</StyledText>
+      </Card>
     </Tooltip>
     <VerticalContainer>
       <SimpleContainer>
         <Tooltip text={LONG_TEXT}>
-          <Tooltip place="bottom" text={LONG_TEXT}>
-            <StyledText>Big tooltips horizontal</StyledText>
-          </Tooltip>
+          <StyledText>Big tooltips horizontal</StyledText>
         </Tooltip>
       </SimpleContainer>
       <SimpleContainer>
         <Tooltip place="right" text={LONG_TEXT}>
-          <Tooltip place="left" text={LONG_TEXT}>
-            <StyledText>Big tooltips vertical</StyledText>
-          </Tooltip>
+          <StyledText>Big tooltips vertical</StyledText>
         </Tooltip>
       </SimpleContainer>
     </VerticalContainer>

src/lib/accordion/accordion-item.tsx

@@ -35,9 +35,9 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
       >
         {title}
         {expanded ? (
-          <Minus className={cn("fill-klerosUIComponentsPrimaryText h-4 w-4")} />
+          <Minus className={cn("fill-klerosUIComponentsPrimaryText size-4")} />
         ) : (
-          <Plus className={cn("fill-klerosUIComponentsPrimaryText h-4 w-4")} />
+          <Plus className={cn("fill-klerosUIComponentsPrimaryText size-4")} />
         )}
       </Button>
       <div

src/lib/button/ButtonIcon.tsx

@@ -12,7 +12,7 @@ const ButtonIcon: React.FC<
       <Icon
         className={cn(
           "button-svg",
-          "mr-2 h-4 w-4",
+          "mr-2 size-4",
           "fill-klerosUIComponentsWhiteBackground",
           isLoading && ["invisible"],
           isSecondary && ["fill-klerosUIComponentsPrimaryBlue"],

src/lib/button/index.tsx

@@ -50,10 +50,11 @@ function Button({
   return (
     <AriaButton
       className={cn(
-        "relative box-border h-fit w-fit",
+        "relative box-border size-fit",
         "flex flex-row items-center justify-center",
         "rounded-base hover:cursor-pointer",
         "ease-ease transition-[background] duration-(--klerosUIComponentsTransitionSpeed)",
+        "pressed:scale-95 transform transition-transform",
 
         props.small ? "px-6 py-1.5" : "px-8 py-[11.5px]",
         isPrimary && [

src/lib/container/box.tsx

@@ -1,12 +1,17 @@
-import styled from "styled-components";
-import { borderBox } from "../../styles/common-style";
-
-const Box = styled.div`
-  ${borderBox}
-  background: ${({ theme }) => theme.klerosUIComponentsMediumBlue};
-  border-radius: 18px;
-  width: 328px;
-  height: 200px;
-`;
+import React from "react";
+import { cn } from "../../utils";
 
+function Box({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "bg-klerosUIComponentsMediumBlue h-[200px] w-[328px]",
+        "box-border rounded-[18px]",
+        className,
+      )}
+    >
+      {props.children}
+    </div>
+  );
+}
 export default Box;

src/lib/container/card.tsx

@@ -1,33 +1,25 @@
-import styled from "styled-components";
-import {
-  borderBox,
-  hoverShortTransitionTiming,
-} from "../../styles/common-style";
+import React from "react";
+import { cn } from "../../utils";
 
-interface CardProps {
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   round?: boolean;
   hover?: boolean;
 }
 
-const Card = styled.div<CardProps>`
-  ${borderBox}
-  ${hoverShortTransitionTiming}
-  background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
-  border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
-  box-shadow: 0px 2px 3px
-    ${({ theme }) => theme.klerosUIComponentsDefaultShadow};
-  border-radius: ${({ round }) => (round ? "18px" : "3px")};
-  width: 328px;
-  height: 200px;
-
-  ${({ theme, hover }) =>
-    hover &&
-    `
-      :hover {
-        background-color: ${theme.klerosUIComponentsLightGrey}BB;
-        cursor: pointer;
-      }
-  `}
-`;
-
+function Card({ hover, round, className, ...props }: Readonly<CardProps>) {
+  return (
+    <div
+      className={cn(
+        "bg-klerosUIComponentsWhiteBackground box-border h-[200px] w-[328px]",
+        "border-klerosUIComponentsStroke hover-short-transition shadow-default border",
+        hover && "hover:bg-klerosUIComponentsLightGrey hover:cursor-pointer",
+        round ? "rounded-[18px]" : "rounded-base",
+        className,
+      )}
+      {...props}
+    >
+      {props.children}
+    </div>
+  );
+}
 export default Card;