Chore/tag migration

package.json

@@ -80,10 +80,10 @@
   },
   "dependencies": {
     "@datepicker-react/hooks": "^2.8.4",
+    "@internationalized/date": "^3.7.0",
     "@swc/helpers": "^0.3.2",
     "@tailwindcss/vite": "^4.0.12",
     "clsx": "^2.1.1",
-    "rc-slider": "^9.7.5",
     "react": "^18.0.0",
     "react-aria-components": "^1.7.1",
     "react-dom": "^18.0.0",
@@ -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/dropdowns.tsx

@@ -7,34 +7,61 @@ const Dropdowns = () => (
     <DropdownSelect
       simpleButton
       items={[
-        { text: "hello", dot: "red", value: 1 },
-        { text: "world", dot: "blue", value: 2 },
+        { text: "hello 1", dot: "red", itemValue: 1, id: 1 },
+        { text: "hello 2", dot: "blue", itemValue: 2, id: 2 },
+        { text: "hello 3", dot: "blue", itemValue: 3, id: 3 },
       ]}
-      defaultValue={1}
+      defaultSelectedKey={1}
       callback={() => {
         // function called when an item is clicked with it's value as argument
       }}
     />
+    <DropdownSelect
+      placeholder="Select Value"
+      callback={(item) => {
+        // eslint-disable-next-line no-console
+        console.log({ item });
+      }}
+      items={[
+        { text: "hello 1", dot: "red", itemValue: 1, id: 1 },
+        { text: "hello 2", dot: "blue", itemValue: 2, id: 2 },
+        { text: "hello 3", dot: "blue", itemValue: 3, id: 3 },
+        { text: "hello 4", dot: "blue", itemValue: 4, id: 4 },
+        { text: "hello 5", dot: "blue", itemValue: 5, id: 5 },
+        { text: "hello 6", dot: "blue", itemValue: 6, id: 6 },
+        { text: "hello 7", dot: "blue", itemValue: 7, id: 7 },
+        { text: "hello 8", dot: "blue", itemValue: 8, id: 8 },
+        { text: "hello 9", dot: "blue", itemValue: 9, id: 9 },
+        { text: "hello 10", dot: "blue", itemValue: 10, id: 10 },
+        { text: "hello 11", dot: "blue", itemValue: 11, id: 11 },
+        { text: "hello 12", dot: "blue", itemValue: 12, id: 12 },
+        { text: "hello 13", dot: "blue", itemValue: 13, id: 13 },
+        { text: "hello 14", dot: "blue", itemValue: 14, id: 14 },
+        { text: "hello 15", dot: "blue", itemValue: 15, id: 15 },
+        { text: "hello 16", dot: "blue", itemValue: 16, id: 16 },
+      ]}
+    />
+
     <DropdownSelect
       items={[
-        { text: "hello 1", dot: "red", value: 1 },
-        { text: "hello 2", dot: "blue", value: 2 },
-        { text: "hello 3", dot: "blue", value: 3 },
-        { text: "hello 4", dot: "blue", value: 4 },
-        { text: "hello 5", dot: "blue", value: 5 },
-        { text: "hello 6", dot: "blue", value: 6 },
-        { text: "hello 7", dot: "blue", value: 7 },
-        { text: "hello 8", dot: "blue", value: 8 },
-        { text: "hello 9", dot: "blue", value: 9 },
-        { text: "hello 10", dot: "blue", value: 10 },
-        { text: "hello 11", dot: "blue", value: 11 },
-        { text: "hello 12", dot: "blue", value: 12 },
-        { text: "hello 13", dot: "blue", value: 13 },
-        { text: "hello 14", dot: "blue", value: 14 },
-        { text: "hello 15", dot: "blue", value: 15 },
-        { text: "hello 16", dot: "blue", value: 16 },
+        { text: "hello 1", dot: "red", itemValue: 1, id: 1 },
+        { text: "hello 2", dot: "blue", itemValue: 2, id: 2 },
+        { text: "hello 3", dot: "blue", itemValue: 3, id: 3 },
+        { text: "hello 4", dot: "blue", itemValue: 4, id: 4 },
+        { text: "hello 5", dot: "blue", itemValue: 5, id: 5 },
+        { text: "hello 6", dot: "blue", itemValue: 6, id: 6 },
+        { text: "hello 7", dot: "blue", itemValue: 7, id: 7 },
+        { text: "hello 8", dot: "blue", itemValue: 8, id: 8 },
+        { text: "hello 9", dot: "blue", itemValue: 9, id: 9 },
+        { text: "hello 10", dot: "blue", itemValue: 10, id: 10 },
+        { text: "hello 11", dot: "blue", itemValue: 11, id: 11 },
+        { text: "hello 12", dot: "blue", itemValue: 12, id: 12 },
+        { text: "hello 13", dot: "blue", itemValue: 13, id: 13 },
+        { text: "hello 14", dot: "blue", itemValue: 14, id: 14 },
+        { text: "hello 15", dot: "blue", itemValue: 15, id: 15 },
+        { text: "hello 16", dot: "blue", itemValue: 16, id: 16 },
       ]}
-      defaultValue={1}
+      defaultSelectedKey={1}
       callback={() => {
         // function called when an item is clicked with it's value as argument
       }}

src/examples/form.tsx

@@ -1,39 +1,46 @@
-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";
+import { getLocalTimeZone, now } from "@internationalized/date";
 const Form = () => {
-  const [value, setValue] = useState(1);
   return (
     <>
-      <Datepicker
-        time
-        onSelect={() => {
-          // Called when select is clicked with date as args
-        }}
-      />
-      <Datepicker
-        onSelect={() => {
-          // Called when select is clicked with date as args
-        }}
-      />
-      <Field
-        placeholder={"eg. Escrow"}
+      <Datepicker time minValue={now(getLocalTimeZone())} />
+      <Datepicker minValue={now(getLocalTimeZone())} />
+
+      <TextField
+        placeholder={"eg. Email"}
         variant="success"
         message="success msg"
+        type="email"
       />
-      <Field placeholder={"Number"} type="number" Icon={Telegram} />
-      <Field placeholder={"Number"} type="number" />
+      <NumberField
+        placeholder={"Number"}
+        variant="info"
+        message="Age is your"
+        Icon={Telegram}
+      />
+
+      <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 +50,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 && [