@sikka/hawa 0.6.5-next → 0.6.10-next

package/dist/index.css

@@ -598,8 +598,6 @@ input[type="number"]::-webkit-inner-spin-button,
     display: inline-block;
     position: relative;
     top: 3px;
-    /* margin: 0 5px 0 0; */
-
     width: 15px;
     height: 15px;
     border-radius: 11px;
@@ -618,22 +616,32 @@ input[type="number"]::-webkit-inner-spin-button,
     height: 9px;
     position: absolute;
     top: 6px;
-    left: 3px;
     content: " ";
     display: block;
     background: hsl(var(--primary));
   }
+.radio-item-default.right-3px input[type="radio"]:checked + label:after {
+    right: 3px;
+  }
+.radio-item-default.left-3px input[type="radio"]:checked + label:after {
+    left: 3px;
+  }
 .radio-item-bordered input[type="radio"]:checked + label:after {
     border-radius: 100%;
     width: 9px;
     height: 9px;
     position: absolute;
     top: 22px;
-    left: 23px;
     content: " ";
     display: block;
     background: hsl(var(--primary));
   }
+.radio-item-bordered.left-23px input[type="radio"]:checked + label:after {
+    left: 23px;
+  }
+.radio-item-bordered.right-19px input[type="radio"]:checked + label:after {
+    right: 19px;
+  }
 .clickable-link {
   cursor: pointer;
   color: hsl(var(--primary) / 0.8);
@@ -1965,6 +1973,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-pt-1 {
   padding-top: 0.25rem;
 }
+.hawa-pt-10 {
+  padding-top: 2.5rem;
+}
 .hawa-pt-2 {
   padding-top: 0.5rem;
 }
@@ -2342,15 +2353,30 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-enter-translate-x: initial;
   --tw-enter-translate-y: initial;
 }
+.hawa-animate-out {
+  animation-name: exit;
+  animation-duration: 150ms;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
 .hawa-fade-in {
   --tw-enter-opacity: 0;
 }
 .hawa-fade-in-0 {
   --tw-enter-opacity: 0;
 }
+.hawa-fade-out-0 {
+  --tw-exit-opacity: 0;
+}
 .hawa-zoom-in-95 {
   --tw-enter-scale: .95;
 }
+.hawa-zoom-out-95 {
+  --tw-exit-scale: .95;
+}
 .hawa-duration-100 {
   animation-duration: 100ms;
 }
@@ -2384,6 +2410,10 @@ input[type="number"]::-webkit-inner-spin-button,
 body {
   font-family: "IBM Plex Sans Arabic", sans-serif;
 }
+:is(.hawa-dark .dark\:dark-shadow) {
+    box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1),
+      0 4px 6px -2px rgba(255, 255, 255, 0.05);
+  }
 :is(.hawa-dark .dark\:hover\:dark-shadow:hover) {
     box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1),
       0 4px 6px -2px rgba(255, 255, 255, 0.05);
