@sikka/hawa 0.1.26 → 0.1.27

package/package.json

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

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -1,5 +1,5 @@
 import React, { useState, FC } from "react"
-import { HawaTabs } from "../../elements"
+import { HawaRadio } from "../../elements"
 import { Tooltip } from "../../elements/Tooltip"
 
 const CheckMark = () => (
@@ -65,29 +65,23 @@ type ComparingPlansTypes = {
   direction?: "rtl" | "ltr"
 }
 export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
-  const [currentCurrency, setCurrentCurrency] = useState("SAR")
+  const [currentCurrency, setCurrentCurrency] = useState("sar")
   const [currentCycle, setCurrentCycle] = useState("month")
 
   return (
     <div id="detailed-pricing" className="w-full overflow-x-auto">
       <div className="mb-2 flex w-full justify-between">
-        <HawaTabs
-          pill
+        <HawaRadio
+          design="tabs"
           defaultValue={currentCycle}
           options={props.billingCycles}
-          onChangeTab={(e: any) => {
-            // setCurrentCycle(e.label)
-            props.onCycleChange(e)
-          }}
+          onChangeTab={(e: any) => props.onCycleChange(e)}
         />
-        <HawaTabs
-          pill
+        <HawaRadio
+          design="tabs"
           defaultValue={currentCurrency}
           options={props.currencies}
-          onChangeTab={(e: any) => {
-            // setCurrentCurrency(e.label)
-            props.onCurrencyChange(e)
-          }}
+          onChangeTab={(e: any) => props.onCurrencyChange(e)}
         />
       </div>
       <div className=" overflow-hidden rounded">

package/src/blocks/Pricing/PricingPlans.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react"
-import { HawaPricingCard, HawaTabs } from "../../elements"
+import { HawaPricingCard, HawaRadio } from "../../elements"
 
 type PricingPlansTypes = {
   plans: [
@@ -46,14 +46,14 @@ export const PricingPlans: FC<PricingPlansTypes> = (props) => {
   return (
     <div>
       <div className="mb-2 flex w-full justify-between">
-        <HawaTabs
-          pill
+        <HawaRadio
+          design="tabs"
           defaultValue={props.currentCycle}
           options={props.billingCycles}
           onChangeTab={(e: any) => props.onCycleChange(e)}
         />
-        <HawaTabs
-          pill
+        <HawaRadio
+          design="tabs"
           defaultValue={props.currentCurrency}
           options={props.currencies}
           onChangeTab={(e: any) => props.onCurrencyChange(e)}

package/src/elements/HawaTabs.tsx

@@ -1,5 +1,5 @@
 import React, { useState, FC } from "react"
-import clsx from "clsx"
+import { cn } from "../util"
 
 // TODO: fix wrapping issue when small screen
 
@@ -62,13 +62,13 @@ export const HawaTabs: FC<TabsTypes> = ({
   return (
     <div
       dir={direction}
-      className={clsx(
+      className={cn(
         containerStyle[orientation],
         props.options[selectedOption] ? "border-b-2" : "border-b-0"
       )}
     >
       <ul
-        className={clsx(
+        className={cn(
           "w-full border-primary",
           marginBetween
             ? orientation === "vertical"
@@ -98,35 +98,33 @@ export const HawaTabs: FC<TabsTypes> = ({
         )}
       >
         {props.options?.map((opt: any, o) => (
-          <li key={o}>
-            <button
-              aria-current="page"
-              onClick={() => {
-                setSelectedOption(opt.value)
-                props?.onChangeTab(opt)
-              }}
-              className={clsx(
-                "flex flex-row items-center gap-2 ",
-                opt.value === selectedOption
-                  ? // props.options[selectedOption].value === opt.value
-                    [
-                      activeTabStyle[orientation],
-                      direction === "rtl" ? "rounded-r" : "rounded-l",
-                    ]
-                  : inactiveTabStyle[orientation],
-                "w-full  transition-all",
-                pill
-                  ? "rounded"
-                  : orientation === "vertical"
-                  ? "rounded rounded-bl-none rounded-tl-none"
-                  : "rounded sm:rounded-b-none"
-                // direction === "rtl" ? "bg-yellow-400" : "bg-yellow-400"
-              )}
-            >
-              {opt.icon}
-              {opt.label}
-            </button>
-          </li>
+          <button
+            key={o}
+            aria-current="page"
+            onClick={() => {
+              setSelectedOption(opt.value)
+              props?.onChangeTab(opt)
+            }}
+            className={cn(
+              opt.value === selectedOption
+                ? // props.options[selectedOption].value === opt.value
+                  [
+                    activeTabStyle[orientation],
+                    direction === "rtl" ? "rounded-r" : "rounded-l",
+                  ]
+                : inactiveTabStyle[orientation],
+              pill
+                ? "rounded"
+                : orientation === "vertical"
+                ? "rounded rounded-bl-none rounded-tl-none"
+                : "rounded sm:rounded-b-none",
+              // direction === "rtl" ? "bg-yellow-400" : "bg-yellow-400"
+              "flex w-fit flex-row items-center gap-2  transition-all "
+            )}
+          >
+            {opt.icon}
+            {opt.label}
+          </button>
         ))}
       </ul>
 
@@ -134,7 +132,7 @@ export const HawaTabs: FC<TabsTypes> = ({
         {props.options.map((tab, i) => (
           <div
             key={i}
-            className={clsx(selectedOption === tab.value ? "" : "hidden")}
+            className={cn(selectedOption === tab.value ? "" : "hidden")}
           >
             {tab.content}
           </div>

package/src/elements/Tabs.tsx

@@ -3,36 +3,80 @@ import * as TabsPrimitive from "@radix-ui/react-tabs"
 
 import { cn } from "../util"
 
-const Tabs = TabsPrimitive.Root
+const TabsContext = React.createContext<{
+  orientation?: "vertical" | "horizontal"
+}>({
+  orientation: "vertical", // default value
+})
 
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
+// const Tabs = TabsPrimitive.Root
+type TabsRootProps = React.ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Root
+> & {
+  orientation?: "vertical" | "horizontal"
+}
+
+const Tabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  TabsRootProps
+>(({ className, orientation, ...props }, ref) => (
+  <TabsPrimitive.Root
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
+      className,
+      "flex gap-2",
+      orientation === "horizontal" ? "flex-row" : "flex-col"
     )}
     {...props}
-  />
+  >
+    <TabsContext.Provider value={{ orientation }}>
+      {props.children}
+    </TabsContext.Provider>
+  </TabsPrimitive.Root>
 ))
+Tabs.displayName = TabsPrimitive.Root.displayName
+
+// type TabsListProps = React.ComponentPropsWithoutRef<
+//   typeof TabsPrimitive.List
+// > & {
+//   //   orientation?: "vertical" | "horizontal"
+// }
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => {
+  const { orientation } = React.useContext(TabsContext)
+
+  return (
+    <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 ",
+        orientation === "horizontal" ? "flex-col" : "flex-row",
+        className
+      )}
+      {...props}
+    />
+  )
+})
 TabsList.displayName = TabsPrimitive.List.displayName
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex select-none items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
+>(({ className, ...props }, ref) => {
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "inline-flex w-full flex-1 select-none items-center justify-center whitespace-nowrap rounded border px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm ",
+        className
+      )}
+      {...props}
+    />
+  )
+})
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
 
 const TabsContent = React.forwardRef<
@@ -42,7 +86,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "w-full ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     )}
     {...props}