@sikka/hawa 0.1.28 → 0.1.30

package/package.json

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

package/src/elements/HawaRadio.tsx

@@ -1,4 +1,4 @@
-import React, { useState, FC } from "react"
+import React, { useState, FC, useRef, useEffect } from "react"
 import clsx from "clsx"
 
 type RadioTypes = {
@@ -34,10 +34,22 @@ export const HawaRadio: FC<RadioTypes> = ({
     default: "max-w-fit",
     full: "w-full",
   }
+  const [parentDirection, setParentDirection] = useState(null)
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (ref.current && ref.current.parentNode) {
+      const dir = window.getComputedStyle(ref.current.parentNode).direction
+      setParentDirection(dir)
+    }
+    console.log("how many times")
+  })
+
   switch (design) {
     case "tabs":
       return (
         <ul
+          ref={ref}
           className={clsx(
             props.options?.length > 2
               ? "flex-wrap xs:max-w-full xs:flex-nowrap"
@@ -57,7 +69,11 @@ export const HawaRadio: FC<RadioTypes> = ({
               className={clsx(
                 "w-full cursor-pointer",
                 orientation === "horizontal" &&
+                  parentDirection === "ltr" &&
                   "rounded-none first:rounded-l last:rounded-r",
+                orientation === "horizontal" &&
+                  parentDirection === "rtl" &&
+                  "rounded-none first:rounded-r last:rounded-l",
                 orientation === "vertical" &&
                   "rounded-none first:rounded-t last:rounded-b",
 

package/src/elements/Tabs.tsx

@@ -52,7 +52,7 @@ const TabsList = React.forwardRef<
     <TabsPrimitive.List
       ref={ref}
       className={cn(
-        "flex w-fit flex-wrap items-center justify-start gap-1  rounded bg-muted p-1  text-muted-foreground ",
+        "flex w-fit flex-wrap items-center justify-start gap-1 rounded  border bg-muted p-1  text-muted-foreground ",
         orientation === "horizontal" ? "flex-col" : "flex-row",
         className
       )}

package/src/styles.css

@@ -887,6 +887,9 @@ video {
 .mb-5 {
   margin-bottom: 1.25rem;
 }
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .ml-0 {
   margin-left: 0px;
 }
@@ -959,6 +962,9 @@ video {
 .mt-1\.5 {
   margin-top: 0.375rem;
 }
+.mt-10 {
+  margin-top: 2.5rem;
+}
 .mt-14 {
   margin-top: 3.5rem;
 }
@@ -2908,6 +2914,10 @@ body {
   border-top-left-radius: var(--radius);
   border-bottom-left-radius: var(--radius);
 }
+.first\:rounded-r:first-child {
+  border-top-right-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
 .first\:rounded-t:first-child {
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
@@ -2916,6 +2926,10 @@ body {
   border-bottom-right-radius: var(--radius);
   border-bottom-left-radius: var(--radius);
 }
+.last\:rounded-l:last-child {
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
+}
 .last\:rounded-r:last-child {
   border-top-right-radius: var(--radius);
   border-bottom-right-radius: var(--radius);

package/src/translations/ar.json

@@ -38,5 +38,10 @@
   "termsText": "الشروط والأحكام",
   "termsRequiredText": "يجب الموافقة على الشروط والأحكام للإستمرار",
   "existingUserText": "لديك حساب؟",
-  "refCode": "رمز الإحالة"
+  "refCode": "رمز الإحالة",
+  "account": "الحساب",
+  "password": "كلمة المرور",
+  "settings": "الإعدادات",
+  "display": "المظهر",
+  "option": "خيار"
 }

package/src/translations/en.json

@@ -37,5 +37,10 @@
   "termsText": "terms & conditions",
   "termsRequiredText": "you must accept the terms & conditions",
   "existingUserText": "Existing User?",
-  "refCode": "Referral Code"
+  "refCode": "Referral Code",
+  "account": "Account",
+  "password": "Password",
+  "settings": "Settings",
+  "display": "Display",
+  "option": "Option"
 }