@sikka/hawa 0.1.6-next → 0.1.7-beta

package/dist/index.css

@@ -437,28 +437,6 @@ video {
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
   }
-  .link::after {
-    content: url("data:image/svg+xml,%3Csvg stroke='%234c37eb' fill='none' stroke-width='2' viewBox='0 0 24 24' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'%3E%3C/path%3E%3C/svg%3E");
-    display: inline-block;
-    margin-left: 0.25em;
-    margin-right: 0.25em;
-    width: 0.75em;
-    vertical-align: middle;
-    color: hsl(var(--primary));
-  }
-  .link {
-    color: hsl(var(--primary));
-  }
-  .link:hover {
-    text-decoration: underline;
-    color: var(--button-primary-700);
-  }
-
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
   * {
   border-color: hsl(var(--border));
 }
@@ -567,9 +545,37 @@ video {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
-/* .bordered {
-    @apply hawa-border-border hawa-border-solid;
-  } */
+.link::after {
+    content: url("data:image/svg+xml,%3Csvg stroke='%234c37eb' fill='none' stroke-width='2' viewBox='0 0 24 24' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'%3E%3C/path%3E%3C/svg%3E");
+    display: inline-block;
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+    width: 0.75em;
+    vertical-align: middle;
+    color: hsl(var(--primary));
+  }
+.link {
+    color: hsl(var(--primary));
+  }
+.link:hover {
+    text-decoration: underline;
+    color: var(--button-primary-700);
+  }
+.inline-code {
+    font-size: 0.75rem;
+    width: -moz-fit-content;
+    width: fit-content;
+    border-radius: var(--radius);
+    padding: 0.25rem 0.375rem;
+    border: #d1d5db 1px solid;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      Liberation Mono, Courier New, monospace;
+  }
+input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 .clickable-link {
   cursor: pointer;
   color: hsl(var(--primary) / 0.8);
@@ -596,12 +602,30 @@ video {
   white-space: nowrap;
   border-width: 0;
 }
+.hawa-absolute {
+  position: absolute;
+}
 .hawa-relative {
   position: relative;
 }
+.hawa-inset-0 {
+  inset: 0px;
+}
+.hawa-bottom-2 {
+  bottom: 0.5rem;
+}
+.hawa-right-2 {
+  right: 0.5rem;
+}
+.hawa-z-10 {
+  z-index: 10;
+}
 .hawa-m-0 {
   margin: 0px;
 }
+.hawa-mb-4 {
+  margin-bottom: 1rem;
+}
 .hawa-ml-2 {
   margin-left: 0.5rem;
 }
@@ -614,6 +638,9 @@ video {
 .hawa-inline-flex {
   display: inline-flex;
 }
+.hawa-h-1 {
+  height: 0.25rem;
+}
 .hawa-h-10 {
   height: 2.5rem;
 }
@@ -623,12 +650,27 @@ video {
 .hawa-h-14 {
   height: 3.5rem;
 }
+.hawa-h-2 {
+  height: 0.5rem;
+}
+.hawa-h-24 {
+  height: 6rem;
+}
 .hawa-h-4 {
   height: 1rem;
 }
+.hawa-h-6 {
+  height: 1.5rem;
+}
+.hawa-h-64 {
+  height: 16rem;
+}
 .hawa-h-7 {
   height: 1.75rem;
 }
+.hawa-h-8 {
+  height: 2rem;
+}
 .hawa-h-9 {
   height: 2.25rem;
 }
@@ -636,18 +678,33 @@ video {
   height: -moz-fit-content;
   height: fit-content;
 }
+.hawa-h-full {
+  height: 100%;
+}
 .hawa-min-h-screen {
   min-height: 100vh;
 }
+.hawa-w-1 {
+  width: 0.25rem;
+}
 .hawa-w-10 {
   width: 2.5rem;
 }
+.hawa-w-14 {
+  width: 3.5rem;
+}
+.hawa-w-2 {
+  width: 0.5rem;
+}
 .hawa-w-24 {
   width: 6rem;
 }
 .hawa-w-4 {
   width: 1rem;
 }
+.hawa-w-6 {
+  width: 1.5rem;
+}
 .hawa-w-7 {
   width: 1.75rem;
 }
@@ -673,6 +730,30 @@ video {
 .hawa-flex-1 {
   flex: 1 1 0%;
 }
+@keyframes hawa-bounce {
+
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+.hawa-animate-bounce {
+  animation: hawa-bounce 1s infinite;
+}
+@keyframes hawa-spin {
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+.hawa-animate-spin {
+  animation: hawa-spin 1s linear infinite;
+}
 .hawa-cursor-pointer {
   cursor: pointer;
 }
@@ -699,15 +780,33 @@ video {
 .hawa-justify-between {
   justify-content: space-between;
 }
+.hawa-gap-1 {
+  gap: 0.25rem;
+}
 .hawa-gap-2 {
   gap: 0.5rem;
 }
 .hawa-gap-4 {
   gap: 1rem;
 }
+.hawa-gap-6 {
+  gap: 1.5rem;
+}
+.hawa-gap-x-3 {
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+}
+.hawa-divide-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
+}
 .hawa-rounded {
   border-radius: var(--radius);
 }
+.hawa-rounded-full {
+  border-radius: 9999px;
+}
 .hawa-rounded-md {
   border-radius: calc(var(--radius) - 2px);
 }
@@ -732,6 +831,10 @@ video {
 .hawa-bg-background {
   background-color: hsl(var(--background));
 }
+.hawa-bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
 .hawa-bg-destructive {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--destructive) / var(--tw-bg-opacity));
@@ -748,6 +851,18 @@ video {
 .hawa-bg-secondary {
   background-color: hsl(var(--secondary));
 }
+.hawa-bg-cover {
+  background-size: cover;
+}
+.hawa-bg-center {
+  background-position: center;
+}
+.hawa-fill-primary {
+  fill: hsl(var(--primary));
+}
+.hawa-fill-primary\/20 {
+  fill: hsl(var(--primary) / 0.2);
+}
 .hawa-p-0 {
   padding: 0px;
 }
@@ -831,9 +946,19 @@ video {
 .hawa-text-secondary-foreground {
   color: hsl(var(--secondary-foreground));
 }
+.hawa-text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .hawa-underline-offset-4 {
   text-underline-offset: 4px;
 }
+.hawa-opacity-0 {
+  opacity: 0;
+}
+.hawa-opacity-100 {
+  opacity: 1;
+}
 .hawa-opacity-50 {
   opacity: 0.5;
 }
@@ -850,6 +975,24 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.hawa-delay-100 {
+  transition-delay: 100ms;
+}
+.hawa-delay-200 {
+  transition-delay: 200ms;
+}
+.hawa-delay-300 {
+  transition-delay: 300ms;
+}
+.hawa-duration-1000 {
+  transition-duration: 1000ms;
+}
+.hawa-duration-200 {
+  transition-duration: 200ms;
+}
+.hawa-duration-500 {
+  transition-duration: 500ms;
+}
 @keyframes enter {
 
   from {
@@ -864,6 +1007,39 @@ video {
     transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
   }
 }
+.hawa-animate-in {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+.hawa-fade-in {
+  --tw-enter-opacity: 0;
+}
+.hawa-duration-1000 {
+  animation-duration: 1000ms;
+}
+.hawa-duration-200 {
+  animation-duration: 200ms;
+}
+.hawa-duration-500 {
+  animation-duration: 500ms;
+}
+.hawa-delay-100 {
+  animation-delay: 100ms;
+}
+.hawa-delay-200 {
+  animation-delay: 200ms;
+}
+.hawa-delay-300 {
+  animation-delay: 300ms;
+}
+.hawa-repeat-infinite {
+  animation-iteration-count: infinite;
+}
 body {
   font-family: "IBM Plex Sans Arabic", sans-serif;
 }
@@ -888,6 +1064,10 @@ body {
 .hover\:hawa-underline:hover {
   text-decoration-line: underline;
 }
+.hover\:hawa-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);
+}
 .focus-visible\:hawa-outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -925,6 +1105,9 @@ body {
 .disabled\:hawa-opacity-50:disabled {
   opacity: 0.5;
 }
+.hawa-group:hover .group-hover\:hawa-opacity-100 {
+  opacity: 1;
+}
 :is(.hawa-dark .dark\:hawa-bg-black) {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
+import { FC } from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
@@ -12,4 +13,35 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-export { Button, ButtonProps, buttonVariants };
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    clickable?: boolean;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<{
+    headless?: boolean | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+type ImageCardTypes = {
+    children: any;
+    align?: any;
+    bottomElement?: any;
+    inCardActions?: any;
+    cardImage?: string;
+    title?: string;
+    subtitle?: string;
+    blank?: boolean;
+};
+declare const ActionCard: FC<ImageCardTypes>;
+
+type LoadingTypes = {
+    size?: "button" | "xs" | "sm" | "normal" | "lg" | "xl";
+    design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots";
+    color?: any;
+};
+declare const Loading: FC<LoadingTypes>;
+
+export { ActionCard, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Loading, buttonVariants };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
+import { FC } from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
@@ -12,4 +13,35 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-export { Button, ButtonProps, buttonVariants };
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    clickable?: boolean;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<{
+    headless?: boolean | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+type ImageCardTypes = {
+    children: any;
+    align?: any;
+    bottomElement?: any;
+    inCardActions?: any;
+    cardImage?: string;
+    title?: string;
+    subtitle?: string;
+    blank?: boolean;
+};
+declare const ActionCard: FC<ImageCardTypes>;
+
+type LoadingTypes = {
+    size?: "button" | "xs" | "sm" | "normal" | "lg" | "xl";
+    design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots";
+    color?: any;
+};
+declare const Loading: FC<LoadingTypes>;
+
+export { ActionCard, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Loading, buttonVariants };

package/dist/index.js

@@ -1,4 +1,12 @@
 "use strict";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -12,6 +20,33 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -54,6 +89,17 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -115,9 +161,33 @@ var __toCommonJS = function(mod) {
 // components/index.tsx
 var components_exports = {};
 __export(components_exports, {
+    ActionCard: function() {
+        return ActionCard;
+    },
     Button: function() {
         return Button;
     },
+    Card: function() {
+        return Card;
+    },
+    CardContent: function() {
+        return CardContent;
+    },
+    CardDescription: function() {
+        return CardDescription;
+    },
+    CardFooter: function() {
+        return CardFooter;
+    },
+    CardHeader: function() {
+        return CardHeader;
+    },
+    CardTitle: function() {
+        return CardTitle;
+    },
+    Loading: function() {
+        return Loading;
+    },
     buttonVariants: function() {
         return buttonVariants;
     }
@@ -145,42 +215,42 @@ var Loading = function(_param) {
         "color"
     ]);
     var sizeStyles = {
-        button: "h-4 w-4",
-        xs: "h-1 w-1",
-        sm: "h-6 w-6",
-        normal: "h-8 w-8",
-        lg: "h-14 w-14",
-        xl: "h-24 w-24"
+        button: "hawa-h-4 hawa-w-4",
+        xs: "hawa-h-1 hawa-w-1",
+        sm: "hawa-h-6 hawa-w-6",
+        normal: "hawa-h-8 hawa-w-8",
+        lg: "hawa-h-14 hawa-w-14",
+        xl: "hawa-h-24 hawa-w-24"
     };
     var animationStyles = {
-        pulse: "animate-in fade-in duration-1000",
-        bounce: "animate-bounce"
+        pulse: "hawa-animate-in hawa-fade-in hawa-duration-1000",
+        bounce: "hawa-animate-bounce"
     };
     switch(design.split("-")[0]){
         case "dots":
             return /* @__PURE__ */ import_react.default.createElement("div", {
-                className: "flex flex-row gap-2"
+                className: "hawa-flex hawa-flex-row hawa-gap-2"
             }, /* @__PURE__ */ import_react.default.createElement("div", {
-                className: (0, import_clsx2.default)("animate-bounce rounded-full delay-100 repeat-infinite", size === "button" ? "h-2 w-2" : sizeStyles[size], animationStyles[design.split("-")[1]], color ? color : "bg-primary")
+                className: (0, import_clsx2.default)("hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite", size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size], animationStyles[design.split("-")[1]], color ? color : "hawa-bg-primary")
             }), /* @__PURE__ */ import_react.default.createElement("div", {
-                className: (0, import_clsx2.default)("animate-bounce rounded-full delay-200 repeat-infinite", size === "button" ? "h-2 w-2" : sizeStyles[size], animationStyles[design.split("-")[1]], color ? color : "bg-primary")
+                className: (0, import_clsx2.default)("hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite", size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size], animationStyles[design.split("-")[1]], color ? color : "hawa-bg-primary")
             }), /* @__PURE__ */ import_react.default.createElement("div", {
-                className: (0, import_clsx2.default)("animate-bounce rounded-full delay-300 repeat-infinite", size === "button" ? "h-2 w-2" : sizeStyles[size], animationStyles[design.split("-")[1]], color ? color : "bg-primary")
+                className: (0, import_clsx2.default)("hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite", size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size], animationStyles[design.split("-")[1]], color ? color : "hawa-bg-primary")
             }));
         default:
             return /* @__PURE__ */ import_react.default.createElement("div", {
-                className: "flex flex-row gap-x-3"
+                className: "hawa-flex hawa-flex-row hawa-gap-x-3"
             }, /* @__PURE__ */ import_react.default.createElement("div", {
                 "aria-label": "Loading...",
                 role: "status"
             }, /* @__PURE__ */ import_react.default.createElement("svg", {
-                className: (0, import_clsx2.default)(sizeStyles[size], "animate-spin"),
+                className: (0, import_clsx2.default)(sizeStyles[size], "hawa-animate-spin"),
                 viewBox: "3 3 18 18"
             }, /* @__PURE__ */ import_react.default.createElement("path", {
-                className: "fill-primary/20",
+                className: "hawa-fill-primary/20",
                 d: "M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
             }), /* @__PURE__ */ import_react.default.createElement("path", {
-                className: color ? color : "fill-primary",
+                className: color ? color : "hawa-fill-primary",
                 d: "M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"
             }))));
     }
@@ -239,8 +309,124 @@ var Button = React2.forwardRef(function(_param, ref) {
     }) : children);
 });
 Button.displayName = "Button";
+// components/elements/Card.tsx
+var React3 = __toESM(require("react"));
+var Card = React3.forwardRef(function(_param, ref) /* @__PURE__ */ {
+    var className = _param.className, _param_clickable = _param.clickable, clickable = _param_clickable === void 0 ? false : _param_clickable, props = _object_without_properties(_param, [
+        "className",
+        "clickable"
+    ]);
+    return React3.createElement("div", _object_spread({
+        ref: ref,
+        className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", clickable && "cursor-pointer transition-all hover:drop-shadow-md dark:hover:shadow-dark", className)
+    }, props));
+});
+Card.displayName = "Card";
+var CardHeader = React3.forwardRef(function(_param, ref) /* @__PURE__ */ {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return React3.createElement("div", _object_spread({
+        ref: ref,
+        className: cn("flex flex-col space-y-1.5 p-6", className)
+    }, props));
+});
+CardHeader.displayName = "CardHeader";
+var CardTitle = React3.forwardRef(function(_param, ref) /* @__PURE__ */ {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return React3.createElement("h3", _object_spread({
+        ref: ref,
+        className: cn("text-2xl font-semibold leading-none tracking-tight", className)
+    }, props));
+});
+CardTitle.displayName = "CardTitle";
+var CardDescription = React3.forwardRef(function(_param, ref) /* @__PURE__ */ {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return React3.createElement("p", _object_spread({
+        ref: ref,
+        className: cn("text-sm text-muted-foreground", className)
+    }, props));
+});
+CardDescription.displayName = "CardDescription";
+var CardContent = React3.forwardRef(function(_param, ref) /* @__PURE__ */ {
+    var headless = _param.headless, className = _param.className, props = _object_without_properties(_param, [
+        "headless",
+        "className"
+    ]);
+    return React3.createElement("div", _object_spread({
+        ref: ref,
+        className: cn("p-6", headless ? "pt-6" : "pt-0", className)
+    }, props));
+});
+CardContent.displayName = "CardContent";
+var CardFooter = React3.forwardRef(function(_param, ref) /* @__PURE__ */ {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return React3.createElement("div", _object_spread({
+        ref: ref,
+        className: cn("flex items-center p-6 pt-0", className)
+    }, props));
+});
+CardFooter.displayName = "CardFooter";
+// components/elements/ActionCard.tsx
+var import_react2 = __toESM(require("react"));
+var ActionCard = function(props) {
+    var _ref = _sliced_to_array((0, import_react2.useState)(false), 2), hovered = _ref[0], setHovered = _ref[1];
+    return /* @__PURE__ */ import_react2.default.createElement("div", {
+        className: "hawa-flex hawa-h-full hawa-w-full hawa-flex-col hawa-gap-1"
+    }, /* @__PURE__ */ import_react2.default.createElement("div", {
+        className: "hawa-group hawa-relative hawa-h-full hawa-w-full hawa-rounded hawa-border hawa-bg-background hawa-bg-cover hawa-bg-center hawa-transition-all hawa-duration-500 hover:hawa-drop-shadow-2xl",
+        style: {
+            backgroundImage: "url(".concat(props.blank ? "" : props.cardImage, ")")
+        },
+        onMouseEnter: function() {
+            return setHovered(true);
+        },
+        onMouseLeave: function() {
+            return setHovered(false);
+        }
+    }, props.blank ? /* @__PURE__ */ import_react2.default.createElement("div", {
+        className: "hawa-flex hawa-h-full hawa-flex-col hawa-items-center hawa-justify-center "
+    }, /* @__PURE__ */ import_react2.default.createElement("svg", {
+        className: "hawa-h-10 hawa-w-10 hawa-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"
+    }, /* @__PURE__ */ import_react2.default.createElement("path", {
+        d: "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"
+    }))) : /* @__PURE__ */ import_react2.default.createElement("div", {
+        className: "hawa-absolute hawa-inset-0 hawa-rounded hawa-bg-black hawa-opacity-50"
+    }), /* @__PURE__ */ import_react2.default.createElement("div", {
+        className: "hawa-absolute hawa-bottom-2 hawa-right-2 hawa-z-10 hawa-opacity-0 hawa-transition-all hawa-duration-200 group-hover:hawa-opacity-100"
+    }, props.inCardActions), !props.blank && /* @__PURE__ */ import_react2.default.createElement("div", {
+        className: "hawa-relative hawa-p-4"
+    }, /* @__PURE__ */ import_react2.default.createElement("h1", {
+        className: "hawa-text-white"
+    }, props.title), /* @__PURE__ */ import_react2.default.createElement("p", {
+        className: "hawa-text-white"
+    }, props.subtitle))), /* @__PURE__ */ import_react2.default.createElement("div", {
+        className: "hawa-flex hawa-flex-row hawa-justify-between hawa-text-sm hawa-transition-all hawa-duration-200 ".concat(hovered ? "hawa-opacity-100" : "hawa-opacity-0")
+    }, props.bottomElement));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+    ActionCard: ActionCard,
     Button: Button,
+    Card: Card,
+    CardContent: CardContent,
+    CardDescription: CardDescription,
+    CardFooter: CardFooter,
+    CardHeader: CardHeader,
+    CardTitle: CardTitle,
+    Loading: Loading,
     buttonVariants: buttonVariants
 });

package/dist/index.mjs

@@ -19,68 +19,68 @@ var Loading = ({
   ...props
 }) => {
   let sizeStyles = {
-    button: "h-4 w-4",
-    xs: "h-1 w-1",
-    sm: "h-6 w-6",
-    normal: "h-8 w-8",
-    lg: "h-14 w-14",
-    xl: "h-24 w-24"
+    button: "hawa-h-4 hawa-w-4",
+    xs: "hawa-h-1 hawa-w-1",
+    sm: "hawa-h-6 hawa-w-6",
+    normal: "hawa-h-8 hawa-w-8",
+    lg: "hawa-h-14 hawa-w-14",
+    xl: "hawa-h-24 hawa-w-24"
   };
   let animationStyles = {
-    pulse: "animate-in fade-in duration-1000",
-    bounce: "animate-bounce"
+    pulse: "hawa-animate-in hawa-fade-in hawa-duration-1000",
+    bounce: "hawa-animate-bounce"
   };
   switch (design.split("-")[0]) {
     case "dots":
-      return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row gap-2" }, /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React.createElement(
         "div",
         {
           className: clsx2(
-            "animate-bounce rounded-full delay-100 repeat-infinite",
-            size === "button" ? "h-2 w-2" : sizeStyles[size],
+            "hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite",
+            size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
             animationStyles[design.split("-")[1]],
-            color ? color : "bg-primary"
+            color ? color : "hawa-bg-primary"
           )
         }
       ), /* @__PURE__ */ React.createElement(
         "div",
         {
           className: clsx2(
-            "animate-bounce rounded-full delay-200 repeat-infinite",
-            size === "button" ? "h-2 w-2" : sizeStyles[size],
+            "hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite",
+            size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
             animationStyles[design.split("-")[1]],
-            color ? color : "bg-primary"
+            color ? color : "hawa-bg-primary"
           )
         }
       ), /* @__PURE__ */ React.createElement(
         "div",
         {
           className: clsx2(
-            "animate-bounce rounded-full delay-300 repeat-infinite",
-            size === "button" ? "h-2 w-2" : sizeStyles[size],
+            "hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite",
+            size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
             animationStyles[design.split("-")[1]],
-            color ? color : "bg-primary"
+            color ? color : "hawa-bg-primary"
           )
         }
       ));
     default:
-      return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row gap-x-3" }, /* @__PURE__ */ React.createElement("div", { "aria-label": "Loading...", role: "status" }, /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-x-3" }, /* @__PURE__ */ React.createElement("div", { "aria-label": "Loading...", role: "status" }, /* @__PURE__ */ React.createElement(
         "svg",
         {
-          className: clsx2(sizeStyles[size], "animate-spin"),
+          className: clsx2(sizeStyles[size], "hawa-animate-spin"),
           viewBox: "3 3 18 18"
         },
         /* @__PURE__ */ React.createElement(
           "path",
           {
-            className: "fill-primary/20",
+            className: "hawa-fill-primary/20",
             d: "M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
           }
         ),
         /* @__PURE__ */ React.createElement(
           "path",
           {
-            className: color ? color : "fill-primary",
+            className: color ? color : "hawa-fill-primary",
             d: "M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"
           }
         )
@@ -151,7 +151,122 @@ var Button = React2.forwardRef(
   }
 );
 Button.displayName = "Button";
+
+// components/elements/Card.tsx
+import * as React3 from "react";
+var Card = React3.forwardRef(
+  ({ className, clickable = false, ...props }, ref) => /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-lg border bg-card text-card-foreground shadow-sm",
+        clickable && "cursor-pointer transition-all hover:drop-shadow-md dark:hover:shadow-dark",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
+  "h3",
+  {
+    ref,
+    className: cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React3.forwardRef(
+  ({ headless, className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      ref,
+      className: cn("p-6", headless ? "pt-6" : "pt-0", className),
+      ...props
+    }
+  )
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+// components/elements/ActionCard.tsx
+import React4, { useState } from "react";
+var ActionCard = (props) => {
+  const [hovered, setHovered] = useState(false);
+  return /* @__PURE__ */ React4.createElement("div", { className: "hawa-flex hawa-h-full hawa-w-full hawa-flex-col hawa-gap-1" }, /* @__PURE__ */ React4.createElement(
+    "div",
+    {
+      className: "hawa-group hawa-relative hawa-h-full hawa-w-full hawa-rounded hawa-border hawa-bg-background hawa-bg-cover hawa-bg-center hawa-transition-all hawa-duration-500 hover:hawa-drop-shadow-2xl",
+      style: {
+        backgroundImage: `url(${props.blank ? "" : props.cardImage})`
+      },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false)
+    },
+    props.blank ? /* @__PURE__ */ React4.createElement("div", { className: "hawa-flex hawa-h-full hawa-flex-col hawa-items-center hawa-justify-center " }, /* @__PURE__ */ React4.createElement(
+      "svg",
+      {
+        className: "hawa-h-10 hawa-w-10 hawa-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"
+      },
+      /* @__PURE__ */ React4.createElement("path", { d: "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" })
+    )) : /* @__PURE__ */ React4.createElement("div", { className: "hawa-absolute hawa-inset-0 hawa-rounded hawa-bg-black hawa-opacity-50" }),
+    /* @__PURE__ */ React4.createElement("div", { className: "hawa-absolute hawa-bottom-2 hawa-right-2 hawa-z-10 hawa-opacity-0 hawa-transition-all hawa-duration-200 group-hover:hawa-opacity-100" }, props.inCardActions),
+    !props.blank && /* @__PURE__ */ React4.createElement("div", { className: "hawa-relative hawa-p-4" }, /* @__PURE__ */ React4.createElement("h1", { className: "hawa-text-white" }, props.title), /* @__PURE__ */ React4.createElement("p", { className: "hawa-text-white" }, props.subtitle))
+  ), /* @__PURE__ */ React4.createElement(
+    "div",
+    {
+      className: `hawa-flex hawa-flex-row hawa-justify-between hawa-text-sm hawa-transition-all hawa-duration-200 ${hovered ? "hawa-opacity-100" : "hawa-opacity-0"}`
+    },
+    props.bottomElement
+  ));
+};
 export {
+  ActionCard,
   Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Loading,
   buttonVariants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.6-next",
+  "version": "0.1.7-beta",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -33,6 +33,7 @@
     "eslint": "8.50.0",
     "eslint-config-next": "13.5.3",
     "next": "13.5.3",
+    "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwind-merge": "^1.14.0",
@@ -53,8 +54,9 @@
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "storybook": "^7.4.5",
+    "storybook-dark-mode": "^3.0.1",
     "tailwindcss": "^3.3.3",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^7.2.0"
   }
-}
+}