@sikka/hawa 0.0.163 → 0.0.164

package/package.json

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

package/src/elements/HawaTabs.tsx

@@ -7,16 +7,18 @@ type TabsTypes = {
   defaultValue?: any
   contents?: any
   orientation?: "horizontal" | "vertical"
+  direction?: "rtl" | "ltr"
 }
 export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   orientation = "horizontal",
+  direction = "ltr",
   ...props
 }) => {
   const [selectedOption, setSelectedOption] = useState(props.options[0]?.value)
   // const [selectedOption, setSelectedOption] = useState(props.defaultValue - 1)
   let activeTabStyle = {
     vertical:
-      "inline-block py-2 px-4 text-white bg-buttonPrimary-default rounded-lg rounded-tl-none rounded-bl-none active",
+      "inline-block py-2 px-4 text-white bg-buttonPrimary-default active",
     horizontal:
       "inline-block py-2 px-4 text-white bg-buttonPrimary-default rounded-lg rounded-br-none rounded-bl-none active",
   }
@@ -44,12 +46,13 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   }
   let tabsStyle = {
     vertical:
-      "flex flex-col w-fit flex-wrap rounded-lg border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "sticky top-2 h-fit flex flex-col w-fit flex-wrap rounded-lg border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     horizontal:
       "flex w-fit flex-wrap rounded-lg rounded-br-none rounded-bl-none  border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
   }
   return (
     <div
+      dir={direction}
       className={clsx(
         containerStyle[orientation],
         props.options[selectedOption] ? "border-b-2" : "border-b-0"
@@ -58,9 +61,24 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
       <ul
         className={clsx(
           tabsStyle[orientation],
-          props.options[selectedOption] ? "border-b-2" : "border-b-0"
+          "border-buttonPrimary-default",
+          orientation === "vertical"
+            ? direction === "rtl"
+              ? "rounded-none rounded-r-lg border-l-2"
+              : "rounded-none rounded-l-lg border-r-2"
+            : "border-b-2"
         )}
       >
+        {/* 
+        if selected option
+          if vertical
+            if rtl
+              border left
+            else
+              border right
+          else
+            border bottom
+        */}
         {props.options?.map((opt: any, o) => (
           <li key={o}>
             <button
@@ -72,9 +90,13 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
               className={clsx(
                 opt.value === selectedOption
                   ? // props.options[selectedOption].value === opt.value
-                    activeTabStyle[orientation]
+                    [
+                      activeTabStyle[orientation],
+                      direction === "rtl" ? "rounded-r-lg" : "rounded-l-lg",
+                    ]
                   : inactiveTabStyle[orientation],
-                "transition-all"
+                "w-full transition-all"
+                // direction === "rtl" ? "bg-yellow-400" : "bg-yellow-400"
               )}
             >
               {opt.label}
@@ -87,7 +109,7 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
         {props.options.map((tab) => (
           <div
             key={tab.value}
-            className={`${selectedOption === tab.value ? "" : "hidden"}`}
+            className={clsx(selectedOption === tab.value ? "" : "hidden")}
           >
             {tab.content}
           </div>

package/src/styles.css

@@ -605,6 +605,9 @@ video {
 .bottom-4 {
   bottom: 1rem;
 }
+.top-2 {
+  top: 0.5rem;
+}
 .left-3 {
   left: 0.75rem;
 }
@@ -629,9 +632,6 @@ video {
 .-left-1 {
   left: -0.25rem;
 }
-.top-2 {
-  top: 0.5rem;
-}
 .right-2\.5 {
   right: 0.625rem;
 }
@@ -1102,6 +1102,9 @@ video {
 .gap-1 {
   gap: 0.25rem;
 }
+.gap-9 {
+  gap: 2.25rem;
+}
 .gap-x-3 {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
@@ -1221,6 +1224,10 @@ video {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
 }
+.rounded-r-lg {
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
 .rounded-tr-none {
   border-top-right-radius: 0px;
 }
@@ -1239,12 +1246,12 @@ video {
 .rounded-br-lg {
   border-bottom-right-radius: 0.5rem;
 }
-.rounded-tl-none {
-  border-top-left-radius: 0px;
-}
 .rounded-br-none {
   border-bottom-right-radius: 0px;
 }
+.rounded-tl-none {
+  border-top-left-radius: 0px;
+}
 .border {
   border-width: 1px;
 }
@@ -1290,6 +1297,12 @@ video {
 .border-l-0 {
   border-left-width: 0px;
 }
+.border-l-2 {
+  border-left-width: 2px;
+}
+.border-r-2 {
+  border-right-width: 2px;
+}
 .border-dashed {
   border-style: dashed;
 }
@@ -1347,6 +1360,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
+.border-buttonPrimary-default {
+  border-color: var(--button-primary);
+}
 .border-t-white {
   --tw-border-opacity: 1;
   border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -1439,6 +1455,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
+.bg-yellow-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
+}
 .bg-primary-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(196 222 253 / var(--tw-bg-opacity));