@sikka/hawa 0.0.229 → 0.0.230

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.229",
+  "version": "0.0.230",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/ArrowCarousel.tsx

@@ -0,0 +1,86 @@
+import React from "react"
+
+import { FaArrowLeft, FaArrowRight } from "react-icons/fa"
+
+type Item = {
+  label?: string
+  icon?: JSX.Element
+}
+
+type ComponentTypes = {
+  items: Item[]
+  index?: number
+  arrowSize?: number
+  labelSize?: "small" | "medium" | "big"
+}
+
+const Arrow = (props: {
+  icon: any
+  size: number
+  onClick?: () => void
+  disabled?: boolean
+}) => {
+  return (
+    <props.icon
+      className={
+        props.disabled || false ? "text-gray-300" : "hover:text-gray-500"
+      }
+      size={props.size}
+      onClick={props.onClick || (() => {})}
+    />
+  )
+}
+
+export const ArrowCarousel: React.FunctionComponent<ComponentTypes> = (
+  props
+) => {
+  const [index, setIndex] = React.useState(props.index || 0)
+
+  React.useEffect(() => {
+    console.log(`INDEX CHANGED TO: ${index}`)
+  }, [index])
+
+  const sizes = {
+    small: ["", -8],
+    medium: ["2", -11],
+    big: ["3", -16],
+  }
+
+  return (
+    <div className="align-center box-boorder relative flex h-min w-min flex-row items-center justify-center rounded bg-white p-4 py-6 shadow-md">
+      <Arrow
+        icon={FaArrowLeft}
+        size={props.arrowSize || 48}
+        disabled={index == 0}
+        onClick={() => {
+          if (index != 0) setIndex(index - 1)
+        }}
+      />
+
+      <div
+        className={`relative box-border flex h-min flex-col items-center justify-center p-5`}
+      >
+        <div>{props.items[index].icon}</div>
+        <div
+          className={`absolute bottom-0 text-${
+            sizes[props.labelSize || "small"][0]
+          }xl `}
+          style={{
+            marginBottom: sizes[props.labelSize || "small"][1],
+          }}
+        >
+          {props.items[index].label}
+        </div>
+      </div>
+
+      <Arrow
+        icon={FaArrowRight}
+        size={props.arrowSize || 48}
+        disabled={index == props.items.length - 1}
+        onClick={() => {
+          if (index != props.items.length - 1) setIndex(index + 1)
+        }}
+      />
+    </div>
+  )
+}

package/src/elements/index.ts

@@ -31,6 +31,7 @@ export * from "./UsageCard"
 export * from "./InvoiceAccordion"
 export * from "./HawaDatepicker"
 export * from "./UserFeedback"
+export * from "./ArrowCarousel"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"

package/src/styles.css

@@ -798,6 +798,9 @@ video {
 .mt-8 {
   margin-top: 2rem;
 }
+.box-border {
+  box-sizing: border-box;
+}
 .block {
   display: block;
 }
@@ -901,6 +904,10 @@ video {
 .h-full {
   height: 100%;
 }
+.h-min {
+  height: -moz-min-content;
+  height: min-content;
+}
 .h-screen {
   height: 100vh;
 }
@@ -996,6 +1003,10 @@ video {
 .w-full {
   width: 100%;
 }
+.w-min {
+  width: -moz-min-content;
+  width: min-content;
+}
 .min-w-\[24px\] {
   min-width: 24px;
 }
@@ -1687,6 +1698,10 @@ video {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
 }
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -2178,6 +2193,11 @@ body {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.hover\:text-gray-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));