@@ -3205,6 +3235,9 @@ body {
 .\[\&\:not\(\:last-child\)\]\:hawa-border-b:not(:last-child) {
   border-bottom-width: 1px;
 }
+.\[\&\:not\(\:last-child\)\]\:hawa-border-l:not(:last-child) {
+  border-left-width: 1px;
+}
 .\[\&\:not\(\:last-child\)\]\:hawa-border-r:not(:last-child) {
   border-right-width: 1px;
 }

package/dist/index.d.mts

@@ -143,8 +143,6 @@ type TooltipTypes = {
 declare const Tooltip: React__default.FunctionComponent<TooltipTypes>;
 
 type CodeBlockTypes = {
-    /** Sets the theme color of the code block.*/
-    color?: "dark" | "light";
     /** Specifies the programming language for syntax highlighting.*/
     language?: string;
     /** Defines the width of the code block.*/
@@ -343,6 +341,8 @@ type PinInputTypes = {
     width?: "normal" | "full";
     /** Function to get the value of pins */
     getPins?: (pins: string[]) => void;
+    /** The small red text under the input field to show validation or a hint.   */
+    helperText?: any;
 };
 declare const PinInput: FC<PinInputTypes>;
 
@@ -626,6 +626,8 @@ type SelectTypes = {
     getOptionLabel?: any;
     disabled?: boolean;
     defaultValue?: any;
+    handleCreateOption?: () => void;
+    placeholder?: string;
     isLoading?: any;
     texts?: {
         noOptions?: string;
@@ -735,6 +737,7 @@ type AppLayoutTypes = {
     keepDrawerOpen?: boolean;
     DrawerFooterActions?: any;
     clickedItem?: any;
+    onLogoClick?: () => void;
     texts?: {
         expandSidebar?: string;
         collapseSidebar?: string;
@@ -844,12 +847,19 @@ type LoginFormTypes = {
 declare const LoginForm: FC<LoginFormTypes>;
 
 type RegisterFormTypes = {
+    /** Callback function triggered to handle language changes.*/
     handleLanguage?: () => void;
+    /** The current language being used in the application. */
     currentLanguage?: any;
+    /** Callback function triggered to handle color mode changes. */
     handleColorMode?: () => void;
+    /** The current color mode being used in the application. */
     currentColorMode?: any;
+    /** Direction of text and layout, either 'rtl' (right-to-left) or 'ltr' (left-to-right). */
     direction?: "rtl" | "ltr";
+    /** Determines whether to display logos only or with text in the social media registration section. */
     logosOnly?: boolean;
+    /** Object containing text labels used throughout the form. */
     texts: {
         fullNameLabel: string;
         fullNamePlaceholder: string;
@@ -865,6 +875,7 @@ type RegisterFormTypes = {
         passwordPlaceholder: string;
         passwordRequiredText: string;
         passwordTooShortText: string;
+        passwordsDontMatch: string;
         confirmPasswordLabel: string;
         confirmPasswordPlaceholder: string;
         confirmPasswordRequired: string;
@@ -884,23 +895,41 @@ type RegisterFormTypes = {
         refCode: string;
         userReferenceLabel: string;
     };
+    /** Enables registration via Google when set to true. */
     viaGoogle: boolean;
+    /** Enables registration via Github when set to true. */
     viaGithub: boolean;
+    /** Enables registration via Twitter when set to true. */
     viaTwitter: boolean;
+    /** Determines whether to show the referral code field. */
     showRefCode: boolean;
+    /** Determines whether to show the user source selection. */
     showUserSource: boolean;
+    /** Determines whether to show the terms acceptance checkbox. */
     showTermsOption: boolean;
+    /** Determines whether to show the newsletter subscription checkbox. */
     showNewsletterOption: boolean;
+    /** Callback function triggered on form submission. */
     handleRegister: (e: any) => void;
+    /** Callback function triggered to route to the login page. */
     handleRouteToLogin: () => void;
+    /** Callback function triggered to handle registration via Google. */
     handleGoogleRegister: () => void;
+    /** Callback function triggered to handle registration via Github. */
     handleGithubRegister: () => void;
+    /** Callback function triggered to handle registration via Twitter. */
     handleTwitterRegister: () => void;
+    /** Callback function triggered to route to the Terms of Service page. */
     handleRouteToTOS: () => void;
+    /** Determines whether to show an error alert. */
     showError: any;
+    /** Title for the error alert. */
     errorTitle: any;
+    /** Text for the error alert. */
     errorText: any;
+    /** Array containing the fields to be included in the form. */
     registerFields: any[];
+    /** Indicates whether the form submission is in progress. */
     isLoading?: boolean;
 };
 declare const RegisterForm: FC<RegisterFormTypes>;
@@ -927,11 +956,9 @@ type AppLandingTypes = {
     withoutSignUp?: boolean;
     size: "small" | "normal" | "full";
     direction: "rtl" | "ltr";
-    handleSignIn: () => void;
-    handleSignUp: () => void;
+    handleRouteToRegister: () => void;
     handleLanguage: () => void;
     handleColorMode: () => void;
-    handleRouteToSignUp?: () => void;
     handleGoogle?: () => void;
     handleTwitter?: () => void;
     handleApple?: () => void;
@@ -1004,12 +1031,12 @@ type TConfirmation = {
         codeLabel?: string;
         codePlaceholder?: string;
         codeRequiredText?: string;
+        codeTooShort?: string;
         confirm?: string;
         cancel?: string;
     };
     phoneNumber?: string;
-    submitConfirmation?: any;
-    handleSignIn?: any;
+    handleConfirm?: any;
 };
 declare const CodeConfirmation: FC<TConfirmation>;
 
@@ -1049,7 +1076,15 @@ type ComponentTypes = {
 declare const FeedbackEmoji: FC<ComponentTypes>;
 
 type FeedbackFormType = {
-    onSubmit: (data: any) => void;
+    onSubmit: (e: any) => void;
+    texts: {
+        requestType?: string;
+        requestTypeRequired?: string;
+        description?: string;
+        descriptionRequired?: string;
+        descriptionTooShort?: string;
+        submit?: string;
+    };
 };
 declare const FeedbackForm: React__default.FC<FeedbackFormType>;
 

package/dist/index.d.ts

@@ -143,8 +143,6 @@ type TooltipTypes = {
 declare const Tooltip: React__default.FunctionComponent<TooltipTypes>;
 
 type CodeBlockTypes = {
-    /** Sets the theme color of the code block.*/
-    color?: "dark" | "light";
     /** Specifies the programming language for syntax highlighting.*/
     language?: string;
     /** Defines the width of the code block.*/
@@ -343,6 +341,8 @@ type PinInputTypes = {
     width?: "normal" | "full";
     /** Function to get the value of pins */
     getPins?: (pins: string[]) => void;
+    /** The small red text under the input field to show validation or a hint.   */
+    helperText?: any;
 };
 declare const PinInput: FC<PinInputTypes>;
 
@@ -626,6 +626,8 @@ type SelectTypes = {
     getOptionLabel?: any;
     disabled?: boolean;
     defaultValue?: any;
+    handleCreateOption?: () => void;
+    placeholder?: string;
     isLoading?: any;
     texts?: {
         noOptions?: string;
@@ -735,6 +737,7 @@ type AppLayoutTypes = {
     keepDrawerOpen?: boolean;
     DrawerFooterActions?: any;
     clickedItem?: any;
+    onLogoClick?: () => void;
     texts?: {
         expandSidebar?: string;
         collapseSidebar?: string;
@@ -844,12 +847,19 @@ type LoginFormTypes = {
 declare const LoginForm: FC<LoginFormTypes>;
 
 type RegisterFormTypes = {
+    /** Callback function triggered to handle language changes.*/
     handleLanguage?: () => void;
+    /** The current language being used in the application. */
     currentLanguage?: any;
+    /** Callback function triggered to handle color mode changes. */
     handleColorMode?: () => void;
+    /** The current color mode being used in the application. */
     currentColorMode?: any;
+    /** Direction of text and layout, either 'rtl' (right-to-left) or 'ltr' (left-to-right). */
     direction?: "rtl" | "ltr";
+    /** Determines whether to display logos only or with text in the social media registration section. */
     logosOnly?: boolean;
+    /** Object containing text labels used throughout the form. */
     texts: {
         fullNameLabel: string;
         fullNamePlaceholder: string;
@@ -865,6 +875,7 @@ type RegisterFormTypes = {
         passwordPlaceholder: string;
         passwordRequiredText: string;
         passwordTooShortText: string;
+        passwordsDontMatch: string;
         confirmPasswordLabel: string;
         confirmPasswordPlaceholder: string;
         confirmPasswordRequired: string;
@@ -884,23 +895,41 @@ type RegisterFormTypes = {
         refCode: string;
         userReferenceLabel: string;
     };
+    /** Enables registration via Google when set to true. */
     viaGoogle: boolean;
+    /** Enables registration via Github when set to true. */
     viaGithub: boolean;
+    /** Enables registration via Twitter when set to true. */
     viaTwitter: boolean;
+    /** Determines whether to show the referral code field. */
     showRefCode: boolean;
+    /** Determines whether to show the user source selection. */
     showUserSource: boolean;
+    /** Determines whether to show the terms acceptance checkbox. */
     showTermsOption: boolean;
+    /** Determines whether to show the newsletter subscription checkbox. */
     showNewsletterOption: boolean;
+    /** Callback function triggered on form submission. */
     handleRegister: (e: any) => void;
+    /** Callback function triggered to route to the login page. */
     handleRouteToLogin: () => void;
+    /** Callback function triggered to handle registration via Google. */
     handleGoogleRegister: () => void;
+    /** Callback function triggered to handle registration via Github. */
     handleGithubRegister: () => void;
+    /** Callback function triggered to handle registration via Twitter. */
     handleTwitterRegister: () => void;
+    /** Callback function triggered to route to the Terms of Service page. */
     handleRouteToTOS: () => void;
+    /** Determines whether to show an error alert. */
     showError: any;
+    /** Title for the error alert. */
     errorTitle: any;
+    /** Text for the error alert. */
     errorText: any;
+    /** Array containing the fields to be included in the form. */
     registerFields: any[];
+    /** Indicates whether the form submission is in progress. */
     isLoading?: boolean;
 };
 declare const RegisterForm: FC<RegisterFormTypes>;
@@ -927,11 +956,9 @@ type AppLandingTypes = {
     withoutSignUp?: boolean;
     size: "small" | "normal" | "full";
     direction: "rtl" | "ltr";
-    handleSignIn: () => void;
-    handleSignUp: () => void;
+    handleRouteToRegister: () => void;
     handleLanguage: () => void;
     handleColorMode: () => void;
-    handleRouteToSignUp?: () => void;
     handleGoogle?: () => void;
     handleTwitter?: () => void;
     handleApple?: () => void;
@@ -1004,12 +1031,12 @@ type TConfirmation = {
         codeLabel?: string;
         codePlaceholder?: string;
         codeRequiredText?: string;
+        codeTooShort?: string;
         confirm?: string;
         cancel?: string;
     };
     phoneNumber?: string;
-    submitConfirmation?: any;
-    handleSignIn?: any;
+    handleConfirm?: any;
 };
 declare const CodeConfirmation: FC<TConfirmation>;
 
@@ -1049,7 +1076,15 @@ type ComponentTypes = {
 declare const FeedbackEmoji: FC<ComponentTypes>;
 
 type FeedbackFormType = {
-    onSubmit: (data: any) => void;
+    onSubmit: (e: any) => void;
+    texts: {
+        requestType?: string;
+        requestTypeRequired?: string;
+        description?: string;
+        descriptionRequired?: string;
+        descriptionTooShort?: string;
+        submit?: string;
+    };
 };
 declare const FeedbackForm: React__default.FC<FeedbackFormType>;