@sikka/hawa 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "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  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  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",
@@ -37,7 +37,7 @@ export const HawaRadio: FC<RadioTypes> = ({
             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",
+            " max-w-fit  whitespace-nowrap rounded border  text-center text-sm font-medium select-none",
             orientationStyle[orientation]
           )}
         >

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/InterfaceSettings.tsx

@@ -1,18 +1,23 @@
-import React, { FC } from "react"
+import React, { FC, useState } from "react"
 import { HawaRadio } from "./HawaRadio"
 
 type TypographyTypes = {
-  handleLanguage: () => void
+  handleLanguage: (e) => void
   currentLanguage: any
-  handleColorMode: () => void
+  handleColorMode: (e) => void
   currentColorMode: any
 }
 export const InterfaceSettings: FC<TypographyTypes> = (props) => {
+  const [color, setColor] = useState(props.currentColorMode)
+  const [language, setLanguage] = useState(props.currentLanguage)
   return (
     <div className="mt-6 flex flex-row justify-between">
       <HawaRadio
-        defaultValue={props.currentLanguage}
-        onChangeTab={props.handleLanguage}
+        defaultValue={language}
+        onChangeTab={(e) => {
+          props.handleLanguage(e)
+          setLanguage(e)
+        }}
         design="tabs"
         options={[
           { value: "ar", label: "عربي" },
@@ -20,8 +25,11 @@ export const InterfaceSettings: FC<TypographyTypes> = (props) => {
         ]}
       />
       <HawaRadio
-        defaultValue={props.currentColorMode}
-        onChangeTab={props.handleColorMode}
+        defaultValue={color}
+        onChangeTab={(e) => {
+          props.handleLanguage(e)
+          setColor(e)
+        }}
         design="tabs"
         options={[
           {

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;
 }
@@ -2851,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);
 }
@@ -3280,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));
@@ -3388,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 {