@sikka/hawa 0.1.18 → 0.1.20

package/README.md

@@ -12,13 +12,9 @@
 ## Install
 
 ```bash
-npm install --save @sikka/hawa
+npm install @sikka/hawa
 ```
 
-# Roadmap
-
-- Organize code
-
 </br>
 
 # Contributing
@@ -29,21 +25,11 @@ To contribute, clone this github repository and run the development server
 git clone git@github.com:sikka-software/hawa.git
 cd hawa
 npm install
+npm run start
 ```
 
 </br>
 
-# TESTING
-
-Run development server
-
-```bash
-git clone git@github.com:sikka-software/hawa.git
-cd hawa
-npm install
-npm run storybook
-```
-
 ## License
 
 MIT © [SIKKA SOFTWARE](https://sikka.sa)

package/dist/styles.css

@@ -1220,9 +1220,6 @@ video {
 .w-7 {
   width: 1.75rem;
 }
-.w-72 {
-  width: 18rem;
-}
 .w-8 {
   width: 2rem;
 }
@@ -1241,6 +1238,9 @@ video {
 .w-\[25px\] {
   width: 25px;
 }
+.w-\[300px\] {
+  width: 300px;
+}
 .w-\[32px\] {
   width: 32px;
 }
@@ -1875,6 +1875,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(147 197 253 / var(--tw-bg-opacity));
 }
+.bg-blue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+}
 .bg-blue-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
@@ -1900,6 +1904,12 @@ video {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--destructive) / var(--tw-bg-opacity));
 }
+.bg-foreground\/10 {
+  background-color: hsl(var(--foreground) / 0.1);
+}
+.bg-foreground\/5 {
+  background-color: hsl(var(--foreground) / 0.05);
+}
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -2526,6 +2536,11 @@ video {
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-\[0_2px_10px\] {
+  --tw-shadow: 0 2px 10px;
+  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-\[0px_10px_38px_-10px_rgba\(22\2c _23\2c _24\2c _0\.35\)\2c _0px_10px_20px_-15px_rgba\(22\2c _23\2c _24\2c _0\.2\)\] {
   --tw-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
   --tw-shadow-colored: 0px 10px 38px -10px var(--tw-shadow-color), 0px 10px 20px -15px var(--tw-shadow-color);
@@ -2551,6 +2566,10 @@ video {
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-black\/5 {
+  --tw-shadow-color: rgb(0 0 0 / 0.05);
+  --tw-shadow: var(--tw-shadow-colored);
+}
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2628,6 +2647,11 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .delay-100 {
   transition-delay: 100ms;
 }
@@ -2640,6 +2664,9 @@ video {
 .duration-1000 {
   transition-duration: 1000ms;
 }
+.duration-200 {
+  transition-duration: 200ms;
+}
 .duration-300 {
   transition-duration: 300ms;
 }
@@ -2681,6 +2708,9 @@ video {
 .duration-1000 {
   animation-duration: 1000ms;
 }
+.duration-200 {
+  animation-duration: 200ms;
+}
 .duration-300 {
   animation-duration: 300ms;
 }
@@ -2911,6 +2941,9 @@ body {
 .hover\:bg-destructive\/90:hover {
   background-color: hsl(var(--destructive) / 0.9);
 }
+.hover\:bg-foreground\/30:hover {
+  background-color: hsl(var(--foreground) / 0.3);
+}
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -2960,6 +2993,9 @@ body {
 .hover\:bg-primary\/20:hover {
   background-color: hsl(var(--primary) / 0.2);
 }
+.hover\:bg-primary\/30:hover {
+  background-color: hsl(var(--primary) / 0.3);
+}
 .hover\:bg-primary\/40:hover {
   background-color: hsl(var(--primary) / 0.4);
 }
@@ -3248,6 +3284,32 @@ body {
 .data-\[side\=top\]\:animate-slideDownAndFade[data-side=top] {
   animation: slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
 }
+@keyframes accordion-up {
+
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}
+.data-\[state\=closed\]\:animate-accordion-up[data-state=closed] {
+  animation: accordion-up 0.2s ease-out;
+}
+@keyframes accordion-down {
+
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+.data-\[state\=open\]\:animate-accordion-down[data-state=open] {
+  animation: accordion-down 0.2s ease-out;
+}
 .data-\[highlighted\]\:bg-violet-9[data-highlighted] {
   --tw-bg-opacity: 1;
   background-color: hsl(252 56.0% 57.5% / var(--tw-bg-opacity));
@@ -3519,6 +3581,11 @@ body {
   --tw-placeholder-opacity: 1;
   color: rgb(156 163 175 / var(--tw-placeholder-opacity));
 }
+:is(.dark .dark\:shadow-dark) {
+  --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\:outline-gray-700) {
   outline-color: #374151;
 }
@@ -3783,6 +3850,14 @@ body {
 .\[\&\>\*\:not\(\:first-child\)\]\:mt-8>*:not(:first-child) {
   margin-top: 2rem;
 }
+.\[\&\[data-state\=open\]\>svg\]\:-rotate-90[data-state=open]>svg {
+  --tw-rotate: -90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .peer:checked ~ .peer-checked\:\[\&_\.active\]\:block .active {
   display: block;
 }

package/es/elements/HawaRadio.d.ts

@@ -9,6 +9,7 @@ type RadioTypes = {
         sublabel?: any;
         icon?: any;
     }[];
+    width?: "default" | "full";
     onChangeTab?: any;
     defaultValue?: any;
 };

package/es/elements/InterfaceSettings.d.ts

@@ -4,6 +4,8 @@ type TypographyTypes = {
     currentLanguage: any;
     handleColorMode: (e: any) => void;
     currentColorMode: any;
+    orientation?: "vertical" | "horizontal";
+    width?: "default" | "full";
 };
 export declare const InterfaceSettings: FC<TypographyTypes>;
 export {};

package/es/elements/Popover.d.ts

@@ -5,6 +5,7 @@ interface PopoverProps {
     className?: string;
     align?: "start" | "center" | "end";
     sideOffset?: number;
+    side?: "top" | "right" | "bottom" | "left";
 }
 declare const Popover: React.FC<PopoverProps>;
 export { Popover };