@sikka/hawa 0.1.86 → 0.1.87

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,9 +1096,6 @@ video {
 .h-11 {
   height: 2.75rem;
 }
-.h-12 {
-  height: 3rem;
-}
 .h-14 {
   height: 3.5rem;
 }
@@ -1234,6 +1228,9 @@ video {
 .min-h-\[80px\] {
   min-height: 80px;
 }
+.min-h-screen {
+  min-height: 100vh;
+}
 .w-0 {
   width: 0px;
 }
@@ -1315,6 +1312,9 @@ video {
 .w-\[1\.2rem\] {
   width: 1.2rem;
 }
+.w-\[1000px\] {
+  width: 1000px;
+}
 .w-\[12px\] {
   width: 12px;
 }
@@ -1351,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%);
 }
@@ -1582,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;
@@ -1775,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;
@@ -2033,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));
@@ -2123,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));
@@ -2144,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));
@@ -2194,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));
 }
@@ -2242,17 +2201,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 +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));
@@ -4071,10 +4019,6 @@ body {
     display: flex;
   }
 
-  .sm\:w-\[44\%\] {
-    width: 44%;
-  }
-
   .sm\:columns-2 {
     -moz-columns: 2;
          columns: 2;
@@ -4186,10 +4130,6 @@ body {
     width: 12rem;
   }
 
-  .md\:w-\[30\%\] {
-    width: 30%;
-  }
-
   .md\:w-full {
     width: 100%;
   }
@@ -4219,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.86",
+  "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/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) => {

package/src/layout/Footer.tsx

@@ -1,9 +1,13 @@
 import { BsInstagram, BsTwitter } from "react-icons/bs"
 import { FaSnapchatGhost, FaTiktok } from "react-icons/fa"
+import { Button } from "../elements"
+import { cn } from "../util"
 
 type FooterTypes = {
   logoText?: string
   logoURL?: string
+  copyRights?: string
+  variation?: "default" | "minimal"
   socialLinks?: {
     twitter?: string
     instagram?: string
@@ -19,12 +23,45 @@ type FooterTypes = {
   }[]
 }
 
-export const Footer: React.FunctionComponent<FooterTypes> = ({ ...props }) => {
+export const Footer: React.FunctionComponent<FooterTypes> = ({
+  variation = "default",
+  ...props
+}) => {
+  let variationStyles = {
+    default: "rounded border",
+    minimal: "border-t",
+  }
   return (
-    <div className="sticky  bottom-0 left-0 flex w-full flex-row gap-8  bg-blue-200 p-4">
-      {props.logoText && (
-        <div>
-          <div className="text-2xl font-bold">{props.logoText}</div>
+    <div
+      className={cn(
+        "flex w-full flex-row items-center justify-between gap-8  rounded bg-background p-4",
+        variationStyles[variation]
+      )}
+    >
+      <div className="flex flex-col items-center gap-2">
+        <div className="flex flex-row items-center gap-2">
+          {props.logoURL && (
+            <div>
+              <img className="h-8" src={props.logoURL} />
+            </div>
+          )}
+          {props.logoText && (
+            <div>
+              <div className="text-2xl font-bold text-primary">
+                {props.logoText}
+              </div>
+            </div>
+          )}
+        </div>
+        {props.copyRights && props.footerLinks && (
+          <div className="text-xs text-muted-foreground">
+            © {props.copyRights} {new Date().getFullYear()}
+          </div>
+        )}
+      </div>
+      {props.copyRights && !props.footerLinks && (
+        <div className="text-xs text-muted-foreground">
+          © {props.copyRights} {new Date().getFullYear()}
         </div>
       )}
       {props.footerLinks?.map((pagesSection) => (
@@ -45,24 +82,24 @@ export const Footer: React.FunctionComponent<FooterTypes> = ({ ...props }) => {
       {props.socialLinks && (
         <div className="flex flex-row gap-2">
           {props.socialLinks.twitter && (
-            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
+            <Button size="smallIcon" variant="ghost">
               <BsTwitter />
-            </div>
+            </Button>
           )}
           {props.socialLinks.instagram && (
-            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
+            <Button size="smallIcon" variant="ghost">
               <BsInstagram />
-            </div>
+            </Button>
           )}
           {props.socialLinks.tiktok && (
-            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
+            <Button size="smallIcon" variant="ghost">
               <FaTiktok />
-            </div>
+            </Button>
           )}
           {props.socialLinks.snapchat && (
-            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
+            <Button size="smallIcon" variant="ghost">
               <FaSnapchatGhost />
-            </div>
+            </Button>
           )}
         </div>
       )}