feat: adding additional ui components

packages/ui/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { FC } from 'react';
 
 declare const Button: () => JSX.Element;
 
@@ -17,4 +18,24 @@ interface InputProps {
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
-export { Button, Input, InputProps };
+interface TextAreaProps {
+    id: string;
+    name: string;
+    placeholder?: string;
+    value?: string;
+    rows?: number;
+    cols?: number;
+    disabled?: boolean;
+    onChange: () => void;
+    mode?: "primary" | "transparent";
+    hasError?: boolean;
+    className?: string;
+}
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+interface IRadialProgressBar {
+    progress: number;
+}
+declare const RadialProgressBar: FC<IRadialProgressBar>;
+
+export { Button, Input, InputProps, RadialProgressBar, TextArea, TextAreaProps };

packages/ui/dist/index.js

@@ -27,7 +27,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   Button: () => Button,
-  Input: () => Input
+  Input: () => Input,
+  RadialProgressBar: () => RadialProgressBar,
+  TextArea: () => TextArea
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -66,8 +68,90 @@ var Input = React2.forwardRef((props, ref) => {
   });
 });
 Input.displayName = "form-input-field";
+
+// src/form-fields/textarea.tsx
+var React3 = __toESM(require("react"));
+var useAutoSizeTextArea = (textAreaRef, value) => {
+  React3.useEffect(() => {
+    if (textAreaRef) {
+      textAreaRef.style.height = "0px";
+      const scrollHeight = textAreaRef.scrollHeight;
+      textAreaRef.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+var TextArea = React3.forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      name,
+      placeholder = "",
+      value = "",
+      rows = 1,
+      cols = 1,
+      disabled,
+      onChange,
+      mode = "primary",
+      hasError = false,
+      className = ""
+    } = props;
+    const textAreaRef = React3.useRef(ref);
+    ref && useAutoSizeTextArea(textAreaRef == null ? void 0 : textAreaRef.current, value);
+    return /* @__PURE__ */ React3.createElement("textarea", {
+      id,
+      name,
+      ref: textAreaRef,
+      placeholder,
+      value,
+      rows,
+      cols,
+      disabled,
+      onChange,
+      className: `no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-100" : ""} ${className}`
+    });
+  }
+);
+
+// src/progress/radial-progress.tsx
+var import_react = __toESM(require("react"));
+var RadialProgressBar = (props) => {
+  const { progress } = props;
+  const [circumference, setCircumference] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const radius = 40;
+    const circumference2 = 2 * Math.PI * radius;
+    setCircumference(circumference2);
+  }, []);
+  const progressOffset = (100 - progress) / 100 * circumference;
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "relative h-4 w-4"
+  }, /* @__PURE__ */ import_react.default.createElement("svg", {
+    className: "absolute top-0 left-0",
+    viewBox: "0 0 100 100"
+  }, /* @__PURE__ */ import_react.default.createElement("circle", {
+    className: "stroke-current opacity-10",
+    cx: "50",
+    cy: "50",
+    r: "40",
+    strokeWidth: "12",
+    fill: "none",
+    strokeDasharray: `${circumference} ${circumference}`
+  }), /* @__PURE__ */ import_react.default.createElement("circle", {
+    className: `stroke-current`,
+    cx: "50",
+    cy: "50",
+    r: "40",
+    strokeWidth: "12",
+    fill: "none",
+    strokeDasharray: `${circumference} ${circumference}`,
+    strokeDashoffset: progressOffset,
+    transform: "rotate(-90 50 50)"
+  })));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
-  Input
+  Input,
+  RadialProgressBar,
+  TextArea
 });

packages/ui/dist/index.mjs

@@ -33,7 +33,89 @@ var Input = React2.forwardRef((props, ref) => {
   });
 });
 Input.displayName = "form-input-field";
