@lets-events/react 12.6.0 → 12.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.6.0",
+  "version": "12.6.2",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Button/index.tsx

@@ -3,6 +3,7 @@ import { ButtonStyled, SpinningDiv } from "./styledComponents";
 import { Button as ButtonRadix } from "@radix-ui/themes";
 import type { VariantProps } from "@stitches/react";
 import Icon, { IconProps } from "../Icon";
+import { Flex } from "../Flex";
 
 type ButtonVariantProps = VariantProps<typeof ButtonStyled>;
 export interface ButtonProps
@@ -33,13 +34,29 @@ export function Button({ asChild, children, loading, ...props }: ButtonProps) {
 
   return (
     <ButtonStyled as={Component} {...props} disabled={disabled || loading}>
-      {loading ? (
-        <SpinningDiv>
-          <Icon name="circle-notch" size={spinnerSize} />
-        </SpinningDiv>
-      ) : (
-        children
-      )}
+      <div style={{ position: "relative" }}>
+        <Flex
+          justify={"center"}
+          align={"center"}
+          css={{ visibility: loading ? "hidden" : undefined }}
+        >
+          {children}
+        </Flex>
+        {loading && (
+          <div
+            style={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+            }}
+          >
+            <SpinningDiv>
+              <Icon name="circle-notch" size={spinnerSize} />
+            </SpinningDiv>
+          </div>
+        )}
+      </div>
     </ButtonStyled>
   );
 }

package/src/components/Button/styledComponents.ts

@@ -278,6 +278,13 @@ export const ButtonStyled = styled(ButtonRadix, {
         borderRadius: "$full",
       },
     },
+    isCircle: {
+      true: {
+        borderRadius: "$full",
+        padding: 0,
+        aspectRatio: "1",
+      },
+    },
   },
 
   compoundVariants: [

package/src/components/FormFields/RadioGroupFormField.tsx

@@ -4,6 +4,7 @@ import { FormLabel } from "./subComponents/FormLabel";
 import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
 import { RadioGroup, RadioItem } from "../RadioGroup";
 import { getNestedValue } from "../../utils/getNestedValue";
+import { Text } from "../Text";
 
 type Option = {
   label: string;
@@ -68,12 +69,13 @@ export const RadioGroupFormField = ({
             fontWeight={fontWeight}
             disabled={disabled}
           >
-            {options.map((option) => (
-              <label key={option.value}>
-                <RadioItem value={option.value} />
-                {option.label}
-              </label>
-            ))}
+            <Flex direction="column">
+              {options.map((option) => (
+                <RadioItem key={option.value} value={option.value}>
+                  <Text typography={"labelSmall"}>{option.label}</Text>
+                </RadioItem>
+              ))}
+            </Flex>
           </RadioGroup>
         )}
       />

package/src/components/FormFields/subComponents/FormLabel.tsx

@@ -1,4 +1,7 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Text } from "../../Text";
+import { faAsterisk } from "@fortawesome/free-solid-svg-icons";
+import { Flex } from "../../Flex";
 
 export type FormLabelProps = {
   name: string;
@@ -16,14 +19,18 @@ export const FormLabel = ({
   if (!label) return null;
 
   return (
-    <Text
-      typography={"labelMedium"}
-      fontWeight={"medium"}
-      color={haveError ? "error600" : "dark700"}
-      id={`${name}-label`}
-    >
-      {label}
-      {!required && <Text color="dark500"> (opcional)</Text>}
-    </Text>
+    <Flex align={"start"} gap={6}>
+      <Text
+        typography={"labelMedium"}
+        fontWeight={"medium"}
+        color={haveError ? "error600" : "dark700"}
+        id={`${name}-label`}
+      >
+        {label}
+      </Text>
+      {required && (
+        <FontAwesomeIcon icon={faAsterisk} fontSize={"8px"} color="#AD1F2B" />
+      )}
+    </Flex>
   );
 };