@sikka/hawa 0.1.10 → 0.1.12

package/package.json

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

package/src/elements/Button.tsx

@@ -6,7 +6,7 @@ import { cn } from "../util"
 import { HawaLoading } from "./HawaLoading"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center select-none rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

package/src/elements/HawaAlert.tsx

@@ -168,7 +168,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
           <button
             type="button"
             className={clsx(
-              "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  hover:text-gray-900  dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
+              "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  hover:text-gray-900",
               closeButtonStyle[props.severity],
               direction === "rtl" ? "left-2" : "right-2"
             )}

package/src/elements/HawaRadio.tsx

@@ -22,9 +22,9 @@ export const HawaRadio: FC<RadioTypes> = ({
 }) => {
   const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
-    "inline-block py-2 px-4  w-full text-white bg-primary rounded active dark:bg-primary dark:text-black"
+    "inline-block py-2 px-4  w-full text-primary-foreground bg-primary  active dark:bg-primary "
   let inactiveTabStyle =
-    "inline-block py-2 px-4 w-full dark:bg-background bg-gray-100 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
+    "inline-block py-2 px-4 w-full transition-all hover:bg-primary/10 dark:bg-background bg-primary/5  hover:text-gray-900  dark:hover:bg-primary/10 dark:hover:text-white dark:bg-primary/5"
   let orientationStyle = {
     horizontal: "flex flex-row",
     vertical: "flex flex-col",
@@ -32,38 +32,39 @@ export const HawaRadio: FC<RadioTypes> = ({
   switch (design) {
     case "tabs":
       return (
-        <div>
-          <ul
-            className={clsx(
-              props.options?.length > 2
-                ? "flex-wrap xs:max-w-full xs:flex-nowrap"
-                : "",
-              " max-w-fit  whitespace-nowrap rounded border bg-gray-100 text-center text-sm font-medium text-gray-500 dark:bg-background  dark:text-gray-400",
-              orientationStyle[orientation]
-            )}
-          >
-            {props.options?.map((opt: any, o) => (
-              <li className="w-full" key={o}>
-                <button
-                  aria-current="page"
-                  onClick={() => {
-                    setSelectedOption(opt.value)
-                    props.onChangeTab(opt.value)
-                  }}
-                  className={clsx(
-                    "flex flex-row items-center justify-center gap-2",
-                    selectedOption === opt.value
-                      ? activeTabStyle
-                      : inactiveTabStyle
-                  )}
-                >
-                  {opt.icon && opt.icon}
-                  {opt.label}
-                </button>
-              </li>
-            ))}
-          </ul>
-        </div>
+        <ul
+          className={clsx(
+            props.options?.length > 2
+              ? "flex-wrap xs:max-w-full xs:flex-nowrap"
+              : "",
+            " max-w-fit  whitespace-nowrap rounded border  text-center text-sm font-medium select-none",
+            orientationStyle[orientation]
+          )}
+        >
+          {props.options?.map((opt: any, o) => (
+            <li
+              aria-current="page"
+              onClick={() => {
+                setSelectedOption(opt.value)
+                props.onChangeTab(opt.value)
+              }}
+              className={clsx(
+                "w-full cursor-pointer",
+                orientation === "horizontal" &&
+                  "rounded-none first:rounded-l last:rounded-r",
+                orientation === "vertical" &&
+                  "rounded-none first:rounded-t last:rounded-b",
+
+                "last flex flex-row items-center justify-center gap-2 ",
+                selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+              )}
+              key={o}
+            >
+              {opt.icon && opt.icon}
+              {opt.label}
+            </li>
+          ))}
+        </ul>
       )
     case "bordered":
       return (

package/src/elements/HawaStats.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from "react"
-import clsx from "clsx"
-import { HawaLoading } from "./HawaLoading"
 import { Card, CardContent, CardHeader, CardTitle } from "./Card"
+import { Skeleton } from "./Skeleton"
 
 type StatTypes = {
   label?: string
@@ -28,41 +27,19 @@ export const HawaStats: FC<StatTypes> = ({ variant = "default", ...props }) => {
         {props.icon && props.icon}
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold">{props.number}</div>
-        {props.helperText && (
-          <p className="text-xs text-muted-foreground">{props.helperText}</p>
+        {props.isLoading ? (
+          <Skeleton className="h-8 w-3/4" />
+        ) : (
+          <div className="text-2xl font-bold">{props.number}</div>
+        )}
+        {props.isLoading ? (
+          <Skeleton className="mt-2 h-4 w-1/2" />
+        ) : (
+          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/HawaTextField.tsx

@@ -53,7 +53,7 @@ export const HawaTextField: FC<TextFieldTypes> = ({
 
   let defaultStyle = "flex max-h-fit flex-col justify-center gap-2"
   let defaultInputStyle =
-    "block w-full rounded border bg-background p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
+    "block w-full rounded border bg-background p-2 text-sm text-black dark:text-white focus:border-blue-500 focus:ring-blue-500"
   let previewInputStyle =
     "block w-full rounded bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
   // "mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2  text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",

package/src/elements/index.ts

@@ -60,4 +60,5 @@ export * from "./Label"
 export * from "./Input"
 export * from "./Tooltip"
 export * from "./Card"
+export * from "./Skeleton"
 export * from "./InterfaceSettings"

package/src/styles.css

@@ -1171,6 +1171,9 @@ video {
 .w-3 {
   width: 0.75rem;
 }
+.w-3\/4 {
+  width: 75%;
+}
 .w-32 {
   width: 8rem;
 }
@@ -1942,6 +1945,9 @@ video {
 .bg-primary\/20 {
   background-color: hsl(var(--primary) / 0.2);
 }
+.bg-primary\/5 {
+  background-color: hsl(var(--primary) / 0.05);
+}
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -2649,6 +2655,53 @@ video {
     scrollbar-width: none; /* Firefox */
   }
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;700&display=swap");
+/* 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 346.8 77.2% 49.8%;
+    --radius: 1rem;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 346.8 77.2% 49.8%;
+  }
+} */
 body {
   font-family: "IBM Plex Sans Arabic", sans-serif;
 }
@@ -2758,6 +2811,22 @@ body {
   --tw-content: '';
   content: var(--tw-content);
 }
+.first\:rounded-l:first-child {
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
+}
+.first\:rounded-t:first-child {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+}
+.last\:rounded-b:last-child {
+  border-bottom-right-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
+}
+.last\:rounded-r:last-child {
+  border-top-right-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
 .hover\:w-40:hover {
   width: 10rem;
 }
@@ -2835,6 +2904,9 @@ body {
 .hover\:bg-primary-foreground:hover {
   background-color: hsl(var(--primary-foreground));
 }
+.hover\:bg-primary\/10:hover {
+  background-color: hsl(var(--primary) / 0.1);
+}
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
@@ -3264,6 +3336,9 @@ body {
 :is(.dark .dark\:bg-primary) {
   background-color: hsl(var(--primary));
 }
+:is(.dark .dark\:bg-primary\/5) {
+  background-color: hsl(var(--primary) / 0.05);
+}
 :is(.dark .dark\:bg-red-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
@@ -3372,6 +3447,9 @@ body {
 :is(.dark .dark\:hover\:bg-layoutPrimary-700:hover) {
   background-color: var(--layout-primary-700);
 }
+:is(.dark .dark\:hover\:bg-primary\/10:hover) {
+  background-color: hsl(var(--primary) / 0.1);
+}
 :is(.dark .dark\:hover\:text-blue-500:hover) {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));

package/src/tailwind.css

@@ -2,6 +2,53 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;700&display=swap");
+/* 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 346.8 77.2% 49.8%;
+    --radius: 1rem;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 346.8 77.2% 49.8%;
+  }
+} */
 
 @layer base {
   :root {
@@ -165,7 +212,7 @@
 
 @layer components {
   .clickable-link {
-    @apply cursor-pointer text-primary/80 underline underline-offset-4 hover:text-primary transition-all;
+    @apply cursor-pointer text-primary/80 underline underline-offset-4 transition-all hover:text-primary;
   }
 }
 @layer utilities {