+
+// src/form-fields/textarea.tsx
+import * as React3 from "react";
+var useAutoSizeTextArea = (textAreaRef, value) => {
+  React3.useEffect(() => {
+    if (textAreaRef) {
+      textAreaRef.style.height = "0px";
+      const scrollHeight = textAreaRef.scrollHeight;
+      textAreaRef.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+var TextArea = React3.forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      name,
+      placeholder = "",
+      value = "",
+      rows = 1,
+      cols = 1,
+      disabled,
+      onChange,
+      mode = "primary",
+      hasError = false,
+      className = ""
+    } = props;
+    const textAreaRef = React3.useRef(ref);
+    ref && useAutoSizeTextArea(textAreaRef == null ? void 0 : textAreaRef.current, value);
+    return /* @__PURE__ */ React3.createElement("textarea", {
+      id,
+      name,
+      ref: textAreaRef,
+      placeholder,
+      value,
+      rows,
+      cols,
+      disabled,
+      onChange,
+      className: `no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-100" : ""} ${className}`
+    });
+  }
+);
+
+// src/progress/radial-progress.tsx
+import React4, { useState, useEffect as useEffect2 } from "react";
+var RadialProgressBar = (props) => {
+  const { progress } = props;
+  const [circumference, setCircumference] = useState(0);
+  useEffect2(() => {
+    const radius = 40;
+    const circumference2 = 2 * Math.PI * radius;
+    setCircumference(circumference2);
+  }, []);
+  const progressOffset = (100 - progress) / 100 * circumference;
+  return /* @__PURE__ */ React4.createElement("div", {
+    className: "relative h-4 w-4"
+  }, /* @__PURE__ */ React4.createElement("svg", {
+    className: "absolute top-0 left-0",
+    viewBox: "0 0 100 100"
+  }, /* @__PURE__ */ React4.createElement("circle", {
+    className: "stroke-current opacity-10",
+    cx: "50",
+    cy: "50",
+    r: "40",
+    strokeWidth: "12",
+    fill: "none",
+    strokeDasharray: `${circumference} ${circumference}`
+  }), /* @__PURE__ */ React4.createElement("circle", {
+    className: `stroke-current`,
+    cx: "50",
+    cy: "50",
+    r: "40",
+    strokeWidth: "12",
+    fill: "none",
+    strokeDasharray: `${circumference} ${circumference}`,
+    strokeDashoffset: progressOffset,
+    transform: "rotate(-90 50 50)"
+  })));
+};
 export {
   Button,
-  Input
+  Input,
+  RadialProgressBar,
+  TextArea
 };

packages/ui/src/form-fields/index.tsx

@@ -1 +1,2 @@
 export * from "./input";
+export * from "./textarea";

packages/ui/src/form-fields/textarea.tsx

@@ -2,10 +2,11 @@ import * as React from "react";
 
 export interface TextAreaProps {
   id: string;
+  name: string;
   placeholder?: string;
   value?: string;
-  rows: number;
-  cols: number;
+  rows?: number;
+  cols?: number;
   disabled?: boolean;
   onChange: () => void;
   mode?: "primary" | "transparent";
@@ -35,10 +36,11 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
   (props, ref) => {
     const {
       id,
+      name,
       placeholder = "",
       value = "",
-      rows,
-      cols,
+      rows = 1,
+      cols = 1,
       disabled,
       onChange,
       mode = "primary",
@@ -53,6 +55,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
     return (
       <textarea
         id={id}
+        name={name}
         ref={textAreaRef}
         placeholder={placeholder}
         value={value}

packages/ui/src/index.tsx

@@ -1,2 +1,3 @@
 export * from "./buttons";
 export * from "./form-fields";
+export * from "./progress";

packages/ui/src/progress/index.tsx

@@ -0,0 +1 @@
+export * from "./radial-progress";

packages/ui/src/progress/radial-progress.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect, FC } from "react";
+
+interface IRadialProgressBar {
+  progress: number;
+}
+
+export const RadialProgressBar: FC<IRadialProgressBar> = (props) => {
+  const { progress } = props;
+  const [circumference, setCircumference] = useState(0);
+
+  useEffect(() => {
+    const radius = 40;
+    const circumference = 2 * Math.PI * radius;
+    setCircumference(circumference);
+  }, []);
+
+  const progressOffset = ((100 - progress) / 100) * circumference;
+
+  return (
+    <div className="relative h-4 w-4">
+      <svg className="absolute top-0 left-0" viewBox="0 0 100 100">
+        <circle
+          className={"stroke-current opacity-10"}
+          cx="50"
+          cy="50"
+          r="40"
+          strokeWidth="12"
+          fill="none"
+          strokeDasharray={`${circumference} ${circumference}`}
+        />
+        <circle
+          className={`stroke-current`}
+          cx="50"
+          cy="50"
+          r="40"
+          strokeWidth="12"
+          fill="none"
+          strokeDasharray={`${circumference} ${circumference}`}
+          strokeDashoffset={progressOffset}
+          transform="rotate(-90 50 50)"
+        />
+      </svg>
+    </div>
+  );
+};