@sikka/hawa 0.1.5 → 0.1.7

package/package.json

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

package/src/elements/Card.tsx

@@ -1,19 +1,24 @@
 import * as React from "react"
 import { cn } from "../util"
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  clickable?: boolean
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, clickable = false, ...props }, ref) => (
+    <div
+      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"
 
 const CardHeader = React.forwardRef<

package/src/elements/HawaStats.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react"
 import clsx from "clsx"
 import { HawaLoading } from "./HawaLoading"
-// import { BsFilesAlt } from "react-icons/bs"
+import { Card, CardContent, CardHeader, CardTitle } from "./Card"
 
 type StatTypes = {
   label?: string
@@ -21,52 +21,48 @@ type StatTypes = {
   handleClick?: () => void
 }
 export const HawaStats: FC<StatTypes> = ({ variant = "default", ...props }) => {
-  let defaultStyle =
-    "flex transition-all flex-col gap-1 rounded p-4 text-sm h-fit max-h-fit"
-  let statStyles = {
-    plain: "",
-    default: "border bg-card text-card-foreground shadow-sm",
-    contained: "bg-layoutPrimary-500",
-    outlined: "ring-2 w-fit",
-    neobrutalism: "shadow-neobrutalism  border-4 border-black  bg-white",
-    dropshadow: "bg-white drop-shadow-md",
-  }
-  let widthStyles = {
-    full: "w-full",
-    min: "w-fit",
-    normal: "w-full max-w-[200px]",
-  }
-
   return (
-    <div
-      onClick={props.handleClick}
-      className={clsx(
-        defaultStyle,
-        widthStyles[props.width],
-        statStyles[variant],
-        props.handleClick ? "cursor-pointer" : "cursor-default",
-        props.handleClick && variant === "dropshadow"
-          ? "hover:drop-shadow-lg"
-          : ""
-      )}
-      style={{
-        backgroundColor: props.color
-          ? props.color
-          : variant === "contained"
-          ? "var(--layout-primary-500)"
-          : "",
-      }}
-    >
-      {props.icon && <div className="mb-2">{props.icon} </div>}
-      <div>{props.label}</div>
-      {props.isLoading ? (
-        <HawaLoading />
-      ) : (
+    <Card onClick={props.handleClick} clickable={Boolean(props.handleClick)}>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">{props.label}</CardTitle>
+        {props.icon && props.icon}
+      </CardHeader>
+      <CardContent>
         <div className="text-2xl font-bold">{props.number}</div>
-      )}
-      {props.helperText ? (
-        <div className="text-xs text-muted-foreground">{props.helperText}</div>
-      ) : null}
-    </div>
+        {props.helperText && (
+          <p className="text-xs text-muted-foreground">{props.helperText}</p>
+        )}
+      </CardContent>
+    </Card>
+
+    // <Card>
+
+    //   <CardContent
+    //     // headless
+    //     className={clsx(
+    //       // defaultStyle,
+    //       // widthStyles[props.width],
+    //       statStyles[variant],
+    //       props.handleClick ? "cursor-pointer" : "cursor-default",
+    //       props.handleClick && variant === "dropshadow"
+    //         ? "hover:drop-shadow-lg"
+    //         : ""
+    //     )}
+    //     onClick={props.handleClick}
+    //   >
+    //     {props.icon && <div className="mb-2">{props.icon} </div>}
+    //     {/* <div>{props.label}</div> */}
+    //     {props.isLoading ? (
+    //       <HawaLoading />
+    //     ) : (
+    //       <div className="text-2xl font-bold">{props.number}</div>
+    //     )}
+    //     {props.helperText ? (
+    //       <div className="text-xs text-muted-foreground">
+    //         {props.helperText}
+    //       </div>
+    //     ) : null}
+    //   </CardContent>
+    // </Card>
   )
 }

package/src/elements/Skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "../util"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/elements/index.ts

@@ -53,3 +53,10 @@ export * from "./HawaLandingCard"
 export * from "./HawaButton"
 export * from "./HawaStoreButtons"
 export * from "./HawaLogoButton"
+
+// v0.1
+export * from "./Button"
+export * from "./Label"
+export * from "./Input"
+export * from "./Tooltip"
+export * from "./Card"

package/src/styles.css

@@ -1383,6 +1383,15 @@ video {
 .animate-bounce {
   animation: bounce 1s infinite;
 }
+@keyframes pulse {
+
+  50% {
+    opacity: .5;
+  }
+}
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
 @keyframes spin {
 
   to {
@@ -1914,6 +1923,9 @@ video {
 .bg-layoutPrimary-600 {
   background-color: var(--layout-primary-600);
 }
+.bg-muted {
+  background-color: hsl(var(--muted));
+}
 .bg-orange-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(251 146 60 / var(--tw-bg-opacity));
@@ -2538,10 +2550,6 @@ video {
   --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);
 }
-.drop-shadow-md {
-  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
-  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);
-}
 .filter {
   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);
 }
@@ -2905,6 +2913,10 @@ body {
   --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);
 }
+.hover\:drop-shadow-md:hover {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+  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\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -3366,6 +3378,11 @@ body {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+:is(.dark .dark\:hover\:shadow-dark:hover) {
+  --tw-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 :is(.dark .dark\:hover\:brightness-90:hover) {
   --tw-brightness: brightness(.9);
   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);
@@ -3505,6 +3522,10 @@ body {
          columns: 3;
   }
 
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -3560,6 +3581,10 @@ body {
     -moz-columns: 4;
          columns: 4;
   }
+
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }
 @media (min-width: 1280px) {
 

package/tailwind.config.js

@@ -19,7 +19,8 @@ module.exports = {
     },
     extend: {
       boxShadow: {
-        neobrutalism: "5px 5px 0px 0px rgba(0,0,0,1);"
+        neobrutalism: "5px 5px 0px 0px rgba(0,0,0,1);",
+        dark: "0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05)"
       },
       maxWidth: {
         "2xs": "250px"