@sikka/hawa 0.0.286 → 0.0.288

package/lib/stories/ManualStories/Overview.stories.d.ts

@@ -12,7 +12,6 @@ declare const _default: {
             exclude: any[];
         };
         className: string;
-        customIcon: () => React.JSX.Element;
         options: {
             showPanel: boolean;
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.286",
+  "version": "0.0.288",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/Account/UserSettingsForm.tsx

@@ -12,9 +12,7 @@ export const UserSettingsForm: FC<UserSettingsFormTypes> = (props) => {
   return (
     <HawaContainer>
       <div className="mb-2 text-sm font-bold">{props.blockTitle}</div>
-      <div className="flex flex-col gap-4 rounded bg-white p-2">
-        {props.children}
-      </div>
+      <div className="flex flex-col gap-4 rounded  p-2">{props.children}</div>
       {/* <HawaButton
         color="primary"
         // type="submit"

package/src/blocks/AuthForms/SignInForm.tsx

@@ -142,21 +142,24 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
           {props.viaGoogle && (
             <HawaLogoButton
               logo="google"
-              buttonText={props.texts.googleButtonLabel}
+              direction={props.direction}
+              buttonText={props.texts.signInViaGoogleLabel}
               onClick={props.handleGoogleSignIn}
             />
           )}
           {props.viaGithub && (
             <HawaLogoButton
               logo="github"
-              buttonText={props.texts.githubButtonLabel}
+              direction={props.direction}
+              buttonText={props.texts.signInViaGithubLabel}
               onClick={props.handleGithubSignIn}
             />
           )}
           {props.viaTwitter && (
             <HawaLogoButton
               logo="twitter"
-              buttonText={props.texts.twitterButtonLabel}
+              direction={props.direction}
+              buttonText={props.texts.signInViaTwitterLabel}
               onClick={props.handleTwitterSignIn}
             />
           )}
@@ -188,9 +191,9 @@ type SignInFormTypes = {
     newUserText?: string
     signUpText?: string
     signInText?: string
-    googleButtonLabel?: string
-    githubButtonLabel?: string
-    twitterButtonLabel?: string
+    signInViaGoogleLabel?: string
+    signInViaGithubLabel?: string
+    signInViaTwitterLabel?: string
   }
   withoutResetPassword?: boolean
   withoutSignUp?: boolean

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -38,9 +38,9 @@ type SignUpFormTypes = {
     signUpText: string
     signInText: string
     existingUserText: string
-    googleButtonLabel: string
-    githubButtonLabel: string
-    twitterButtonLabel: string
+    signUpViaGoogleLabel: string
+    signUpViaGithubLabel: string
+    signUpViaTwitterLabel: string
     refCode: string
   }
   showUserSource: any
@@ -302,21 +302,24 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
           {props.viaGoogle && (
             <HawaLogoButton
               logo="google"
-              buttonText={props.texts.googleButtonLabel}
+              direction={props.direction}
+              buttonText={props.texts.signUpViaGoogleLabel}
               onClick={props.handleGoogleSignUp}
             />
           )}
           {props.viaGithub && (
             <HawaLogoButton
               logo="github"
-              buttonText={props.texts.githubButtonLabel}
+              direction={props.direction}
+              buttonText={props.texts.signUpViaGithubLabel}
               onClick={props.handleGithubSignUp}
             />
           )}
           {props.viaTwitter && (
             <HawaLogoButton
               logo="twitter"
-              buttonText={props.texts.twitterButtonLabel}
+              direction={props.direction}
+              buttonText={props.texts.signUpViaTwitterLabel}
               onClick={props.handleTwitterSignUp}
             />
           )}

package/src/blocks/Pricing/HorizontalPricing.tsx

@@ -66,7 +66,11 @@ export const HorizontalPricing: FC<HorizontalPricingTypes> = (props) => {
           />
         </div>
         {data.map((d) => (
-          <label htmlFor={d.title} onClick={() => setSelectedCard(d.title)}>
+          <label
+            htmlFor={d.title}
+            className=""
+            onClick={() => setSelectedCard(d.title)}
+          >
             <input
               type="radio"
               name="radio"
@@ -76,7 +80,7 @@ export const HorizontalPricing: FC<HorizontalPricingTypes> = (props) => {
             <div
               className={clsx(
                 selectedCard === d.title ? "peer-checked:border-blue-500" : "",
-                "peer flex cursor-pointer items-center justify-between rounded-xl border-2 border-transparent bg-white px-5 py-4 shadow  peer-checked:[&_.active]:block peer-checked:[&_.default]:hidden"
+                "peer flex cursor-pointer items-center justify-between  rounded-xl border bg-background px-5   py-4 shadow dark:text-white  peer-checked:[&_.active]:block peer-checked:[&_.default]:hidden"
               )}
             >
               <div className="peer flex items-center gap-4">
@@ -125,13 +129,17 @@ const CheckIcons = () => (
   </>
 )
 const CardText = (props) => (
-  <div className="peer flex flex-col items-start">
-    <h2 className="font-medium text-neutral-700 sm:text-xl">{props.title}</h2>
-    <p className="text-sm text-neutral-500">{props.subtitle} </p>
+  <div className="peer flex flex-col items-start ">
+    <h2 className="font-medium text-neutral-700 dark:text-gray-100 sm:text-xl">
+      {props.title}
+    </h2>
+    <p className="text-sm text-neutral-500 dark:text-gray-300">
+      {props.subtitle}{" "}
+    </p>
   </div>
 )
 const CardPrice = (props) => (
-  <h2 className="peer text-xl font-semibold text-neutral-900 sm:text-2xl">
+  <h2 className="peer text-xl font-semibold text-neutral-900 dark:text-white sm:text-2xl">
     {props.amount}
     <span className="text-base font-medium text-neutral-400">
       {props.cycle}

package/src/blocks/Referral/ReferralAccount.tsx

@@ -15,7 +15,7 @@ export const ReferralAccount: FC<ReferralAccount> = ({
     <HawaContainer>
       <div className="my-2 mt-0">
         <div className="mb-1">Referral Code</div>
-        <div className="flex flex-row items-center justify-between rounded bg-white">
+        <div className="flex flex-row items-center justify-between rounded border bg-background">
           <span className="ml-3 font-bold">{referralCode}</span>
           <HawaButton
             tooltip="Copy"
@@ -39,7 +39,7 @@ export const ReferralAccount: FC<ReferralAccount> = ({
       </div>
       <div className="my-2 mt-0">
         <div className="mb-1">Referral Link</div>
-        <div className="flex flex-row items-center justify-between rounded bg-white">
+        <div className="flex flex-row items-center justify-between rounded border bg-background">
           <span className="ml-3 font-bold">{referralLink}</span>
           <HawaButton
             className="mr-1.5"

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -3,6 +3,7 @@ import {
   HawaAlert,
   HawaButton,
   HawaChip,
+  HawaMenu,
   HawaSelect,
   HawaTextField,
 } from "../../elements"
@@ -93,36 +94,77 @@ export const ReferralSettlement: FC<TReferralSettlement> = ({
   )
 }
 
-const SettlementAccountCard = (props) => (
-  <div className="mb-3 flex flex-row items-center justify-between rounded border-b bg-white p-3">
-    <div className="flex flex-col justify-between">
-      <div className="text-xs">{props.bank}</div>
-      <div>{props.accountHolder}</div>
-      <div className="text-xs">{props.iban}</div>
-    </div>
-    <div className="flex flex-row items-center justify-center gap-2">
-      {props.default && (
-        <HawaButton disabled variant="outlined" size="small">
-          Default
-        </HawaButton>
-      )}
-      {/* {props.default && <HawaChip size="normal" label="Default" />} */}
-      {!props.default && <HawaButton size="small">Make Default</HawaButton>}
-      <HawaButton tooltip="Delete" size="small">
-        {/* <FaTimes /> */}
-        <svg
-          aria-hidden="true"
-          className="h-5 w-5"
-          fill="currentColor"
-          viewBox="0 0 20 20"
+const SettlementAccountCard = (props) => {
+  return (
+    <div className="mb-3 flex flex-row items-center justify-between rounded border bg-background p-3">
+      <div className="flex flex-col justify-between">
+        <div className="text-xs">{props.bank}</div>
+        <div>{props.accountHolder}</div>
+        <div className="text-xs">{props.iban}</div>
+      </div>
+      <div className="flex flex-row items-center justify-center gap-2">
+        {props.default && (
+          <HawaButton disabled variant="outlined" size="xs" margins="none">
+            Default
+          </HawaButton>
+        )}
+
+        <HawaMenu
+          size="small"
+          menuItems={[
+            [
+              { label: "Set Default", disabled: props.default },
+              { label: "Edit" },
+              { label: "Delete" },
+            ],
+          ]}
+          // position={direction === "rtl" ? "right-bottom" : "left-bottom"}
+          // direction={direction}
         >
-          <path
-            fillRule="evenodd"
-            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-            clipRule="evenodd"
-          ></path>
-        </svg>
-      </HawaButton>
+          <HawaButton variant="outlined"  >
+            <svg
+              aria-label="Vertical Three Dots Menu Icon"
+              className="rotate-90"
+              stroke="currentColor"
+              fill="currentColor"
+              stroke-width="0"
+              viewBox="0 0 16 16"
+              height="1em"
+              width="1em"
+            >
+              <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path>
+            </svg>
+          </HawaButton>
+          {/* <div className="flex w-fit rotate-90 cursor-pointer  items-center justify-center rounded  p-2 hover:bg-buttonPrimary-500/50">
+            <svg
+              aria-label="Vertical Three Dots Menu Icon"
+              stroke="currentColor"
+              fill="currentColor"
+              stroke-width="0"
+              viewBox="0 0 16 16"
+              height="1em"
+              width="1em"
+            >
+              <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path>
+            </svg>
+          </div> */}
+        </HawaMenu>
+        {/* {!props.default && <HawaButton size="small">Make Default</HawaButton>} */}
+        {/* <HawaButton tooltip="Delete" size="small">
+          <svg
+            aria-hidden="true"
+            className="h-5 w-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fillRule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            ></path>
+          </svg>
+        </HawaButton> */}
+      </div>
     </div>
-  </div>
-)
+  )
+}

package/src/blocks/Referral/ReferralStats.tsx

@@ -69,13 +69,13 @@ export const ReferralStats: FC<TReferralStats> = ({
 }
 
 const NumberCard = (props) => (
-  <div className="w-full rounded bg-white p-2">
+  <div className="w-full rounded border bg-background p-2">
     <div className="text-sm">{props.title}</div>
     <div className="font-bold">{props.number}</div>
   </div>
 )
 const ReferralSignUpCard = (props) => (
-  <div className="mb-3 rounded border-b bg-white p-2">
+  <div className="mb-3 rounded border-b bg-background p-2">
     <div className="text-xs">{props.date}</div>
     <div className="flex flex-row justify-between">
       <div>{props.email}</div>

package/src/elements/DragDropImages.tsx

@@ -197,8 +197,8 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
       )}
       <div
         className={clsx(
-          "flex flex-col justify-center rounded border border-dashed border-black  transition-all hover:bg-gray-100 ",
-          isDragActive ? "bg-layoutPrimary-500" : "bg-white"
+          "flex flex-col justify-center rounded border border-dashed  transition-all hover:bg-gray-100 dark:hover:bg-gray-800 ",
+          isDragActive ? "bg-gray-200 dark:bg-gray-700" : "bg-background"
         )}
       >
         <div {...getRootProps({})}>

package/src/elements/HawaButton.tsx

@@ -9,7 +9,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   tooltipDirection?: "rtl" | "ltr"
   color?: "default" | "primary" | "secondary" | "light" | "dark"
   width?: "full" | "normal" | "half"
-  size?: "xs" | "small" | "medium" | "large" | "noPadding" | "full"
+  size?: "xs" | "small" | "medium" | "large" | "noPadding" | "full" | "icon"
   margins?: "none" | "1" | "2" | "3" | "4"
   tooltip?: string
   tooltipSize?: "normal" | "small" | "large"
@@ -36,11 +36,13 @@ const disabledVariantSyles = {
   outlined: "text-gray-300 border-gray-300",
 }
 const baseStyles =
-  "cursor-pointer h-[2.36rem] justify-center items-center text-center font-medium transition-all"
+"cursor-pointer justify-center items-center text-center font-medium transition-all"
 const sizeStyles = {
-  xs: "px-1 py-1",
+  icon: "h-10 w-10",
+  xs: "px-1.5 py-2 text-[9px] h-fit",
   small: "text-xs px-2.5 py-1.5",
-  medium: "text-sm leading-4 px-3 py-2",
+  medium: "text-sm leading-4 px-3 py-2 h-[2.36rem] ",
+  default: "h-10 px-4 py-2",
   large: "text-sm px-4 py-2",
   noPadding: "p-0",
   full: "h-full max-h-full p-2",
@@ -58,7 +60,9 @@ const containerWidthStyles = {
 }
 const variantStyles = {
   contained: "border-transparent",
-  outlined: "bg-transparent border",
+  // outlined: "bg-transparent border",
+  outlined:
+    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
 }
 const colorStyles = {
   contained: {
@@ -77,8 +81,8 @@ const colorStyles = {
     primary: "text-black hover:bg-gray-50  dark:text-white",
     secondary:
       " dark:text-white text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",
-    gray: "border-gray-300 hover:bg-gray-200  ",
-    dark: "border-gray-900 hover:bg-gray-700  ",
+    gray: "border-gray-300 hover:bg-gray-200",
+    dark: "border-gray-900 hover:bg-gray-700",
   },
 }
 

package/src/elements/HawaColorPicker.tsx

@@ -10,7 +10,7 @@ type ColorPickerTypes = {
 export const HawaColorPicker: FC<ColorPickerTypes> = (props) => {
   const [selectedColor, setSelectedColor] = useState(props.color)
   return (
-    <div className={`flex w-fit flex-row rounded border-2 border-gray-200 p-0`}>
+    <div className={`flex w-fit flex-row rounded border p-0`}>
       <div
         style={{ backgroundColor: selectedColor }}
         className="rounded-bl-lg rounded-tl-lg"
@@ -33,7 +33,7 @@ export const HawaColorPicker: FC<ColorPickerTypes> = (props) => {
           props.handleChange(e)
         }}
         value={selectedColor}
-        className="w-24  rounded-br-lg rounded-tr-lg pl-2 pr-2"
+        className="w-24 bg-background  rounded-br-lg rounded-tr-lg pl-2 pr-2"
       />
     </div>
   )

package/src/elements/HawaLogoButton.tsx

@@ -15,6 +15,7 @@ type LogoButtonTypes = {
     | "mada"
   onClick?: any
   buttonText?: any
+  direction?: "rtl" | "ltr"
 }
 export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
   let isArabic = props.lang === "ar"
@@ -32,12 +33,7 @@ export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
       break
     case "github":
       logoElement = (
-        <svg
-          width="32px"
-          height="32px"
-          viewBox="0 0 32 32"
-          className="h-7 w-7"
-        >
+        <svg width="32px" height="32px" viewBox="0 0 32 32" className="h-7 w-7">
           <path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z" />
         </svg>
       )
@@ -120,11 +116,7 @@ export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
       break
     case "wallet":
       logoElement = (
-        <svg
-          version="1.1"
-          viewBox="0 0 223 223"
-          className="h-6 w-6"
-        >
+        <svg version="1.1" viewBox="0 0 223 223" className="h-6 w-6">
           <g>
             <path
               d="M223,94.5c0-6.075-4.925-11-11-11h-63c-6.075,0-11,4.925-11,11v33c0,6.075,4.925,11,11,11h63c6.075,0,11-4.925,11-11V94.5z
@@ -145,9 +137,10 @@ export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
 
   return (
     <button
-      style={{ direction: isArabic ? "rtl" : "ltr" }}
+      dir={props.direction}
+      // style={{ direction: isArabic ? "rtl" : "ltr" }}
       onClick={props.onClick}
-      className="my-2 border flex h-11 w-full flex-row justify-center rounded bg-white align-middle transition-all hover:ring-1 hover:ring-buttonPrimary-500 hover:brightness-90"
+      className="my-2 flex h-11 w-full flex-row justify-center rounded border bg-white align-middle transition-all hover:ring-1 hover:ring-buttonPrimary-500 hover:brightness-90"
     >
       <div className="flex h-full flex-row items-center justify-end">
         {logoElement}

package/src/elements/HawaRadio.tsx

@@ -69,9 +69,9 @@ export const HawaRadio: FC<RadioTypes> = ({
       return (
         <div className={clsx(orientationStyle[orientation], "gap-4")}>
           {props.options.map((opt, i) => (
-            <div className="rounded border border-gray-200  ">
+            <div className="rounded border border-gray-200   ">
               <div
-                className="radio-item radio-item-bordered flex items-center   transition-all"
+                className="radio-item radio-item-bordered flex items-center    transition-all"
                 key={i + 1}
               >
                 <input
@@ -85,7 +85,7 @@ export const HawaRadio: FC<RadioTypes> = ({
                 <label
                   htmlFor={opt.value.toString()}
                   className={clsx(
-                    "ml-2 w-full  p-4 pl-3  text-sm font-medium",
+                    "ml-2 w-full  p-4 pl-3  text-sm font-medium dark:text-white",
                     opt.disabled ? "opacity-50" : "cursor-pointer text-gray-900"
                   )}
                 >
@@ -164,7 +164,7 @@ export const HawaRadio: FC<RadioTypes> = ({
               <label
                 htmlFor={opt.value.toString()}
                 className={clsx(
-                  "ml-2 text-sm font-medium ",
+                  "ml-2 text-sm font-medium dark:text-white",
                   opt.disabled
                     ? "text-gray-400"
                     : "cursor-pointer text-gray-900"

package/src/elements/HawaTable.tsx

@@ -55,7 +55,7 @@ export const HawaTable: FC<TableTypes> = ({
   size = "normal",
   bodyColor = "white",
   headerColor = "gray-200",
-  borders,
+  borders = "all",
   highlightFirst = false,
   direction = "ltr",
   bordersWidth = "1",
@@ -130,7 +130,7 @@ export const HawaTable: FC<TableTypes> = ({
     <div className="relative flex flex-col gap-2 ">
       <div className={`overflow-x-auto rounded  bg-${headerColor}`}>
         {props.headerTools && (
-          <div className="flex flex-row items-center justify-between gap-2 px-4 py-2">
+          <div className="flex flex-row items-center justify-between gap-2 border bg-background px-4  py-2">
             <HawaTextField
               icon={
                 <svg
@@ -189,7 +189,7 @@ export const HawaTable: FC<TableTypes> = ({
         <table
           className={clsx(
             borders === "outer" || borders === "all"
-              ? `outline outline-[${bordersWidth}px] -outline-offset-1 outline-gray-300`
+              ? `outline outline-[${bordersWidth}px] -outline-offset-1 outline-gray-300 dark:outline-gray-700`
               : "",
             "w-full  rounded   text-left text-sm text-gray-500 dark:text-gray-400",
             `bg-${headerColor}`
@@ -350,7 +350,7 @@ export const HawaTable: FC<TableTypes> = ({
                               }
                               direction={direction}
                             >
-                              <div className="flex w-fit  items-center justify-center rounded  p-2 hover:bg-gray-200">
+                              <div className="flex w-fit  cursor-pointer items-center justify-center rounded  p-2 hover:bg-gray-200 dark:hover:bg-gray-600">
                                 <svg
                                   aria-label="Vertical Three Dots Menu Icon"
                                   stroke="currentColor"
@@ -384,8 +384,9 @@ export const HawaTable: FC<TableTypes> = ({
                 <td colSpan={20}>
                   <div
                     className={clsx(
-                      "w-full rounded-b bg-white p-5 text-center",
-                      bodyColor ? `bg-${bodyColor}` : "bg-white"
+                      "w-full rounded-b  border p-5 text-center",
+                      // bodyColor ? `bg-${bodyColor}` : "bg-background"
+                      "bg-background"
                     )}
                   >
                     {props.texts?.noData ?? "No Data"}
@@ -405,7 +406,7 @@ export const HawaTable: FC<TableTypes> = ({
               {/* Previous Page Button */}
               <div
                 className={clsx(
-                  "flex h-6 w-6 rotate-180 items-center justify-center rounded bg-gray-100 p-1  text-xs hover:bg-layoutPrimary-700 "
+                  "flex h-6 w-6 rotate-180 cursor-pointer items-center justify-center rounded border bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700  dark:bg-background dark:hover:bg-gray-700 "
                 )}
                 onClick={() =>
                   page <= 1 ? setPage(range.length) : setPage(page - 1)
@@ -500,10 +501,15 @@ export const HawaTable: FC<TableTypes> = ({
                       <button
                         key={index}
                         className={clsx(
-                          "w-10 p-1 text-xs hover:bg-gray-200",
+                          "w-10 p-1 text-xs  hover:bg-gray-200 dark:hover:bg-gray-700",
                           page === el
                             ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
-                            : "bg-gray-100"
+                            : "border bg-background",
+
+                          index === 0 ? "rounded-l border-r-0" : "",
+                          index === range.length - 1
+                            ? "rounded-r border-l-0"
+                            : ""
                         )}
                         onClick={() => setPage(el)}
                       >
@@ -518,7 +524,7 @@ export const HawaTable: FC<TableTypes> = ({
                   page >= range.length ? setPage(1) : setPage(page + 1)
                 }
                 className={clsx(
-                  "flex h-6 w-6 items-center  justify-center rounded bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700 "
+                  "flex h-6 w-6  cursor-pointer items-center justify-center rounded border bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700  dark:bg-background dark:hover:bg-gray-700 "
                 )}
               >
                 <svg
@@ -542,14 +548,14 @@ export const HawaTable: FC<TableTypes> = ({
           )}
           {/* Pagination Settings */}
           {props.rows ? (
-            <div className="flex w-fit flex-row items-center gap-2 ">
+            <div className="flex w-fit flex-row items-center gap-2  ">
               <div className="text-xs ">
                 {props.rows.length} {props.texts?.items ?? "Items"}
               </div>
 
               <select
                 value={perPage}
-                className="h-6 rounded text-xs"
+                className="h-6 cursor-pointer rounded border bg-background px-2 text-xs"
                 onChange={(e) => {
                   setPerPage(parseInt(e.target.value))
                 }}

package/src/elements/HawaTooltip.tsx

@@ -44,7 +44,7 @@ export const HawaTooltip: FC<THawaToolTip> = ({
   })
 
   let defaultTooltipStyles =
-    "absolute z-10   rounded bg-gray-900  text-center text-sm font-medium text-white shadow-sm transition-all duration-300 dark:bg-gray-700"
+    "absolute z-10   rounded bg-gray-100  text-center text-sm font-medium text-foreground dark:text-white  shadow-sm transition-all duration-300 dark:bg-gray-700"
   let sizeStyles = {
     normal: "py-2 px-3 leading-2",
     small: "py-2 px-2 text-[10px] leading-tight",

package/src/elements/UserFeedback.tsx

@@ -47,11 +47,11 @@ export const UserFeedback: FC<ComponentTypes> = ({
   return (
     <div
       ref={popUpRef}
-      className={clsx("fixed bottom-4", boxPosition[position])}
+      className={clsx("fixed bottom-4 ", boxPosition[position])}
     >
       <div
         className={clsx(
-          "relative flex w-full max-w-sm flex-col gap-2 rounded bg-white p-4 shadow-md transition-all",
+          "relative flex w-full max-w-sm flex-col gap-2 rounded border bg-background p-4 shadow-md transition-all",
           closed ? "opacity-0" : "opacity-100"
         )}
       >
@@ -96,7 +96,7 @@ export const UserFeedback: FC<ComponentTypes> = ({
                 "w-full cursor-pointer rounded border  p-4 text-center transition-all ",
                 clickedOption === op
                   ? "bg-gray-500 text-white"
-                  : "bg-white hover:bg-gray-100"
+                  : "border bg-background hover:bg-gray-300 dark:hover:bg-gray-700"
               )}
             >
               {op}