@sikka/hawa 0.1.86 → 0.1.88

package/dist/styles.css

@@ -1078,9 +1078,6 @@ video {
 .hidden {
   display: none;
 }
-.aspect-\[2\/3\] {
-  aspect-ratio: 2/3;
-}
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
@@ -1099,12 +1096,12 @@ video {
 .h-11 {
   height: 2.75rem;
 }
-.h-12 {
-  height: 3rem;
-}
 .h-14 {
   height: 3.5rem;
 }
+.h-16 {
+  height: 4rem;
+}
 .h-2 {
   height: 0.5rem;
 }
@@ -1234,6 +1231,9 @@ video {
 .min-h-\[80px\] {
   min-height: 80px;
 }
+.min-h-screen {
+  min-height: 100vh;
+}
 .w-0 {
   width: 0px;
 }
@@ -1258,6 +1258,9 @@ video {
 .w-14 {
   width: 3.5rem;
 }
+.w-16 {
+  width: 4rem;
+}
 .w-2 {
   width: 0.5rem;
 }
@@ -1315,6 +1318,9 @@ video {
 .w-\[1\.2rem\] {
   width: 1.2rem;
 }
+.w-\[1000px\] {
+  width: 1000px;
+}
 .w-\[12px\] {
   width: 12px;
 }
@@ -1351,15 +1357,9 @@ video {
 .w-\[42px\] {
   width: 42px;
 }
-.w-\[500px\] {
-  width: 500px;
-}
 .w-\[64px\] {
   width: 64px;
 }
-.w-\[90\%\] {
-  width: 90%;
-}
 .w-\[calc\(1\%\)\] {
   width: calc(1%);
 }
@@ -1582,19 +1582,6 @@ video {
 .snap-x {
   scroll-snap-type: x var(--tw-scroll-snap-strictness);
 }
-.snap-mandatory {
-  --tw-scroll-snap-strictness: mandatory;
-}
-.snap-start {
-  scroll-snap-align: start;
-}
-.snap-always {
-  scroll-snap-stop: always;
-}
-.scroll-px-10 {
-  scroll-padding-left: 2.5rem;
-  scroll-padding-right: 2.5rem;
-}
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -1775,15 +1762,9 @@ video {
 .overflow-y-clip {
   overflow-y: clip;
 }
-.overflow-x-scroll {
-  overflow-x: scroll;
-}
 .overflow-y-scroll {
   overflow-y: scroll;
 }
-.scroll-smooth {
-  scroll-behavior: smooth;
-}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2033,10 +2014,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
-.bg-blue-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
 .bg-blue-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(147 197 253 / var(--tw-bg-opacity));
@@ -2123,10 +2100,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
 }
-.bg-green-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
-}
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -2144,10 +2117,6 @@ video {
 .bg-muted {
   background-color: hsl(var(--muted));
 }
-.bg-orange-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
-}
 .bg-orange-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(251 146 60 / var(--tw-bg-opacity));
@@ -2194,10 +2163,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(127 29 29 / var(--tw-bg-opacity));
 }
-.bg-rose-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 228 230 / var(--tw-bg-opacity));
-}
 .bg-secondary {
   background-color: hsl(var(--secondary));
 }
@@ -2242,17 +2207,9 @@ video {
 .bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
 .bg-none {
   background-image: none;
 }
-.from-black {
-  --tw-gradient-from: #000 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .bg-cover {
   background-size: cover;
 }
@@ -2728,9 +2685,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.text-white\/50 {
-  color: rgb(255 255 255 / 0.5);
-}
 .text-yellow-700 {
   --tw-text-opacity: 1;
   color: rgb(161 98 7 / var(--tw-text-opacity));
@@ -4071,10 +4025,6 @@ body {
     display: flex;
   }
 
-  .sm\:w-\[44\%\] {
-    width: 44%;
-  }
-
   .sm\:columns-2 {
     -moz-columns: 2;
          columns: 2;
@@ -4186,10 +4136,6 @@ body {
     width: 12rem;
   }
 
-  .md\:w-\[30\%\] {
-    width: 30%;
-  }
-
   .md\:w-full {
     width: 100%;
   }
@@ -4219,6 +4165,10 @@ body {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.86",
+  "version": "0.1.88",
   "description": "Modern UI Kit made with Tailwind & Radix Primitives",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/blocks/AuthForms/AppLanding.tsx

@@ -9,11 +9,15 @@ type AppLandingTypes = {
   handleSignUp: () => void
   handleLanguage: () => void
   handleColorMode: () => void
-  texts: {
+  texts?: {
     signIn: string
     signUp: string
     lang: string
+    newUserText?: string
+    createAccount?: string
   }
+  withoutSignUp?: boolean
+  handleRouteToSignUp?: () => void
   size: "small" | "normal" | "full"
 }
 
@@ -67,12 +71,18 @@ export const AppLanding: FC<AppLandingTypes> = (props) => {
           {props.handleSignUp && (
             <Button onClick={props.handleSignUp}>{props.texts.signUp}</Button>
           )} */}
-          <a href="#" className="text-center text-sm">
-            Don't have an account?{" "}
-            <a href="#" className="clickable-link">
-              Sign Up
-            </a>
-          </a>
+          {!props.withoutSignUp && (
+            <div className="p-3 text-center text-sm font-normal dark:text-gray-300">
+              {props.texts.newUserText}{" "}
+              <span
+                onClick={props.handleRouteToSignUp}
+                className="clickable-link"
+              >
+                {props.texts.createAccount}
+              </span>
+            </div>
+          )}
+         
         </CardContent>
       </Card>
       <div className="mt-6 flex flex-row justify-between">

package/src/blocks/AuthForms/CheckEmail.tsx

@@ -0,0 +1,54 @@
+import React, { useState, FC } from "react"
+import { HawaAlert, HawaPinInput } from "../../elements"
+import { Card, CardContent, CardFooter } from "../../elements/Card"
+import { Button } from "../../elements/Button"
+
+type CheckEmailBlocks = {
+  texts?: {
+    checkEmail: string
+    resendEmail: string
+    pleaseVerify: string
+  }
+  handleResend?: () => void
+}
+
+export const CheckEmail: FC<CheckEmailBlocks> = ({ texts, handleResend }) => {
+  return (
+    <Card>
+      <CardContent headless>
+        <div className="flex flex-col items-center justify-center text-center">
+          <div className="flex h-16 w-16 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold  text-primary-foreground">
+            <svg
+              stroke="currentColor"
+              fill="none"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              height="0.5em"
+              width="0.5em"
+              xmlns="http://www.w3.org/2000/svg"
+              // {...props}
+            >
+              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+              <polyline points="22,6 12,13 2,6"></polyline>
+            </svg>
+          </div>
+          <div className="m-2 text-xl font-bold">
+            {texts?.checkEmail ?? "Check you email"}
+          </div>
+
+          <div className="text-sm">
+            {texts?.pleaseVerify ??
+              "Thank you for signing up! To complete your registration, we've sent a verification email to the address you provided. Please check your inbox and follow the instructions in the email to activate your account."}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-col justify-center ">
+        <span className="clickable-link text-sm" onClick={handleResend}>
+          {texts?.resendEmail ?? "Resend Email"}
+        </span>
+      </CardFooter>
+    </Card>
+  )
+}

package/src/blocks/AuthForms/SignInForm.tsx

@@ -135,7 +135,7 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
               {props.texts.signInText}
             </Button>
             {!props.withoutSignUp && (
-              <div className="p-3 text-center text-sm font-semibold dark:text-gray-300">
+              <div className="p-3 text-center text-sm font-normal dark:text-gray-300">
                 {props.texts.newUserText}{" "}
                 <span
                   onClick={props.handleRouteToSignUp}

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -295,7 +295,7 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
                 </Button>
               </form>
             </FormProvider>
-            <div className="flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-semibold dark:text-white">
+            <div className="flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-normal dark:text-white">
               <span>{props.texts.existingUserText}</span>
               <span
                 onClick={props.handleRouteToSignIn}

package/src/blocks/AuthForms/index.ts

@@ -6,3 +6,4 @@ export * from "./SignUpForm"
 export * from "./NewPasswordForm"
 export * from "./ResetPasswordForm"
 export * from "./CodeConfirmation"
+export * from "./CheckEmail"

package/src/blocks/Misc/NoPermission.tsx

@@ -2,17 +2,13 @@ import React, { FC } from "react"
 import { Card, CardContent } from "../../elements/Card"
 
 type TNoPermission = {
-  variant?: "outlined" | "contained" | "neobrutalism"
   texts?: {
     title: string
     subtitle: string
   }
 }
 
-export const NoPermission: FC<TNoPermission> = ({
-  variant = "contained",
-  texts,
-}) => {
+export const NoPermission: FC<TNoPermission> = ({ texts }) => {
   return (
     <Card>
       <CardContent headless>

package/src/blocks/Payment/CreditCardForm.tsx

@@ -28,30 +28,30 @@ export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
               render={({ field }) => (
                 <HawaTextField
                   width="full"
-                  name="password"
-                  placeholder="Enter password"
-                  type="tel"
+                  name="cardNumber"
+                  placeholder="1234 1234 1234 1234"
+                  type="number"
                   label="Card Number"
                   helpertext={errors.password?.message}
                 />
               )}
               rules={{
-                required: "Password is rquired",
+                required: "Card Number is rquired",
               }}
             />
             <div className="w-1/4">
               <Controller
                 control={control}
-                name="cardName"
+                name="cardCVC"
                 render={({ field }) => (
                   <HawaTextField
                     width="full"
-                    name="password"
+                    name="cardCVC"
                     maxLength="3"
                     autoComplete="cc-number"
-                    placeholder=""
-                    type="password"
-                    label="CCV"
+                    placeholder="CVC"
+                    type="number"
+                    label="CVC"
                     helpertext={errors.password?.message}
                   />
                 )}
@@ -61,16 +61,17 @@ export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
               />
             </div>
           </div>
+
           <Controller
             control={control}
-            name="cardName"
+            name="cardExpiry"
             render={({ field }) => (
               <HawaTextField
                 width="full"
-                name="password"
-                placeholder="Enter password"
-                type="text"
-                label="Name On Card"
+                name="cardExpiry"
+                placeholder="MM / YY"
+                type="password"
+                label="Expiry Date"
                 helpertext={errors.password?.message}
               />
             )}
@@ -84,15 +85,15 @@ export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
             render={({ field }) => (
               <HawaTextField
                 width="full"
-                name="password"
-                placeholder="Enter password"
-                type="password"
-                label="Expiry Date"
+                name="cardName"
+                // placeholder="Enter password"
+                type="text"
+                label="Name on card"
                 helpertext={errors.password?.message}
               />
             )}
             rules={{
-              required: "Password is rquired",
+              required: "Card holder name is rquired",
             }}
           />
         </CardContent>

package/src/elements/Carousel.tsx

@@ -6,7 +6,7 @@ interface CarouselProps {
 }
 
 export const Carousel: React.FC<CarouselProps> = ({ images }) => {
-  const imageWidth = 240 + 16 // Adjust according to your image width
+  const imageWidth = 1000 + 16 // Adjust according to your image width
   const {
     containerRef,
     handleMouseDown,
@@ -17,7 +17,7 @@ export const Carousel: React.FC<CarouselProps> = ({ images }) => {
 
   return (
     <div
-      className="flex cursor-pointer snap-x  gap-4 overflow-x-scroll"
+      className="flex cursor-pointer snap-x  gap-4 overflow-x-hidden justify-center items-center"
       onMouseDown={handleMouseDown}
       onMouseLeave={handleMouseLeave}
       onMouseUp={handleMouseUp}
@@ -25,10 +25,12 @@ export const Carousel: React.FC<CarouselProps> = ({ images }) => {
       ref={containerRef}
     >
       {images.map((image, index) => (
-        <div key={index} className="h-40 w-60 flex-shrink-0">
+        <div key={index} className="w-[1000px] h-96 flex-shrink-0">
+          {/* <div key={index} className="h-40 w-60 flex-shrink-0"> */}
           <img
             src={image}
             alt={`Carousel Image ${index}`}
+            width={imageWidth}
             className="h-full w-full rounded-lg object-cover"
           />
         </div>
@@ -37,155 +39,3 @@ export const Carousel: React.FC<CarouselProps> = ({ images }) => {
   )
 }
 
-// import React, { FC, useEffect, useRef } from "react"
-// import clsx from "clsx"
-
-// type CarouselTypes = {
-//   /** The text inside the chip */
-//   label: string
-//   /** The small icon before the chip label  */
-//   icon?: JSX.Element
-//   /** The color of the chip, must be a tailwind color */
-//   color?: string
-//   /** The size of the chip */
-//   size?: "small" | "normal" | "large"
-//   /** Enable/Disable the dot before the label of the chip */
-//   dot?: boolean
-//   /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */
-//   dotType?: "available" | "unavailable"
-// }
-
-// export const Carousel: FC<CarouselTypes> = (props) => {
-//   const scrollContainer = useRef(null)
-
-//   useEffect(() => {
-//     let isDown = false
-//     let startX
-//     let scrollLeft
-
-//     const onMouseDown = (e) => {
-//       isDown = true
-//       startX = e.pageX
-//       scrollLeft = scrollContainer.current.scrollLeft
-//     }
-
-//     const onMouseLeave = () => {
-//       isDown = false
-//     }
-
-//     const onMouseUp = () => {
-//       isDown = false
-//     }
-
-//     const onMouseMove = (e) => {
-//       if (!isDown) return
-//       e.preventDefault()
-//       const x = e.pageX
-//       const walk = x - startX
-//       scrollContainer.current.scrollLeft = scrollLeft - walk
-//     }
-
-//     const container = scrollContainer.current
-//     container.addEventListener("mousedown", onMouseDown)
-//     container.addEventListener("mouseleave", onMouseLeave)
-//     container.addEventListener("mouseup", onMouseUp)
-//     container.addEventListener("mousemove", onMouseMove)
-
-//     return () => {
-//       container.removeEventListener("mousedown", onMouseDown)
-//       container.removeEventListener("mouseleave", onMouseLeave)
-//       container.removeEventListener("mouseup", onMouseUp)
-//       container.removeEventListener("mousemove", onMouseMove)
-//     }
-//   }, [])
-//   return (
-//     <div className="relative flex flex-col items-center justify-center overflow-hidden bg-gray-50">
-//       <div className="w-[500px]">
-//         <div
-//           ref={scrollContainer}
-//           className="scrollbar-hide mt-14 flex w-full snap-x snap-mandatory scroll-px-10 gap-10 overflow-x-scroll scroll-smooth px-10"
-//         >
-//           <div className="md:2/3 relative aspect-[2/3] w-[90%] shrink-0 snap-start snap-always rounded-xl bg-orange-100 sm:w-[44%] md:w-[30%]">
-//             <div className="absolute bottom-0 z-10 w-full rounded-xl bg-gradient-to-t from-black px-5 py-3">
-//               <h2 className="mt-4 text-xl font-bold text-white">Cangu</h2>
-//               <p className="text-sm text-white/50">Indonesia</p>
-//             </div>
-//             <img
-//               src="https://source.unsplash.com/9bp48ITvd00"
-//               alt="image"
-//               className="h-full w-full rounded-xl object-cover"
-//             />
-//           </div>
-
-//           <div className="md:2/3 relative aspect-[2/3] w-[90%] shrink-0 snap-start snap-always rounded-xl bg-orange-100 sm:w-[44%] md:w-[30%]">
-//             <div className="absolute bottom-0 z-10 w-full rounded-xl bg-gradient-to-t from-black px-5 py-3">
-//               <h2 className="mt-4 text-xl font-bold text-white">New York</h2>
-//               <p className="text-sm text-white/50">United States</p>
-//             </div>
-//             <img
-//               src="https://source.unsplash.com/4HG5hlhmZg8"
-//               className="h-full w-full rounded-xl object-cover"
-//             />
-//           </div>
-
-//           <div className="md:2/3 relative aspect-[2/3] w-[90%] shrink-0 snap-start snap-always rounded-xl bg-blue-100 sm:w-[44%] md:w-[30%]">
-//             <div className="absolute bottom-0 z-10 w-full rounded-xl bg-gradient-to-t from-black px-5 py-3">
-//               <h2 className="mt-4 text-xl font-bold text-white">London</h2>
-//               <p className="text-sm text-white/50">United Kingdom</p>
-//             </div>
-//             <img
-//               src="https://source.unsplash.com/oBmlsTW2pHY"
-//               className="h-full w-full rounded-xl object-cover"
-//             />
-//           </div>
-
-//           <div className="md:2/3 relative aspect-[2/3] w-[90%] shrink-0 snap-start snap-always rounded-xl bg-green-100 sm:w-[44%] md:w-[30%]">
-//             <div className="absolute bottom-0 z-10 w-full rounded-xl bg-gradient-to-t from-black px-5 py-3">
-//               <h2 className="mt-4 text-xl font-bold text-white">Bali</h2>
-//               <p className="text-sm text-white/50">Indonesia</p>
-//             </div>
-//             <img
-//               src="https://source.unsplash.com/1kdIG_258bU"
-//               className="h-full w-full rounded-xl object-cover"
-//             />
-//           </div>
-
-//           <div className="md:2/3 relative aspect-[2/3] w-[90%] shrink-0 snap-start snap-always rounded-xl bg-rose-100 sm:w-[44%] md:w-[30%]">
-//             <div className="absolute bottom-0 z-10 w-full rounded-xl bg-gradient-to-t from-black px-5 py-3">
-//               <h2 className="mt-4 text-xl font-bold text-white">
-//                 Times Square
-//               </h2>
-//               <p className="text-sm text-white/50">Singapore</p>
-//             </div>
-//             <img
-//               src="https://source.unsplash.com/l8vKWxhVuts"
-//               className="h-full w-full rounded-xl object-cover"
-//             />
-//           </div>
-
-//           <div className="md:2/3 relative aspect-[2/3] w-[90%] shrink-0 snap-start snap-always rounded-xl bg-yellow-100 sm:w-[44%] md:w-[30%]">
-//             <div className="absolute bottom-0 z-10 w-full rounded-xl bg-gradient-to-t from-black px-5 py-3">
-//               <h2 className="mt-4 text-xl font-bold text-white">Bangkok</h2>
-//               <p className="text-sm text-white/50">Thailand</p>
-//             </div>
-//             <img
-//               src="https://source.unsplash.com/0LGDmbnk0-U"
-//               className="h-full w-full rounded-xl object-cover"
-//             />
-//           </div>
-
-//           <div className="md:2/3 relative aspect-[2/3] w-[90%] shrink-0 snap-start snap-always rounded-xl bg-red-100 sm:w-[44%] md:w-[30%]">
-//             <div className="absolute bottom-0 z-10 w-full rounded-xl bg-gradient-to-t from-black px-5 py-3">
-//               <h2 className="mt-4 text-xl font-bold text-white">Latina</h2>
-//               <p className="text-sm text-white/50">South America</p>
-//             </div>
-//             <img
-//               src="https://source.unsplash.com/tVqQSfXQ_SI"
-//               className="h-full w-full rounded-xl object-cover"
-//             />
-//           </div>
-//         </div>
-//       </div>
-//     </div>
-//   )
-// }

package/src/elements/DropdownMenu.tsx

@@ -89,6 +89,7 @@ const DropdownMenuItem = React.forwardRef<
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
+    disabled={props.disabled}
     ref={ref}
     className={cn(
       "relative flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -238,6 +239,7 @@ export type SubItem = {
   icon?: any
   action?: () => void
   highlighted?: boolean
+  disabled?: boolean
 }
 
 export type MenuItemType = {
@@ -249,6 +251,7 @@ export type MenuItemType = {
   action?: () => void
   highlighted?: boolean
   subitems?: SubItem[] // Note the use of the optional modifier
+  disabled?: boolean
 }
 interface DropdownMenuProps {
   trigger?: any
@@ -306,6 +309,7 @@ export const DropdownMenu: React.FC<DropdownMenuProps> = ({
                   <DropdownMenuSubContent>
                     {item.subitems.map((subitem, subIndex) => (
                       <DropdownMenuItem
+                        disabled={subitem.disabled}
                         className="flex flex-row gap-2"
                         onSelect={() => subitem.action()}
                         key={subIndex}
@@ -319,6 +323,7 @@ export const DropdownMenu: React.FC<DropdownMenuProps> = ({
               </DropdownMenuSub>
             ) : (
               <DropdownMenuItem
+                disabled={item.disabled}
                 className="flex flex-row gap-2"
                 key={index}
                 onSelect={(e) => {