@sikka/hawa 0.1.85 → 0.1.86

package/dist/styles.css

@@ -758,6 +758,9 @@ video {
 .bottom-14 {
   bottom: 3.5rem;
 }
+.bottom-2 {
+  bottom: 0.5rem;
+}
 .bottom-4 {
   bottom: 1rem;
 }
@@ -1180,6 +1183,9 @@ video {
 .h-\[32px\] {
   height: 32px;
 }
+.h-\[400px\] {
+  height: 400px;
+}
 .h-\[calc\(100\%-3\.5rem\)\] {
   height: calc(100% - 3.5rem);
 }
@@ -2247,6 +2253,12 @@ video {
   --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;
 }
@@ -2918,6 +2930,9 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
+.duration-500 {
+  transition-duration: 500ms;
+}
 .will-change-\[opacity\2c transform\] {
   will-change: opacity,transform;
 }
@@ -2968,6 +2983,9 @@ video {
 .duration-300 {
   animation-duration: 300ms;
 }
+.duration-500 {
+  animation-duration: 500ms;
+}
 .delay-100 {
   animation-delay: 100ms;
 }
@@ -3269,6 +3287,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);

package/package.json

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

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/index.ts

@@ -50,6 +50,8 @@ export * from "./HawaLandingCard"
 export * from "./HawaButton"
 export * from "./HawaStoreButtons"
 
+export * from "./ActionCard"
+
 // v0.1
 export * from "./Button"
 export * from "./Carousel"

package/src/styles.css

@@ -758,6 +758,9 @@ video {
 .bottom-14 {
   bottom: 3.5rem;
 }
+.bottom-2 {
+  bottom: 0.5rem;
+}
 .bottom-4 {
   bottom: 1rem;
 }
@@ -1180,6 +1183,9 @@ video {
 .h-\[32px\] {
   height: 32px;
 }
+.h-\[400px\] {
+  height: 400px;
+}
 .h-\[calc\(100\%-3\.5rem\)\] {
   height: calc(100% - 3.5rem);
 }
@@ -2247,6 +2253,12 @@ video {
   --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;
 }
@@ -2918,6 +2930,9 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
+.duration-500 {
+  transition-duration: 500ms;
+}
 .will-change-\[opacity\2c transform\] {
   will-change: opacity,transform;
 }
@@ -2968,6 +2983,9 @@ video {
 .duration-300 {
   animation-duration: 300ms;
 }
+.duration-500 {
+  animation-duration: 500ms;
+}
 .delay-100 {
   animation-delay: 100ms;
 }
@@ -3269,6 +3287,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);