@sikka/hawa 0.1.12 → 0.1.14

package/package.json

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

package/src/elements/Button.tsx

@@ -22,8 +22,10 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-10 px-4 py-2",
+        xs: "h-fit py-1 text-[10px] px-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
+        xl: "h-14 rounded-md px-10",
         icon: "h-10 w-10",
       },
     },

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.handleColorMode(e)
+          setColor(e)
+        }}
         design="tabs"
         options={[
           {

package/src/styles.css

@@ -2072,6 +2072,10 @@ video {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
 }
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;

package/src/translations/ar.json

@@ -26,5 +26,16 @@
   "signInViaTwitterLabel": "الدخول بواسطة Twitter",
   "signUpViaGoogleLabel": "التسجيل بواسطة Google",
   "signUpViaGithubLabel": "التسجيل بواسطة Github",
-  "signUpViaTwitterLabel": "التسجيل بواسطة Twitter"
+  "signUpViaTwitterLabel": "التسجيل بواسطة Twitter",
+
+  "fullNameRequiredText": "الإسم الكامل مطلوب",
+  "passwordTooShortText": "كلمة المرور قصيرة",
+  "subscribeToNewsletter": "إشترك في النشرة الإخبارية",
+  "confirmPasswordLabel": "تأكيد كلمة المرور",
+  "confirmPasswordPlaceholder": "تأكيد كلمة المرور",
+  "iAcceptText": "أوافق على",
+  "termsText": "الشروط والأحكام",
+  "termsRequiredText": "يجب الموافقة على الشروط والأحكام للإستمرار",
+  "existingUserText": "لديك حساب؟",
+  "refCode": "رمز الإحالة"
 }

package/src/translations/en.json

@@ -25,5 +25,16 @@
   "signInViaTwitterLabel": "Sign in with Twitter",
   "signUpViaGoogleLabel": "Sign up with Google",
   "signUpViaGithubLabel": "Sign up with Github",
-  "signUpViaTwitterLabel": "Sign up with Twitter"
+  "signUpViaTwitterLabel": "Sign up with Twitter",
+
+  "fullNameRequiredText": "Full name is required",
+  "passwordTooShortText": "Password too short",
+  "subscribeToNewsletter": "Subscribe to newsletter?",
+  "confirmPasswordLabel": "Confirm Password",
+  "confirmPasswordPlaceholder": "Minimum 8 characters",
+  "iAcceptText": "I accept the",
+  "termsText": "terms & conditions",
+  "termsRequiredText": "you must accept the terms & conditions",
+  "existingUserText": "Existing User?",
+  "refCode": "Referral Code"
 }