@sikka/hawa 0.0.271 → 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.271",
+  "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/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/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 select-none 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>
       )}

package/src/elements/HawaLandingCard.tsx

@@ -14,9 +14,10 @@ type LandingCardTypes = {
     linkText?: string
   }
   buttonLink?: string
+  className?: any
 }
 export const HawaLandingCard: FC<LandingCardTypes> = ({
-  orientation,
+  orientation = "horizontal",
   ...props
 }) => {
   let cardStyles = {
@@ -36,12 +37,13 @@ export const HawaLandingCard: FC<LandingCardTypes> = ({
       className={clsx(
         cardStyles[orientation],
         "flex flex-col p-10",
-        "relative overflow-hidden"
+        "relative overflow-hidden",
+        props.className
       )}
       {...props}
     >
-      {props.texts.titleTip && (
-        <div className="text-sm text-red-600">{props.texts.titleTip}</div>
+      {props.texts?.titleTip && (
+        <div className="text-sm text-red-600">{props.texts?.titleTip}</div>
       )}
       {props.imageURL && (
         <img
@@ -50,15 +52,15 @@ export const HawaLandingCard: FC<LandingCardTypes> = ({
         />
       )}
 
-      {props.texts.title && (
-        <div className="mt-2 text-lg font-medium">{props.texts.title} </div>
+      {props.texts?.title && (
+        <div className="mt-2 text-lg font-medium">{props.texts?.title} </div>
       )}
-      {props.texts.description && (
-        <div className="z-10 mt-4 text-sm">{props.texts.description}</div>
+      {props.texts?.description && (
+        <div className="z-10 mt-4 text-sm">{props.texts?.description}</div>
       )}
-      {props.texts.linkText && (
+      {props.texts?.linkText && (
         <div className="z-10 mt-6 text-sm underline underline-offset-8">
-          {props.texts.linkText}
+          {props.texts?.linkText}
         </div>
       )}
     </div>

package/src/elements/HawaLoading.tsx

@@ -0,0 +1,83 @@
+import React, { FC } from "react"
+import clsx from "clsx"
+
+type LoadingTypes = {
+  size?: "button" | "sm" | "normal" | "lg" | "xl"
+  design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots"
+  color?: any
+}
+
+export const HawaLoading: FC<LoadingTypes> = ({
+  design = "spinner",
+  size = "sm",
+  color,
+  ...props
+}) => {
+  let sizeStyles = {
+    button: "h-4 w-4",
+    sm: "h-6 w-6",
+    normal: "h-8 w-8",
+    lg: "h-14 w-14",
+    xl: "h-24 w-24",
+  }
+
+  let animationStyles = {
+    pulse: "animate-in fade-in duration-1000",
+    bounce: "animate-bounce",
+  }
+  switch (design.split("-")[0]) {
+    case "dots":
+      return (
+        <div className="flex flex-row space-x-2 ">
+          <div
+            className={clsx(
+              "animate-bounce rounded-full delay-100 repeat-infinite",
+              size === "button" ? "h-2 w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+              color ? color : "bg-buttonPrimary-500"
+            )}
+          ></div>
+          <div
+            className={clsx(
+              "animate-bounce rounded-full delay-200 repeat-infinite",
+              size === "button" ? "h-2 w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+
+              color ? color : "bg-buttonPrimary-500"
+            )}
+          ></div>
+          <div
+            className={clsx(
+              "animate-bounce rounded-full delay-300 repeat-infinite",
+              size === "button" ? "h-2 w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+
+              color ? color : "bg-buttonPrimary-500"
+            )}
+          ></div>
+        </div>
+      )
+
+    default:
+      return (
+        <div className="flex flex-row gap-x-3">
+          <div aria-label="Loading..." role="status">
+            <svg
+              className={clsx(sizeStyles[size], "animate-spin")}
+              viewBox="3 3 18 18"
+            >
+              <path
+                className="fill-gray-200"
+                d="M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
+              ></path>
+              <path
+                // className="fill-buttonPrimary-500 "
+                className={color ? color : "fill-buttonPrimary-500"}
+                d="M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"
+              ></path>
+            </svg>
+          </div>
+        </div>
+      )
+  }
+}

package/src/elements/HawaPhoneInput.tsx

@@ -60,6 +60,7 @@ export const HawaPhoneInput: FC<HawaPhoneInputTypes> = (props) => {
               },
               lineHeight: "1.25rem",
               padding: "0.37rem",
+              paddingLeft: 0,
             }),
             singleValue: (base) => ({
               ...base,
@@ -84,6 +85,8 @@ export const HawaPhoneInput: FC<HawaPhoneInputTypes> = (props) => {
             DropdownIndicator: () => null,
             IndicatorSeparator: () => null,
           }}
+          // className="bg-red-500"
+
           options={Countries}
           isMulti={false}
           isSearchable={true}
@@ -96,7 +99,8 @@ export const HawaPhoneInput: FC<HawaPhoneInputTypes> = (props) => {
         <input
           onChange={props.handleChange}
           type="number"
-          className="block w-full appearance-none rounded rounded-l-none border border-l-0 border-gray-300 bg-gray-50 p-2.5 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"
+          placeholder="531045453"
+          className="block w-full appearance-none rounded rounded-l-none border border-l-0 border-gray-300 bg-gray-50 p-2.5 text-[0.875rem] 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"
         />
         {props.helperText && (
           <p className="mb-1 mt-1 text-xs text-red-600 dark:text-red-500">

package/src/elements/HawaRadio.tsx

@@ -4,16 +4,14 @@ import clsx from "clsx"
 type RadioTypes = {
   orientation?: "vertical" | "horizontal"
   design?: "default" | "tabs" | "cards" | "bordered"
-  options?: [
-    {
-      value: any
-      label: any
-      disabled?: any
-      sublabel?: any
-      beforeIcon?: any
-      afterIcon?: any
-    }
-  ]
+  options?: {
+    value: any
+    label: any
+    disabled?: any
+    sublabel?: any
+    icon?: any
+  }[]
+
   onChangeTab?: any
   defaultValue?: any
 }
@@ -59,7 +57,7 @@ export const HawaRadio: FC<RadioTypes> = ({
                       : inactiveTabStyle
                   )}
                 >
-                  {/* {opt.icon} */}
+                  {opt.icon && opt.icon}
                   {opt.label}
                 </button>
               </li>

package/src/elements/HawaStats.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react"
 import clsx from "clsx"
-import { HawaSpinner } from "./HawaSpinner"
-import { BsFilesAlt } from "react-icons/bs"
+import { HawaLoading } from "./HawaLoading"
+// import { BsFilesAlt } from "react-icons/bs"
 
 type StatTypes = {
   label?: string
@@ -60,7 +60,7 @@ export const HawaStats: FC<StatTypes> = ({ variant = "default", ...props }) => {
       {props.icon && <div className="mb-2">{props.icon} </div>}
       <div>{props.label}</div>
       {props.isLoading ? (
-        <HawaSpinner />
+        <HawaLoading />
       ) : (
         <div className="text-2xl font-bold">{props.number}</div>
       )}

package/src/elements/index.ts

@@ -23,7 +23,7 @@ export * from "./HawaCopyrights"
 export * from "./HawaStepper"
 export * from "./HawaStats"
 export * from "./HawaCodeBlock"
-export * from "./HawaSpinner"
+export * from "./HawaLoading"
 export * from "./HawaRadio"
 export * from "./HawaDatepicker"
 export * from "./DragDropImages"

package/src/layout/HawaGrid.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from "react"
+import clsx from "clsx"
+
+type GridTypes = {
+  children?: any
+}
+
+export const HawaGrid: FC<GridTypes> = (props) => {
+  return (
+    // [&>*:not(:first-child)]:mt-8
+    <div className=" columns-1 gap-5 sm:columns-2 sm:gap-8 md:columns-3 lg:columns-4 [&>*:not(:first-child)]:mt-8">
+      {props.children}
+    </div>
+  )
+}

package/src/layout/index.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"