@sikka/hawa 0.0.243 → 0.0.245

package/src/elements/HawaModal.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect } from "react"
+import { ReactElement, useEffect, FC } from "react"
 import clsx from "clsx"
 
 type ModalTypes = {
@@ -29,7 +29,7 @@ type ModalTypes = {
    */
   actions: any
 }
-export const HawaModal: React.FunctionComponent<ModalTypes> = ({
+export const HawaModal: FC<ModalTypes> = ({
   open,
   title,
   onClose,

package/src/elements/HawaPanelTabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState, FC } from "react"
 
 type PanelTabsTypes = {
   defaultValue: any
@@ -7,9 +7,7 @@ type PanelTabsTypes = {
   handleChange: any
   location: any
 }
-export const HawaPanelTabs: React.FunctionComponent<PanelTabsTypes> = (
-  props
-) => {
+export const HawaPanelTabs: FC<PanelTabsTypes> = (props) => {
   const [value, setValue] = useState(props.defaultValue)
   return (
     <div>

package/src/elements/HawaPhoneInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState, FC } from "react"
 import Countries from "../countries"
 import Select from "react-select"
 
@@ -10,7 +10,7 @@ type OptionTypes = {
   innerProps: any
   innerRef: any
 }
-const Option: React.FunctionComponent<OptionTypes> = ({
+const Option: FC<OptionTypes> = ({
   cx,
   children,
   getStyles,
@@ -39,9 +39,7 @@ type HawaPhoneInputTypes = {
   country?: any
   handleChange?: any
 }
-export const HawaPhoneInput: React.FunctionComponent<HawaPhoneInputTypes> = (
-  props
-) => {
+export const HawaPhoneInput: FC<HawaPhoneInputTypes> = (props) => {
   const [selectedCountry, setSelectedCountry] = useState("+966")
 
   return (

package/src/elements/HawaPinInput.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState, FC } from "react"
 
 type PinInputTypes = {
   label?: string
@@ -8,7 +8,7 @@ type PinInputTypes = {
   width?: "normal" | "full"
   getPins?: any
 }
-export const HawaPinInput: React.FunctionComponent<PinInputTypes> = ({
+export const HawaPinInput: FC<PinInputTypes> = ({
   label,
   icon,
   digits,

package/src/elements/HawaPricingCard.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React from "react"
+import { FC } from "react"
 import { HawaButton } from "./HawaButton"
 
 // TODO: if feature.excluded is false, show gray and x
@@ -22,7 +22,7 @@ type PricingCardTypes = {
   size: "small" | "medium" | "large"
 }
 
-export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
+export const HawaPricingCard: FC<PricingCardTypes> = ({
   size = "medium",
   direction = "ltr",
   currentPlan = false,

package/src/elements/HawaRadio.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState, FC } from "react"
 import clsx from "clsx"
 
 type RadioTypes = {
@@ -11,7 +11,7 @@ type RadioTypes = {
   onChangeTab?: any
   defaultValue?: any
 }
-export const HawaRadio: React.FunctionComponent<RadioTypes> = (props) => {
+export const HawaRadio: FC<RadioTypes> = (props) => {
   const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
     "inline-block py-2 px-4  w-full text-white bg-buttonPrimary-500 rounded active"

package/src/elements/HawaRange.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC, useState } from "react"
 
 type RangeTypes = {
   value?: any
@@ -10,7 +10,7 @@ type RangeTypes = {
   max?: any
 }
 
-export const HawaRange: React.FunctionComponent<RangeTypes> = ({
+export const HawaRange: FC<RangeTypes> = ({
   value,
   handleChange,
   startElement,
@@ -18,7 +18,7 @@ export const HawaRange: React.FunctionComponent<RangeTypes> = ({
   label,
   ...props
 }) => {
-  const [rangeValue, setRangeValue] = React.useState(value)
+  const [rangeValue, setRangeValue] = useState(value)
 
   return (
     <div {...props}>

package/src/elements/HawaSearchBar.tsx

@@ -1,9 +1,7 @@
-import React from "react"
+import { FC } from "react"
 import { HawaTextField } from "./HawaTextField"
 
 type SearchBarTypes = {}
-export const HawaSearchBar: React.FunctionComponent<SearchBarTypes> = (
-  props
-) => {
+export const HawaSearchBar: FC<SearchBarTypes> = (props) => {
   return <HawaTextField type={"search"} {...props} />
 }

package/src/elements/HawaSelect.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React from "react"
+import { FC } from "react"
 import Select from "react-select"
 import CreatableSelect from "react-select/creatable"
 
@@ -12,7 +12,7 @@ type ControlTypes = {
   innerRef: any
   size?: "small" | "normal" | "large"
 }
-const Control: React.FunctionComponent<ControlTypes> = ({
+const Control: FC<ControlTypes> = ({
   cx,
   children,
   getStyles,
@@ -48,7 +48,7 @@ type MenuTypes = {
   innerProps: any
   innerRef: any
 }
-const Menu: React.FunctionComponent<MenuTypes> = ({
+const Menu: FC<MenuTypes> = ({
   cx,
   children,
   getStyles,
@@ -76,7 +76,7 @@ type OptionTypes = {
   innerRef: any
   size?: "small" | "normal" | "large"
 }
-const Option: React.FunctionComponent<OptionTypes> = ({
+const Option: FC<OptionTypes> = ({
   cx,
   children,
   getStyles,
@@ -114,7 +114,7 @@ type SelectTypes = {
   getOptionLabel?: any
   disabled?: boolean
 }
-export const HawaSelect: React.FunctionComponent<SelectTypes> = (props) => {
+export const HawaSelect: FC<SelectTypes> = (props) => {
   return (
     <div>
       {props.label && (

package/src/elements/HawaSettingsRow.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaTextField } from "./HawaTextField"
 import { HawaSwitch } from "./HawaSwitch"
 import { HawaColorPicker } from "./HawaColorPicker"
@@ -45,7 +45,7 @@ type SettingsRowTypes = {
   }
 }
 
-export const HawaSettingsRow: React.FunctionComponent<SettingsRowTypes> = ({
+export const HawaSettingsRow: FC<SettingsRowTypes> = ({
   settingsLabel,
   settingsType,
   settingsDescription,

package/src/elements/HawaSnackbar.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef, useState } from "react"
+import { FC, useEffect, useRef, useState } from "react"
 import clsx from "clsx"
 import { HawaButton } from "./HawaButton"
 
@@ -86,7 +86,7 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
           closed ? "opacity-0" : "opacity-100"
         )}
       >
-        <div className="w-full p-3  flex flex-col gap-2">
+        <div className="flex w-full  flex-col gap-2 p-3">
           <div className="text-sm font-bold">{title}</div>
           <div className="text-sm font-normal">{description}</div>
           {actions && (

package/src/elements/HawaSpinner.tsx

@@ -1,14 +1,11 @@
-import React from "react"
+import { FC } from "react"
 import clsx from "clsx"
 
 type SpinnerTypes = {
   size?: "button" | "sm" | "normal" | "lg" | "xl"
 }
 
-export const HawaSpinner: React.FunctionComponent<SpinnerTypes> = ({
-  size = "sm",
-  ...props
-}) => {
+export const HawaSpinner: FC<SpinnerTypes> = ({ size = "sm", ...props }) => {
   let sizeStyles = {
     button: "h-4 w-4",
     sm: "h-6 w-6",

package/src/elements/HawaStats.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import clsx from "clsx"
 import { HawaSpinner } from "./HawaSpinner"
 
@@ -12,7 +12,7 @@ type StatTypes = {
   isLoading?: boolean
   handleClick?: () => void
 }
-export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
+export const HawaStats: FC<StatTypes> = (props) => {
   let defaultStyle = "flex flex-col gap-1 rounded p-4 text-sm h-fit max-h-fit"
   let statStyles = {
     plain: "",

package/src/elements/HawaStepper.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import clsx from "clsx"
 import { FaCheck } from "react-icons/fa"
 
@@ -8,7 +8,7 @@ type THawaTimeline = {
   orientation: "vertical" | "horizontal"
 }
 
-export const HawaStepper: React.FunctionComponent<THawaTimeline> = ({
+export const HawaStepper: FC<THawaTimeline> = ({
   orientation = "horizontal",
   ...props
 }) => {

package/src/elements/HawaStoreButtons.tsx

@@ -1,12 +1,10 @@
-import React from "react"
+import { FC } from "react"
 
 type StoreButtonsTypes = {
   store: "apple" | "google"
   mode: "dark" | "light"
 }
-export const HawaStoreButtons: React.FunctionComponent<StoreButtonsTypes> = (
-  props
-) => {
+export const HawaStoreButtons: FC<StoreButtonsTypes> = (props) => {
   return (
     <div className="flex justify-center">
       <div>
@@ -77,7 +75,7 @@ export const HawaStoreButtons: React.FunctionComponent<StoreButtonsTypes> = (
             </div>
           </div>
         ) : (
-          <div className="mt-3 flex h-14 w-48 items-center justify-center rounded-lg bg-white border border-black text-black">
+          <div className="mt-3 flex h-14 w-48 items-center justify-center rounded-lg border border-black bg-white text-black">
             <div className="mr-3">
               <svg viewBox="30 336.7 120.9 129.2" width="30">
                 <path

package/src/elements/HawaSwitch.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import clsx from "clsx"
 
 type SwitchTypes = {
@@ -6,10 +6,7 @@ type SwitchTypes = {
   size?: "small" | "normal" | "large"
 }
 
-export const HawaSwitch: React.FunctionComponent<SwitchTypes> = ({
-  size = "normal",
-  ...props
-}) => {
+export const HawaSwitch: FC<SwitchTypes> = ({ size = "normal", ...props }) => {
   let sizeStyles = {
     small: "",
     normal:

package/src/elements/HawaTable.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import { useEffect, useState, FC } from "react"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
 import useTable from "../hooks/useTable"
@@ -43,7 +43,7 @@ type ActionItems = {
   element?: any
 }
 
-export const HawaTable: React.FunctionComponent<TableTypes> = ({
+export const HawaTable: FC<TableTypes> = ({
   size = "normal",
   bodyColor = "white",
   headerColor = "gray-200",
@@ -265,7 +265,9 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
                       ) : (
                         <div className="flex flex-row  items-center justify-center gap-2 p-1">
                           {props.actions[0].map((act) => (
-                            <div className=" p-1 hover:bg-gray-100 transition-all">{act.icon}</div>
+                            <div className=" p-1 transition-all hover:bg-gray-100">
+                              {act.icon}
+                            </div>
                           ))}
                         </div>
                       )

package/src/elements/HawaTabs.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useState } from "react"
+import { useState, FC } from "react"
 
 // TODO: fix wrapping issue when small screen
 
@@ -13,7 +13,7 @@ type TabsTypes = {
   width?: "full" | "normal"
   pill?: boolean
 }
-export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
+export const HawaTabs: FC<TabsTypes> = ({
   orientation = "horizontal",
   direction = "ltr",
   width = "normal",
@@ -115,8 +115,8 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
                 pill
                   ? "rounded"
                   : orientation === "vertical"
-                  ? "rounded rounded-tl-none rounded-bl-none"
-                  : "rounded rounded-br-none rounded-bl-none"
+                  ? "rounded rounded-bl-none rounded-tl-none"
+                  : "rounded rounded-bl-none rounded-br-none"
                 // direction === "rtl" ? "bg-yellow-400" : "bg-yellow-400"
               )}
             >

package/src/elements/HawaTextField.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC, PropsWithRef } from "react"
 import clsx from "clsx"
 
 // TODO: make icon based on direction
@@ -15,7 +15,7 @@ type TextFieldTypes = {
   helperText?: any
   /** The value of the input field */
   value?: any
-  props?: React.PropsWithRef<"input">
+  props?: PropsWithRef<"input">
   /** The type of input field. Same as the types of <input/> component   */
   type?: any
   /** The placeholder of the input field  */
@@ -31,7 +31,7 @@ type TextFieldTypes = {
   preview?: boolean
 }
 
-export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
+export const HawaTextField: FC<TextFieldTypes> = ({
   margin = "normal",
   width = "full",
   preview = false,
@@ -50,7 +50,7 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
 
   let defaultStyle = "flex max-h-fit flex-col justify-center"
   let defaultInputStyle =
-    "block w-full rounded outline outline-gray-300 bg-white p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+    "block w-full rounded outline outline-1 outline-gray-300 bg-white p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
   let previewInputStyle =
     "block w-full rounded bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
   // "mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2  text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",

package/src/elements/HawaTooltip.tsx

@@ -1,8 +1,8 @@
+import { useEffect, useRef, useState, ReactElement, FC } from "react"
 import clsx from "clsx"
-import React, { useEffect, useRef, useState } from "react"
 
 type THawaToolTip = {
-  children?: React.ReactElement
+  children?: ReactElement
   content?: string
   btnHovered?: any
   buttonRef?: any
@@ -19,7 +19,7 @@ type THawaToolTip = {
     | "bottom-left"
 }
 
-export const HawaTooltip: React.FunctionComponent<THawaToolTip> = ({
+export const HawaTooltip: FC<THawaToolTip> = ({
   children,
   content,
   size = "normal",

package/src/elements/HawaTypography.tsx

@@ -1,11 +1,9 @@
-import React from "react"
+import { FC } from "react"
 
 type TypographyTypes = {
   children: any
   align?: any
 }
-export const HawaTypography: React.FunctionComponent<TypographyTypes> = (
-  props
-) => {
+export const HawaTypography: FC<TypographyTypes> = (props) => {
   return <div>{props.children}</div>
 }

package/src/elements/InvoiceAccordion.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState, FC } from "react"
 import clsx from "clsx"
 import { HiChevronRight } from "react-icons/hi"
 import { BsThreeDotsVertical } from "react-icons/bs"
@@ -33,9 +33,7 @@ type InvoiceAccordionTypes = {
   direction?: "rtl" | "ltr"
   status?: "paid" | "pending" | "overdue"
 }
-export const InvoiceAccordion: React.FunctionComponent<
-  InvoiceAccordionTypes
-> = ({
+export const InvoiceAccordion: FC<InvoiceAccordionTypes> = ({
   direction = "ltr",
   texts = {
     total: "Total",

package/src/elements/SubsectionList.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useState } from "react"
+import { useState, FC } from "react"
 import { HawaChip } from "./HawaChip"
 
 type SubsectionListTypes = {
@@ -18,9 +18,7 @@ type SubsectionListTypes = {
     }
   ]
 }
-export const SubsectionList: React.FunctionComponent<SubsectionListTypes> = ({
-  subsections,
-}) => {
+export const SubsectionList: FC<SubsectionListTypes> = ({ subsections }) => {
   const [selectedSection, setSelectedSection] = useState(null)
   return (
     <div className="w-full max-w-2xs rounded bg-layoutPrimary-500 p-4 ">
@@ -52,7 +50,7 @@ type TSubsectionItem = {
   selected?: any
   onItemClick?: () => void
 }
-const SubsectionItem: React.FunctionComponent<TSubsectionItem> = ({
+const SubsectionItem: FC<TSubsectionItem> = ({
   title,
   value,
   icon,

package/src/elements/TabPanel.tsx

@@ -1,11 +1,11 @@
-import React from "react"
+import { FC } from "react"
 
 type TabPanelTypes = {
   children: any
   value: any
   index: any
 }
-export const TabPanel: React.FunctionComponent<TabPanelTypes> = (props) => {
+export const TabPanel: FC<TabPanelTypes> = (props) => {
   const { children, value, index, ...other } = props
   return (
     <div

package/src/elements/UsageCard.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaTooltip } from "./HawaTooltip"
 import { BsExclamationCircleFill } from "react-icons/bs"
 
@@ -8,7 +8,7 @@ type UsageCardTypes = {
   percent: any
   currentUsage: any
 }
-export const UsageCard: React.FunctionComponent<UsageCardTypes> = (props) => {
+export const UsageCard: FC<UsageCardTypes> = (props) => {
   return (
     <div className="flex w-full flex-col gap-0 border p-4">
       <div className="flex flex-row items-center gap-2">

package/src/elements/UserFeedback.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 
 type ComponentTypes = {
   title?: string
@@ -10,9 +10,7 @@ type ComponentTypes = {
   }
   onOptionClicked?: (option) => void
 }
-export const UserFeedback: React.FunctionComponent<ComponentTypes> = ({
-  ...props
-}) => {
+export const UserFeedback: FC<ComponentTypes> = ({ ...props }) => {
   return (
     <div className="relative flex w-full max-w-sm flex-col gap-2 rounded bg-white p-4 shadow-md">
       <div className="absolute left-2 top-2 p-1.5 text-sm">{props.title}</div>