@sikka/hawa 0.0.270 → 0.0.273

package/lib/layout/HawaGrid.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+type GridTypes = {
+    children?: any;
+};
+export declare const HawaGrid: FC<GridTypes>;
+export {};

package/lib/layout/index.d.ts

@@ -4,6 +4,7 @@ export * from "./HawaSiteLayout";
 export * from "./HawaAppLayout";
 export * from "./HawaAppLayoutSimplified";
 export * from "./HawaContainer";
+export * from "./HawaGrid";
 export * from "./AppSidebar";
 export * from "./Footer";
 export * from "./Banner";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.270",
+  "version": "0.0.273",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -78,6 +78,7 @@
     "rollup-plugin-swc": "^0.2.1",
     "rollup-plugin-typescript2": "^0.34.1",
     "tailwindcss": "^3.3.3",
+    "tailwindcss-animate": "^1.0.6",
     "tinycolor2": "^1.4.2",
     "tslib": "^2.4.1",
     "typescript": "^4.8.4",

package/src/blocks/Misc/EmptyState.tsx

@@ -27,7 +27,6 @@ export const EmptyState: FC<TEmptyState> = ({
             viewBox="0 0 512 512"
             height="0.35em"
             width="0.35em"
-            xmlns="http://www.w3.org/2000/svg"
           >
             <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
           </svg>{" "}

package/src/blocks/Misc/NoPermission.tsx

@@ -24,7 +24,6 @@ export const NoPermission: FC<TNoPermission> = ({
     viewBox="0 0 448 512"
     height="0.35em"
     width="0.35em"
-    xmlns="http://www.w3.org/2000/svg"
   >
     <path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
   </svg>        </div>

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -7,7 +7,6 @@ const CheckMark = () => (
     aria-hidden="true"
     fill="currentColor"
     viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
   >
     <path
       fillRule="evenodd"
@@ -23,7 +22,6 @@ const UncheckMark = () => (
     aria-hidden="true"
     fill="currentColor"
     viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
   >
     <path
       fillRule="evenodd"
@@ -137,7 +135,6 @@ export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
                         viewBox="0 0 16 16"
                         height="1em"
                         width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
                       >
                         <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
                       </svg>

package/src/blocks/Pricing/HorizontalPricing.tsx

@@ -0,0 +1,140 @@
+import React, { FC, useState } from "react"
+import { HawaRadio } from "../../elements"
+import clsx from "clsx"
+
+type HorizontalPricingTypes = {
+  plans: [
+    {
+      direction: "rtl" | "ltr"
+      features: [{ included: boolean; text: string }]
+      price: number
+      texts: {
+        title: string
+        subtitle: string
+        buttonText: string
+        cycleText: string
+        currencyText: string
+      }
+      size: "small" | "medium" | "large"
+    }
+  ]
+  currencies: [
+    {
+      label: string
+      value: string
+    }
+  ]
+  billingCycles: [
+    {
+      label: string
+      value: string
+    }
+  ]
+  onPlanClicked?: (e) => void
+  currentCycle: {
+    label: string
+    value: string
+  }
+  currentCurrency: {
+    label: string
+    value: string
+  }
+  onCycleChange?: (e) => void
+  onCurrencyChange?: (e) => void
+  direction?: "rtl" | "ltr"
+}
+export const HorizontalPricing: FC<HorizontalPricingTypes> = (props) => {
+  const [selectedCard, setSelectedCard] = useState(null)
+  let data = [
+    { title: "basic", price: "$49", cycle: "/mo" },
+    { title: "business", price: "$99", cycle: "/mo" },
+    { title: "enterprise", price: "$149", cycle: "/mo" },
+  ]
+  return (
+    <div className="z-10 w-full max-w-screen-sm">
+      <div className="max-w-2xl ">
+        <div className="flex flex-row justify-between">
+          <HawaRadio
+            design="tabs"
+            options={props.currencies}
+            defaultValue={props.currentCurrency}
+          />
+          <HawaRadio
+            design="tabs"
+            options={props.billingCycles}
+            defaultValue={props.currentCycle}
+          />
+        </div>
+        {data.map((d) => (
+          <label htmlFor={d.title} onClick={() => setSelectedCard(d.title)}>
+            <input
+              type="radio"
+              name="radio"
+              id={d.title}
+              className="peer appearance-none"
+            />
+            <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"
+              )}
+            >
+              <div className="peer flex items-center gap-4">
+                <CheckIcons />
+                <CardText
+                  title="Enterprise"
+                  subtitle="For startups and new businesses"
+                />
+              </div>
+
+              <CardPrice amount={d.price} cycle={d.cycle} />
+            </div>
+          </label>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const CheckIcons = () => (
+  <>
+    <svg
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      className="default h-8 w-8 text-neutral-500"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className="active hidden h-8 w-8 text-blue-500"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
+      />
+    </svg>
+  </>
+)
+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>
+)
+const CardPrice = (props) => (
+  <h2 className="peer text-xl font-semibold text-neutral-900 sm:text-2xl">
+    {props.amount}
+    <span className="text-base font-medium text-neutral-400">
+      {props.cycle}
+    </span>
+  </h2>
+)

package/src/blocks/Pricing/index.ts

@@ -1,2 +1,3 @@
 export * from "./PricingPlans";
 export * from "./ComparingPlans";
+export * from "./HorizontalPricing";

package/src/blocks/Referral/ReferralAccount.tsx

@@ -30,7 +30,6 @@ export const ReferralAccount: FC<ReferralAccount> = ({
                 viewBox="0 0 512 512"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"
               >
                 <path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path>
               </svg>{" "}
@@ -54,7 +53,6 @@ export const ReferralAccount: FC<ReferralAccount> = ({
                 viewBox="0 0 512 512"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"
               >
                 <path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path>
               </svg>{" "}

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -115,7 +115,6 @@ const SettlementAccountCard = (props) => (
           className="h-5 w-5"
           fill="currentColor"
           viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             fillRule="evenodd"

package/src/elements/ArrowCarousel.tsx

@@ -30,7 +30,6 @@ const Arrow = (props: {
       )}
       fill={props.disabled && "grey"}
       viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
     >
       <path
         fillRule="evenodd"

package/src/elements/BackToTop.tsx

@@ -117,7 +117,6 @@ export const BackToTop: FC<ComponentTypes> = ({ ...props }) => {
           "h-6 w-6 shrink-0 rotate-180 transition-all  disabled:bg-gray-200"
         )}
         viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
       >
         <path
           fillRule="evenodd"

package/src/elements/DragDropImages.tsx

@@ -159,7 +159,6 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
           className="h-5 w-5"
           fill="currentColor"
           viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             fillRule="evenodd"
@@ -214,7 +213,6 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
               stroke-linejoin="round"
               height="1.5em"
               width="1.5em"
-              xmlns="http://www.w3.org/2000/svg"
             >
               <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
               <path d="M19 11v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>

package/src/elements/DraggableCard.tsx

@@ -16,7 +16,6 @@ export const DraggableCard: FC<DraggableCardTypes> = (props) => {
           aria-hidden="true"
           fill="currentColor"
           viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
         >
           <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
         </svg>

package/src/elements/HawaAccordion.tsx

@@ -34,7 +34,6 @@ export const HawaAccordion: FC<AccordionTypes> = (props) => {
           }  shrink-0 transition-all`}
           fill="currentColor"
           viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             fillRule="evenodd"

package/src/elements/HawaAlert.tsx

@@ -180,7 +180,6 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
               className="h-5 w-5"
               fill="currentColor"
               viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 fillRule="evenodd"

package/src/elements/HawaButton.tsx

@@ -1,6 +1,6 @@
 import React, { FC, ButtonHTMLAttributes, useState } from "react"
 import clsx from "clsx"
-import { HawaSpinner } from "./HawaSpinner"
+import { HawaLoading } from "./HawaLoading"
 import { HawaTooltip } from "./HawaTooltip"
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -165,7 +165,7 @@ export const HawaButton: FC<ButtonProps> = ({
             onClick={props.onClick}
             // onClick={handleClick}
           >
-            {!isLoading ? children : <HawaSpinner size="button" />}
+            {!isLoading ? children : <HawaLoading size="button" />}
           </button>
         </HawaTooltip>
       ) : (
@@ -210,14 +210,18 @@ export const HawaButton: FC<ButtonProps> = ({
               {isClicked && feedback ? (
                 <div className="w-full  text-center">{buttonText}</div>
               ) : null}
-              <div className="flex w-full flex-row items-center justify-center gap-2 whitespace-nowrap">
+              <div className="flex w-full select-none flex-row items-center justify-center gap-2 whitespace-nowrap">
                 {props.startIcon && props.startIcon}
                 {children}
                 {props.endIcon && props.endIcon}
               </div>
             </div>
           ) : (
-            <HawaSpinner size="button" />
+            <HawaLoading
+              design="dots-pulse"
+              color={"bg-white"}
+              size="button"
+            />
           )}
         </button>
       )}
@@ -229,7 +233,7 @@ export const HawaButton: FC<ButtonProps> = ({
               : typeof badge === "string"
               ? "h-5 w-7"
               : "h-6 w-6",
-            "absolute -right-2 select-none -top-2 inline-flex  items-center justify-center rounded-full border-2 border-white bg-red-500 text-[9px] font-bold text-white dark:border-gray-900"
+            "absolute -right-2 -top-2 inline-flex select-none  items-center justify-center rounded-full border-2 border-white bg-red-500 text-[9px] font-bold text-white dark:border-gray-900"
           )}
         >
           {typeof badge === "number" && badge > 100 ? "+99" : badge}

package/src/elements/HawaCodeBlock.tsx

@@ -75,19 +75,11 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
       {fileName && (
         <div className="flex flex-row gap-2 rounded-t bg-gray-700  p-2 pb-0">
           <div
-          // className={clsx(
-          //   selectedTab === i
-          //     ? "border-buttonPrimary-400 border-b-2"
-          //     : "bg-transparent"
-          // )}
+            className={clsx(
+              "mb-1 w-full max-w-[52px] rounded-inner p-2 py-1 text-center text-[0.75rem]"
+            )}
           >
-            <div
-              className={clsx(
-                "mb-1 w-full max-w-[52px] rounded-inner p-2 py-1 text-center text-[0.75rem] "
-              )}
-            >
-              {fileName}
-            </div>
+            {fileName}
           </div>
         </div>
       )}
@@ -130,7 +122,6 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
                 stroke-linejoin="round"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"
               >
                 <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
                 <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
@@ -154,7 +145,6 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
             stroke-linejoin="round"
             height="1em"
             width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
             <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
             <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>

package/src/elements/HawaDropdownMenu.tsx

@@ -17,40 +17,85 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
   const [urlsChecked, setUrlsChecked] = React.useState(false)
   const [person, setPerson] = React.useState("pedro")
 
+  let dropdownData = {
+    items: [
+      {
+        label: "New Tab",
+        shortcut: "ctrl + T",
+        disabled: false,
+      },
+      {
+        label: "New Windows",
+        shortcut: "ctrl + N",
+        disabled: false,
+      },
+      {
+        label: "New Private Window",
+        shortcut: "⇧+ctrl+N",
+        disabled: true,
+      },
+    ],
+    checkboxes: [
+      {
+        label: "Show Bookmarks",
+        shortcut: "ctrl + B",
+        disabled: false,
+      },
+      {
+        label: "Show Something",
+        shortcut: "ctrl + C",
+        disabled: false,
+      },
+      {
+        label: "Show that",
+        shortcut: "ctrl + T",
+        disabled: false,
+      },
+    ],
+  }
   return (
     <DropdownMenu.Root dir={direction}>
       <DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>
 
       <DropdownMenu.Portal>
         <DropdownMenu.Content
-          className="min-w-[220px] rounded-md bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
+          className="min-w-[220px] rounded bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
           sideOffset={5}
         >
-          <DropdownMenu.Item className="group relative flex h-[25px] select-none items-center rounded-[3px] px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
-            New Tab{" "}
-            <div className="ml-auto pl-[20px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
-              ⌘+T
-            </div>
-          </DropdownMenu.Item>
-          <DropdownMenu.Item className="group relative flex h-[25px] select-none items-center rounded-[3px] px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
-            New Window{" "}
-            <div className="ml-auto pl-[20px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
-              ⌘+N
-            </div>
-          </DropdownMenu.Item>
-          <DropdownMenu.Item
-            className="group relative flex h-[25px] select-none items-center rounded-[3px] px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
-            disabled
-          >
-            New Private Window{" "}
-            <div className="ml-auto pl-[20px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
-              ⇧+⌘+N
-            </div>
-          </DropdownMenu.Item>
+          {dropdownData.items.map((it, i) => (
+            <DropdownMenu.Item
+              key={i}
+              className="group relative flex h-[25px] select-none items-center justify-between 
+         rounded-inner  px-[5px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8
+          data-[highlighted]:text-violet-1 "
+              //  ltr:pr-[25px] rtl:pl-[25px]
+              disabled={it.disabled}
+            >
+              {/* New Tab{" "} */}
+              {it.label}
+              <div className=" text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
+                {/* ml-auto pl-[20px] */}
+                {/* ⌘+T */}
+                {it.shortcut}
+              </div>
+            </DropdownMenu.Item>
+          ))}
+
           <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger className=" group relative flex h-[25px] select-none  items-center rounded-[3px] bg-red-500 px-[5px] ltr:pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[highlighted]:data-[state=open]:bg-violet-9 data-[state=open]:bg-violet-4 data-[disabled]:text-mauve-8 data-[highlighted]:data-[state=open]:text-violet-1 data-[highlighted]:text-violet-1 data-[state=open]:text-violet-11 ">
+            <DropdownMenu.SubTrigger
+              className=" group relative flex h-[25px] select-none  
+            items-center rounded-inner  justify-between flex-row
+            px-[5px] text-[13px] leading-none text-violet-11
+             outline-none data-[disabled]:pointer-events-none
+              data-[highlighted]:bg-violet-9 data-[highlighted]:data-[state=open]:bg-violet-9
+               data-[state=open]:bg-violet-4 data-[disabled]:text-mauve-8 data-[highlighted]:data-[state=open]:text-violet-1
+                data-[highlighted]:text-violet-1 data-[state=open]:text-violet-11 ltr:pl-[25px] rtl:pl-[0px]  "
+            >
               More Tools
-              <div className="ml-auto bg-blue-500  pl-[20px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white rtl:mr-auto rtl:rotate-180 rtl:pr-[0px]">
+              <div
+                className="ltr:ml-auto rtl:pr-[5px]  ltr:pl-[0px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white
+               rtl:mr-auto rtl:rotate-180 rtl:pl-[0px]"
+              >
                 {/* <ChevronRightIcon /> */}
                 <svg
                   aria-label="Chevron Right Icon"
@@ -70,24 +115,24 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
             </DropdownMenu.SubTrigger>
             <DropdownMenu.Portal>
               <DropdownMenu.SubContent
-                className="min-w-[220px] rounded-md bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
+                className="min-w-[220px] rounded-inner bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
                 sideOffset={2}
                 alignOffset={-5}
               >
-                <DropdownMenu.Item className="group relative flex h-[25px] select-none items-center rounded-[3px] px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
+                <DropdownMenu.Item className="group relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
                   Save Page As…{" "}
                   <div className="ml-auto pl-[20px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
                     ⌘+S
                   </div>
                 </DropdownMenu.Item>
-                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-[3px] px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
+                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
                   Create Shortcut…
                 </DropdownMenu.Item>
-                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-[3px] px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
+                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
                   Name Window…
                 </DropdownMenu.Item>
                 <DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
-                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-[3px] px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
+                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
                   Developer Tools
                 </DropdownMenu.Item>
               </DropdownMenu.SubContent>
@@ -96,32 +141,42 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
 
           <DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
 
+          {dropdownData.checkboxes.map((ch, i) => (
+            <DropdownMenu.CheckboxItem
+              key={i}
+              className="group relative flex h-[25px] select-none items-center
+             justify-between rounded-inner px-[5px] text-[13px] leading-none text-violet-11
+              outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8
+               data-[highlighted]:text-violet-1"
+              //  ltr:pl-[25px] rtl:pr-[25px]
+              checked={bookmarksChecked}
+              onCheckedChange={setBookmarksChecked}
+            >
+              <DropdownMenu.ItemIndicator className="absolute inline-flex w-[25px] items-center justify-center  ltr:left-0 rtl:right-0">
+                <svg
+                  aria-label="Check Mark"
+                  stroke="currentColor"
+                  fill="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 512 512"
+                  height="0.60em"
+                  width="0.60em"
+                >
+                  <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
+                </svg>{" "}
+              </DropdownMenu.ItemIndicator>
+              {/* Show Bookmarks{" "} */}
+              {ch.label}
+              <div className=" text-mauve-11  group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
+                {/* ml-auto pl-[20px] */}
+                {/* ⌘+B */}
+                {ch.shortcut}
+              </div>
+            </DropdownMenu.CheckboxItem>
+          ))}
+          {/*         
           <DropdownMenu.CheckboxItem
-            className="group relative flex h-[25px] select-none items-center rounded-[3px] px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
-            checked={bookmarksChecked}
-            onCheckedChange={setBookmarksChecked}
-          >
-            <DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
-              <svg
-                aria-label="Check Mark"
-                stroke="currentColor"
-                fill="currentColor"
-                stroke-width="0"
-                viewBox="0 0 512 512"
-                height="0.60em"
-                width="0.60em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
-              </svg>{" "}
-            </DropdownMenu.ItemIndicator>
-            Show Bookmarks{" "}
-            <div className="ml-auto pl-[20px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
-              ⌘+B
-            </div>
-          </DropdownMenu.CheckboxItem>
-          <DropdownMenu.CheckboxItem
-            className="relative flex h-[25px] select-none items-center rounded-[3px] px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
+            className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
             checked={urlsChecked}
             onCheckedChange={setUrlsChecked}
           >
@@ -134,13 +189,12 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
                 viewBox="0 0 512 512"
                 height="0.60em"
                 width="0.60em"
-                xmlns="http://www.w3.org/2000/svg"
               >
                 <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
               </svg>{" "}
             </DropdownMenu.ItemIndicator>
             Show Full URLs
-          </DropdownMenu.CheckboxItem>
+          </DropdownMenu.CheckboxItem> */}
 
           <DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
 
@@ -149,7 +203,7 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
           </DropdownMenu.Label>
           <DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
             <DropdownMenu.RadioItem
-              className="relative flex h-[25px] select-none items-center rounded-[3px] px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
+              className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
               value="pedro"
             >
               <DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
@@ -169,7 +223,7 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
               Pedro Duarte
             </DropdownMenu.RadioItem>
             <DropdownMenu.RadioItem
-              className="relative flex h-[25px] select-none items-center rounded-[3px] px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
+              className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
               value="colm"
             >
               <DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">