@lets-events/react 10.1.1 → 11.0.0

package/dist/index.mjs

@@ -1533,24 +1533,6 @@ var typographyValues = {
     lineHeight: "$labelExtraSmall"
   }
 };
-var typographyButtonValues = {
-  buttonLarge: {
-    fontSize: "$buttonLarge",
-    lineHeight: "$buttonLarge"
-  },
-  buttonMedium: {
-    fontSize: "$buttonMedium",
-    lineHeight: "$buttonMedium"
-  },
-  buttonSmall: {
-    fontSize: "$buttonSmall",
-    lineHeight: "$buttonSmall"
-  },
-  buttonExtraSmall: {
-    fontSize: "$buttonExtraSmall",
-    lineHeight: "$buttonExtraSmall"
-  }
-};
 var typographyLabelValues = {
   labelLarge: {
     fontSize: "$labelLarge",
@@ -1575,7 +1557,7 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 var TextStyle = styled(TextRadix, {
   fontFamily: "$default",
   lineHeight: "$base",
-  color: "$gray100",
+  color: "$grey950",
   variants: {
     typography: typographyValues,
     fontWeight: {
@@ -1587,8 +1569,15 @@ var TextStyle = styled(TextRadix, {
   }
 });
 function Text(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx2(TextStyle, __spreadValues({}, props));
+  var _b = _a, { color } = _b, props = __objRest(_b, ["color"]);
+  return /* @__PURE__ */ jsx2(
+    TextStyle,
+    __spreadProps(__spreadValues({}, props), {
+      css: __spreadValues({
+        color: color ? "$" + color : "$grey950"
+      }, props.css)
+    })
+  );
 }
 
 // src/components/Button/styledComponents.ts
@@ -1609,7 +1598,7 @@ var ButtonStyled = styled(ButtonRadix, {
   alignItems: "center",
   justifyContent: "center",
   gap: "$10",
-  padding: "$6 $16",
+  padding: "$6 $12",
   "&:disabled": {
     cursor: "not-allowed",
     transition: "none"
@@ -1809,7 +1798,32 @@ var ButtonStyled = styled(ButtonRadix, {
         }
       }
     },
-    typography: typographyButtonValues,
+    size: {
+      extraSmall: {
+        height: "$24",
+        fontSize: "$buttonExtraSmall",
+        lineHeight: "$buttonExtraSmall",
+        padding: "0 $12"
+      },
+      small: {
+        height: "30px",
+        fontSize: "$buttonSmall",
+        lineHeight: "$buttonSmall",
+        padding: "0 $14"
+      },
+      medium: {
+        height: "40px",
+        fontSize: "$buttonMedium",
+        lineHeight: "$buttonMedium",
+        padding: "0 $16"
+      },
+      large: {
+        height: "48px",
+        fontSize: "$buttonLarge",
+        lineHeight: "$buttonLarge",
+        padding: "0 $20"
+      }
+    },
     fontWeight: {
       regular: { fontWeight: "$regular" },
       medium: { fontWeight: "$medium" },
@@ -1823,15 +1837,16 @@ var ButtonStyled = styled(ButtonRadix, {
       }
     },
     radii: {
-      "full": {
+      full: {
         borderRadius: "$full"
       }
     }
   },
   defaultVariants: {
     variant: "contained",
-    typography: "buttonMedium",
-    color: "brand"
+    color: "brand",
+    size: "medium",
+    fontWeight: "medium"
   }
 });
 
@@ -7516,6 +7531,7 @@ var CalendarButtonStyled = styled("button", {
   border: "none",
   maxWidth: "200px",
   padding: "0",
+  cursor: "pointer",
   "> div > div": {
     paddingLeft: "1rem",
     "input": {
@@ -7805,7 +7821,7 @@ function Calendar(_a) {
               onClick: () => {
                 setShowCalendar(false);
               },
-              typography: "buttonMedium",
+              size: "medium",
               fontWeight: "medium",
               children: actionText != null ? actionText : "Aplicar"
             }
@@ -7902,6 +7918,19 @@ var InputStyled = styled("input", {
     MozAppearance: "textfield"
   }
 });
+var TimePickerButtonStyled = styled("button", {
+  backgroundColor: "transparent",
+  border: "none",
+  maxWidth: "200px",
+  padding: "0",
+  cursor: "pointer",
+  "> div > div": {
+    paddingLeft: "1rem",
+    input: {
+      textAlign: "right"
+    }
+  }
+});
 var pad = (num) => String(num).padStart(2, "0");
 function TimePicker({
   selected,
@@ -7945,16 +7974,22 @@ function TimePicker({
   );
   return /* @__PURE__ */ jsxs6(TimePickerStyled, { ref: dropdownRef, children: [
     /* @__PURE__ */ jsx15(
-      TextField,
+      TimePickerButtonStyled,
       {
-        value: selected,
-        readOnly: true,
-        type: "text",
-        placeholder: "00:00",
-        typography: "labelSmall",
-        fontWeight: "regular",
+        type: "button",
         onClick: () => setIsOpen((prev) => !prev),
-        children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "clock", size: "xl" }) })
+        children: /* @__PURE__ */ jsx15(
+          TextField,
+          {
+            value: selected,
+            readOnly: true,
+            type: "text",
+            placeholder: "00:00",
+            typography: "labelSmall",
+            fontWeight: "regular",
+            children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "clock", size: "xl" }) })
+          }
+        )
       }
     ),
     isOpen && /* @__PURE__ */ jsxs6(
@@ -8094,7 +8129,7 @@ function TimePicker({
                 setSelected(`${hours}:${minutes}`);
                 setIsOpen(false);
               },
-              typography: "buttonMedium",
+              size: "medium",
               fontWeight: "medium",
               children: "Aplicar"
             }
@@ -9228,6 +9263,7 @@ export {
   TextareaField,
   TextareaFieldStyle,
   TimePicker,
+  TimePickerButtonStyled,
   TimePickerDropdownStyled,
   TimePickerFooterStyled,
   TimePickerStyled,

package/package.json

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