@sikka/hawa 0.1.91 → 0.1.93

package/src/elements/HawaRadio.tsx

@@ -1,5 +1,5 @@
 import React, { useState, FC, useRef, useEffect } from "react"
-import clsx from "clsx"
+import { cn } from "../util"
 
 type RadioTypes = {
   orientation?: "vertical" | "horizontal"
@@ -49,7 +49,7 @@ export const HawaRadio: FC<RadioTypes> = ({
       return (
         <ul
           ref={ref}
-          className={clsx(
+          className={cn(
             props.options?.length > 2
               ? "flex-wrap xs:max-w-full xs:flex-nowrap"
               : "",
@@ -65,7 +65,7 @@ export const HawaRadio: FC<RadioTypes> = ({
                 setSelectedOption(opt.value)
                 props.onChangeTab(opt.value)
               }}
-              className={clsx(
+              className={cn(
                 "w-full cursor-pointer",
                 orientation === "horizontal" &&
                   parentDirection === "ltr" &&
@@ -89,7 +89,7 @@ export const HawaRadio: FC<RadioTypes> = ({
       )
     case "bordered":
       return (
-        <div className={clsx(orientationStyle[orientation], "gap-4")}>
+        <div className={cn(orientationStyle[orientation], "gap-4")}>
           {props.options.map((opt, i) => (
             <div className="rounded border border-gray-200   ">
               <div
@@ -106,7 +106,7 @@ export const HawaRadio: FC<RadioTypes> = ({
                 />
                 <label
                   htmlFor={opt.value.toString()}
-                  className={clsx(
+                  className={cn(
                     "ml-2 w-full  p-4 pl-3  text-sm font-medium dark:text-white",
                     opt.disabled ? "opacity-50" : "cursor-pointer text-gray-900"
                   )}
@@ -120,7 +120,7 @@ export const HawaRadio: FC<RadioTypes> = ({
       )
     case "cards":
       return (
-        <ul className={clsx(orientationStyle[orientation], "gap-4")}>
+        <ul className={cn(orientationStyle[orientation], "gap-4")}>
           {props.options?.map((opt: any, o) => (
             <li>
               <input
@@ -134,11 +134,11 @@ export const HawaRadio: FC<RadioTypes> = ({
               />
               <label
                 htmlFor={opt.value.toString()}
-                className={clsx(
-                  "inline-flex h-full w-full  items-center justify-between rounded-lg border border-gray-200 bg-white p-5                    text-gray-500  peer-checked:border-blue-600 peer-checked:text-blue-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-blue-500",
+                className={cn(
+                  "inline-flex h-full w-full  items-center justify-between rounded-lg border border-gray-200 bg-white p-5                    text-gray-500  peer-checked:border-blue-600 peer-checked:text-blue-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400  dark:peer-checked:text-primary",
                   opt.disabled
                     ? "opacity-50"
-                    : "cursor-pointer hover:bg-gray-100 hover:text-gray-600"
+                    : "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-300 hover:text-gray-600"
                 )}
               >
                 <div className="block  h-full w-full">
@@ -169,10 +169,10 @@ export const HawaRadio: FC<RadioTypes> = ({
 
     default:
       return (
-        <div className={orientationStyle[orientation]}>
+        <div className={cn(orientationStyle[orientation], "gap-2")}>
           {props.options.map((opt, i) => (
             <div
-              className="radio-item radio-item-default mb-4 flex items-center transition-all"
+              className="radio-item radio-item-default  flex items-center transition-all"
               key={i + 1}
             >
               <input
@@ -185,8 +185,8 @@ export const HawaRadio: FC<RadioTypes> = ({
               />
               <label
                 htmlFor={opt.value.toString()}
-                className={clsx(
-                  "ml-2 text-sm font-medium dark:text-white",
+                className={cn(
+                  "text-sm font-medium dark:text-white",
                   opt.disabled
                     ? "text-gray-400"
                     : "cursor-pointer text-gray-900"

package/src/elements/HawaTextField.tsx

@@ -32,6 +32,7 @@ type TextFieldTypes = {
   preview?: boolean
   autoComplete?: any
   maxLength?: any
+  iconInside?: React.ReactNode
 }
 
 export const HawaTextField: FC<TextFieldTypes> = ({
@@ -79,12 +80,16 @@ export const HawaTextField: FC<TextFieldTypes> = ({
             className={cn(
               defaultInputStyle,
               props.icon && "pl-10",
-              preview && "border-transparent bg-transparent px-0" 
+              preview && "border-transparent bg-transparent px-0"
             )}
             disabled={preview}
           />
         </div>
-
+        {props.iconInside && (
+          <div className="absolute right-1 top-[41px]  -translate-y-1/2">
+            {props.iconInside}
+          </div>
+        )}
         {props.helpertext ? (
           <p className="mb-0 mt-1 text-xs text-red-600 dark:text-red-500">
             {props.helpertext}

package/src/elements/Icons.tsx

@@ -45,6 +45,25 @@ export const Icons = {
       <polyline points="22,6 12,13 2,6"></polyline>
     </svg>
   ),
+  phone: (props: IconProps) => (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
+      ></path>
+    </svg>
+  ),
   twitter: (props: IconProps) => (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
       <path
@@ -53,6 +72,11 @@ export const Icons = {
       />
     </svg>
   ),
+  microsoft: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" {...props}>
+      <path d="M7.462 0H0v7.19h7.462V0zM16 0H8.538v7.19H16V0zM7.462 8.211H0V16h7.462V8.211zm8.538 0H8.538V16H16V8.211z"></path>
+    </svg>
+  ),
   gitHub: (props: IconProps) => (
     <svg viewBox="0 0 438.549 438.549" {...props}>
       <path

package/src/elements/StickyFeatures.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+
+interface Feature {
+  icon: React.ReactNode
+  title: string
+  description: string
+}
+
+type StickyFeaturesType = {
+  features?: Feature[]
+  tag?: string
+  title?: string
+  description?: string
+}
+
+export const StickyFeatures: React.FC<StickyFeaturesType> = (props) => {
+  return (
+    <div className="bg-white py-24 sm:py-32">
+
+      <div className="mx-auto flex max-w-5xl flex-col items-start gap-10 px-6 md:flex-row lg:px-8">
+        <div className="w-full md:sticky md:top-10 md:w-[28rem]">
+          <h2 className="text-lg font-semibold leading-8 tracking-tight text-indigo-600">
+            {props.tag}
+          </h2>
+          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+            {props.title}
+          </p>
+          <p className="mb-2 mt-6 text-base leading-7 text-gray-600">
+            {props.description}
+          </p>
+        </div>
+        <div className="mt-5 w-full min-w-0 flex-1 md:mt-0">
+          <dl className="grid grid-cols-1 gap-x-8 gap-y-10 md:max-w-xl lg:max-w-none lg:gap-y-16">
+            {props.features.map((f) => (
+              <div className="relative rounded-lg bg-gray-50 p-10">
+                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
+                  {f.icon}
+                </div>
+
+                <dt className="mt-4 text-lg font-semibold leading-7 text-gray-900">
+                  {f.title}
+                </dt>
+                <dd className="mt-2 text-base leading-7 text-gray-600">
+                  {f.description}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/elements/Toaster.tsx

@@ -18,9 +18,7 @@ export function Toaster(props) {
       {toasts.map(function ({ id, title, description, action, ...toastProps }) {
         return (
           <Toast direction={props.direction} key={id} {...toastProps}>
-            <div
-              className={cn("grid gap-1", isRTL ? "text-right" : "text-left")}
-            >
+            <div className={"grid gap-1 text-start"}>
               {title && <ToastTitle>{title}</ToastTitle>}
               {description && (
                 <ToastDescription>{description}</ToastDescription>

package/src/elements/UserReferralSource.tsx

@@ -0,0 +1,101 @@
+import React, { FC, useEffect, useRef, useState } from "react"
+import clsx from "clsx"
+import { HawaButton } from "./HawaButton"
+import { Button } from "./Button"
+import { HawaRadio } from "./HawaRadio"
+import { Card, CardContent, CardHeader, CardTitle } from "./Card"
+import { HawaTextField } from "./HawaTextField"
+import { Textarea } from "./Textarea"
+
+type ComponentTypes = {
+  title?: string
+  question: string
+  options?: []
+  texts?: {
+    least: string
+    most: string
+  }
+  position?: "bottom-right" | "bottom-left"
+  onOptionClicked?: (option) => void
+}
+export const UserReferralSource: FC<ComponentTypes> = ({
+  position = "bottom-right",
+  ...props
+}) => {
+  const [closed, setClosed] = useState(false)
+  const [answered, setAnswered] = useState(false)
+  const [clickedOption, setClickedOption] = useState(null)
+  const [closingTimer, setClosingTimer] = useState(5)
+  const popUpRef = useRef(null)
+
+  const boxPosition = {
+    "bottom-right": "right-4",
+    "bottom-left": "left-4",
+  }
+  useEffect(() => {
+    //To change opacity and hide the component
+    const timeoutHide = setTimeout(() => {
+      if (closingTimer >= 0) {
+        setClosingTimer(closingTimer - 1)
+      }
+    }, 1000)
+
+    return () => {
+      clearTimeout(timeoutHide)
+    }
+  }, [closingTimer])
+
+  const slowClose = () => {
+    setClosed(true)
+    setTimeout(() => {
+      popUpRef.current.removeChild(popUpRef.current.children[0])
+    }, 200)
+  }
+  return (
+    <Card
+      ref={popUpRef}
+      className={clsx("fixed bottom-4 p-4 ", boxPosition[position])}
+    >
+      <button
+        type="button"
+        className="absolute right-2 top-2 inline-flex h-8 w-8 rounded p-1.5 text-gray-400 transition-all hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
+        data-dismiss-target="#toast-default"
+        aria-label="Close"
+        onClick={() => slowClose()}
+      >
+        <svg
+          aria-hidden="true"
+          className="h-5 w-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fillRule="evenodd"
+            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </button>
+      <CardContent headless>
+        <div
+          className={clsx(
+            "flex flex-col gap-4", // "relative flex w-full max-w-sm flex-col gap-2 rounded border bg-background p-4 shadow-md transition-all",
+            closed ? "opacity-0" : "opacity-100"
+          )}
+        >
+          <div className="mt-4 font-bold">{props.question}</div>
+          <div className="flex w-full flex-row gap-1 rounded ">
+            <HawaRadio
+              orientation="vertical"
+              options={props.options}
+            ></HawaRadio>
+          </div>
+          <div>
+            <Textarea />
+          </div>
+        </div>
+        <Button className="mt-4 w-full">Submit</Button>
+      </CardContent>
+    </Card>
+  )
+}

package/src/elements/index.ts

@@ -51,6 +51,8 @@ export * from "./HawaButton"
 export * from "./HawaStoreButtons"
 
 export * from "./ActionCard"
+export * from "./StickyFeatures"
+export * from "./UserReferralSource"
 
 // v0.1
 export * from "./Button"

package/src/styles.css

@@ -422,7 +422,7 @@ video {
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
-    --radius: 0.5rem;
+    --radius: 0rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
 
     --layout-primary-700: #b7aff7;
@@ -470,10 +470,11 @@ video {
     margin-right: 0.25em;
     width: 0.75em;
     vertical-align: middle;
-    color: var(--button-primary-500-hsl);
+    color: hsl(var(--primary));
+
   }
   .link {
-    color: var(--button-primary-500-hsl);
+    color: hsl(var(--primary));
   }
   .link:hover {
     text-decoration: underline;
@@ -531,10 +532,10 @@ video {
     height: 9px;
     position: absolute;
     top: 6px;
-    left: 11px;
+    left: 3px;
     content: " ";
     display: block;
-    background: var(--button-primary-500-hsl);
+    background: hsl(var(--primary));
   }
   .radio-item-bordered input[type="radio"]:checked + label:after {
     border-radius: 100%;
@@ -545,7 +546,7 @@ video {
     left: 23px;
     content: " ";
     display: block;
-    background: var(--button-primary-500-hsl);
+    background: hsl(var(--primary));
   }
   * {
   border-color: hsl(var(--border));
@@ -803,6 +804,9 @@ video {
 .right-0 {
   right: 0px;
 }
+.right-1 {
+  right: 0.25rem;
+}
 .right-2 {
   right: 0.5rem;
 }
@@ -848,6 +852,9 @@ video {
 .top-\[22px\] {
   top: 22px;
 }
+.top-\[41px\] {
+  top: 41px;
+}
 .top-\[50\%\] {
   top: 50%;
 }
@@ -905,6 +912,10 @@ video {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
 .my-0 {
   margin-top: 0px;
   margin-bottom: 0px;
@@ -1386,6 +1397,9 @@ video {
 .w-screen {
   width: 100vw;
 }
+.min-w-0 {
+  min-width: 0px;
+}
 .min-w-\[220px\] {
   min-width: 220px;
 }
@@ -1418,6 +1432,9 @@ video {
 .max-w-2xs {
   max-width: 250px;
 }
+.max-w-5xl {
+  max-width: 64rem;
+}
 .max-w-\[200px\] {
   max-width: 200px;
 }
@@ -1696,6 +1713,13 @@ video {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
 }
+.gap-x-8 {
+  -moz-column-gap: 2rem;
+       column-gap: 2rem;
+}
+.gap-y-10 {
+  row-gap: 2.5rem;
+}
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -2104,6 +2128,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
+.bg-indigo-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+}
 .bg-info {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--info) / var(--tw-bg-opacity));
@@ -2337,6 +2365,10 @@ video {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }
+.py-24 {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+}
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -2428,6 +2460,9 @@ video {
 .text-right {
   text-align: right;
 }
+.text-start {
+  text-align: start;
+}
 .align-middle {
   vertical-align: middle;
 }
@@ -2524,6 +2559,12 @@ video {
 .leading-4 {
   line-height: 1rem;
 }
+.leading-7 {
+  line-height: 1.75rem;
+}
+.leading-8 {
+  line-height: 2rem;
+}
 .leading-\[25px\] {
   line-height: 25px;
 }
@@ -2608,6 +2649,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(21 128 61 / var(--tw-text-opacity));
 }
+.text-indigo-600 {
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
 .text-info-foreground {
   --tw-text-opacity: 1;
   color: hsl(var(--info-foreground) / var(--tw-text-opacity));
@@ -2952,6 +2997,10 @@ video {
 .repeat-infinite {
   animation-iteration-count: infinite;
 }
+.shadow-color-primary {
+    --tw-shadow: 0.25rem 0.25rem hsl(var(--primary));
+    box-shadow: var(--tw-shadow);
+  }
 /* Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
     display: none;
@@ -3321,6 +3370,26 @@ body {
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
+.active\:translate-x-0:active {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.active\:translate-x-0\.5:active {
+  --tw-translate-x: 0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.active\:translate-y-0:active {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.active\:translate-y-0\.5:active {
+  --tw-translate-y: 0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.active\:shadow-color-primary-active:active {
+    --tw-shadow: 0.125rem 0.125rem hsl(var(--primary));
+    box-shadow: var(--tw-shadow);
+  }
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
@@ -3798,6 +3867,10 @@ body {
 :is(.dark .dark\:bg-background) {
   background-color: hsl(var(--background));
 }
+:is(.dark .dark\:bg-black) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
 :is(.dark .dark\:bg-blue-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
@@ -3993,9 +4066,8 @@ body {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
 }
-:is(.dark .peer:checked ~ .dark\:peer-checked\:text-blue-500) {
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
+:is(.dark .peer:checked ~ .dark\:peer-checked\:text-primary) {
+  color: hsl(var(--primary));
 }
 @media (min-width: 440px) {
 
@@ -4073,6 +4145,11 @@ body {
     padding: 5rem;
   }
 
+  .sm\:py-32 {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+
   .sm\:text-left {
     text-align: left;
   }
@@ -4082,6 +4159,11 @@ body {
     line-height: 2rem;
   }
 
+  .sm\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
   .sm\:text-base {
     font-size: 1rem;
     line-height: 1.5rem;
@@ -4108,6 +4190,14 @@ body {
 }
 @media (min-width: 768px) {
 
+  .md\:sticky {
+    position: sticky;
+  }
+
+  .md\:top-10 {
+    top: 2.5rem;
+  }
+
   .md\:mb-0 {
     margin-bottom: 0px;
   }
@@ -4128,6 +4218,10 @@ body {
     margin-right: 1rem;
   }
 
+  .md\:mt-0 {
+    margin-top: 0px;
+  }
+
   .md\:h-auto {
     height: auto;
   }
@@ -4136,6 +4230,10 @@ body {
     width: 12rem;
   }
 
+  .md\:w-\[28rem\] {
+    width: 28rem;
+  }
+
   .md\:w-full {
     width: 100%;
   }
@@ -4220,6 +4318,10 @@ body {
     max-width: 80rem;
   }
 
+  .lg\:max-w-none {
+    max-width: none;
+  }
+
   .lg\:columns-4 {
     -moz-columns: 4;
          columns: 4;
@@ -4232,6 +4334,15 @@ body {
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+
+  .lg\:gap-y-16 {
+    row-gap: 4rem;
+  }
+
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
 }
 @media (min-width: 1280px) {
 

package/src/tailwind.css

@@ -88,7 +88,7 @@
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
-    --radius: 0.5rem;
+    --radius: 0rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
 
     --layout-primary-700: #b7aff7;
@@ -138,10 +138,11 @@
     margin-right: 0.25em;
     width: 0.75em;
     vertical-align: middle;
-    color: var(--button-primary-500-hsl);
+    color: hsl(var(--primary));
+
   }
   .link {
-    color: var(--button-primary-500-hsl);
+    color: hsl(var(--primary));
   }
   .link:hover {
     text-decoration: underline;
@@ -199,10 +200,10 @@
     height: 9px;
     position: absolute;
     top: 6px;
-    left: 11px;
+    left: 3px;
     content: " ";
     display: block;
-    background: var(--button-primary-500-hsl);
+    background: hsl(var(--primary));
   }
   .radio-item-bordered input[type="radio"]:checked + label:after {
     border-radius: 100%;
@@ -213,7 +214,7 @@
     left: 23px;
     content: " ";
     display: block;
-    background: var(--button-primary-500-hsl);
+    background: hsl(var(--primary));
   }
 }
 @layer base {
@@ -234,6 +235,15 @@
   }
 }
 @layer utilities {
+  .shadow-color-primary {
+    --tw-shadow: 0.25rem 0.25rem hsl(var(--primary));
+    box-shadow: var(--tw-shadow);
+  }
+  .shadow-color-primary-active {
+    --tw-shadow: 0.125rem 0.125rem hsl(var(--primary));
+    box-shadow: var(--tw-shadow);
+  }
+
   /* Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {
     display: none;