@sikka/hawa 0.1.85 → 0.1.87

package/dist/styles.css

@@ -758,6 +758,9 @@ video {
 .bottom-14 {
   bottom: 3.5rem;
 }
+.bottom-2 {
+  bottom: 0.5rem;
+}
 .bottom-4 {
   bottom: 1rem;
 }
@@ -1075,9 +1078,6 @@ video {
 .hidden {
   display: none;
 }
-.aspect-\[2\/3\] {
-  aspect-ratio: 2/3;
-}
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
@@ -1096,9 +1096,6 @@ video {
 .h-11 {
   height: 2.75rem;
 }
-.h-12 {
-  height: 3rem;
-}
 .h-14 {
   height: 3.5rem;
 }
@@ -1180,6 +1177,9 @@ video {
 .h-\[32px\] {
   height: 32px;
 }
+.h-\[400px\] {
+  height: 400px;
+}
 .h-\[calc\(100\%-3\.5rem\)\] {
   height: calc(100% - 3.5rem);
 }
@@ -1228,6 +1228,9 @@ video {
 .min-h-\[80px\] {
   min-height: 80px;
 }
+.min-h-screen {
+  min-height: 100vh;
+}
 .w-0 {
   width: 0px;
 }
@@ -1309,6 +1312,9 @@ video {
 .w-\[1\.2rem\] {
   width: 1.2rem;
 }
+.w-\[1000px\] {
+  width: 1000px;
+}
 .w-\[12px\] {
   width: 12px;
 }
@@ -1345,15 +1351,9 @@ video {
 .w-\[42px\] {
   width: 42px;
 }
-.w-\[500px\] {
-  width: 500px;
-}
 .w-\[64px\] {
   width: 64px;
 }
-.w-\[90\%\] {
-  width: 90%;
-}
 .w-\[calc\(1\%\)\] {
   width: calc(1%);
 }
@@ -1576,19 +1576,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;
@@ -1769,15 +1756,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;
@@ -2027,10 +2008,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));
@@ -2117,10 +2094,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));
@@ -2138,10 +2111,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));
@@ -2188,10 +2157,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));
 }
@@ -2236,16 +2201,14 @@ 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;
+}
+.bg-center {
+  background-position: center;
 }
 .fill-current {
   fill: currentColor;
@@ -2716,9 +2679,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));
@@ -2918,6 +2878,9 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
+.duration-500 {
+  transition-duration: 500ms;
+}
 .will-change-\[opacity\2c transform\] {
   will-change: opacity,transform;
 }
@@ -2968,6 +2931,9 @@ video {
 .duration-300 {
   animation-duration: 300ms;
 }
+.duration-500 {
+  animation-duration: 500ms;
+}
 .delay-100 {
   animation-delay: 100ms;
 }
@@ -3269,6 +3235,10 @@ body {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.hover\:drop-shadow-2xl:hover {
+  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .hover\:drop-shadow-lg:hover {
   --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -4049,10 +4019,6 @@ body {
     display: flex;
   }
 
-  .sm\:w-\[44\%\] {
-    width: 44%;
-  }
-
   .sm\:columns-2 {
     -moz-columns: 2;
          columns: 2;
@@ -4164,10 +4130,6 @@ body {
     width: 12rem;
   }
 
-  .md\:w-\[30\%\] {
-    width: 30%;
-  }
-
   .md\:w-full {
     width: 100%;
   }
@@ -4197,6 +4159,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.85",
+  "version": "0.1.87",
   "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/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/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/ActionCard.tsx

@@ -0,0 +1,64 @@
+import React, { FC, useState } from "react"
+import { Button } from "./Button"
+
+type ImageCardTypes = {
+  children: any
+  align?: any
+  bottomElement?: any
+  inCardActions?: any
+  cardImage?: string
+  title?: string
+  subtitle?: string
+  blank?: boolean
+}
+export const ActionCard: FC<ImageCardTypes> = (props) => {
+  const [hovered, setHovered] = useState(false)
+
+  return (
+    <div className="flex h-full w-full flex-col gap-1 ">
+      <div
+        className="group relative h-full w-full rounded border bg-background bg-cover bg-center transition-all duration-500 hover:drop-shadow-2xl"
+        style={{
+          backgroundImage: `url(${props.blank ? "" : props.cardImage})`,
+        }}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      >
+        {props.blank ? (
+          <div className="flex h-full flex-col items-center justify-center ">
+            <svg
+              className="h-10 w-10 text-foreground"
+              stroke="currentColor"
+              fill="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              height="1em"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"></path>
+            </svg>
+          </div>
+        ) : (
+          <div className="absolute inset-0 rounded bg-black opacity-50"></div>
+        )}
+        <div className="absolute bottom-2 right-2 z-10 opacity-0 transition-all duration-200 group-hover:opacity-100">
+          {props.inCardActions}
+        </div>
+        {!props.blank && (
+          <div className="relative p-4">
+            <h1 className="text-white">{props.title}</h1>
+            <p className="text-white">{props.subtitle}</p>
+          </div>
+        )}
+      </div>
+      <div
+        className={`flex flex-row justify-between text-sm transition-all duration-200 ${
+          hovered ? "opacity-100" : "opacity-0"
+        }`}
+      >
+        {props.bottomElement}
+      </div>
+    </div>
+  )
+}

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>
-//   )
-// }